These are the color combinations that can be used when creating or editing components on SFUSD sites.
|
Approximate Lightness
|
Grey | Blue | Teal | Red | Gold | Purple | |
|---|---|---|---|---|---|---|---|
| 90+ | #f2f6fa | #edf7fd | #eef6f6 | #fef3f1 | #fff7db | #f3f5ff | |
| 80 | #c2c8cf | #90d0f1 | #7fdcdb | #fcbfb6 | #ffe793 | #e4e8ff | |
| 70 | #aaafb5 | #5cb8e6 | #00cac8 | #f96b54 | #fdb81e | ||
| 60 | #8d9296 | #3d9bca | #00a3a0 | #ec533c | #e09d00 | ||
| 50 | #6a6e73 | #1176a8 | #00807d | #cb3721 | #5665AB | ||
| 40 | |||||||
| 30 | #4f5357 | #0a5c86 | #136362 | #a81e08 | #3c487c | ||
| 20 | #074564 | #2e365b | |||||
| 10 | #212121 | #1f2230 | |||||
| ~212 | 200 | 179 | 8 | 42-47 | 229 | ||
| Hue | |||||||