Overview
The broad color palette expansion has been explored using generative tools with manual fine-tuning, aligning to the goals and considering the opportunities listed in T371516.
This expanded palette allows us to make general statement such as:
- The 700 value of every color (and 600 value of gray), which represent text and link colors in the Codex light mode and other potential themes, has at least 4.5:1 contrast ratio on all 50 values of all colors (and 100 value of gray). These same 700 values have a contrast ratio of at least 2.97:1 with the 900 value of gray, which would be the base text color in light mode or a potential sepia mode.
- The 400 value of every color (and 300 value of gray), which represent text and link colors in the Codex dark mode and other potential themes, has at least 4.5:1 contrast ratio on all 1000 values of all colors (and 800 value of gray).
- Other similar statements can be made for both light and dark modes for graphical elements and a 3:1 contrast ratio with the 500 value of all colors.
New palette
Palette comparisons
Realigned values
How to read this table
The numbers on the top row are the new values.
The numbers next to each color are the previous palettes equivalent to the newly realigned palette.
Cells with a dash (-) are new values which did not previously exist.
For example, what was previously known as yellow500 is now known as yellow200.
| 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | |
| gray | 100 | 200 | 250 | 300 | 400 | 500 | 600 | 650 | 700 | 750 | 800 |
| red | 100 | - | - | 300 | 400 | 500 | 600 | 650 | 700 | - | 800 |
| orange | - | - | - | - | - | - | - | - | - | - | - |
| yellow | 100 | - | 500 | 600 | - | 650 | 700 | - | - | - | 800 |
| lime | - | - | - | - | - | - | - | - | - | - | - |
| green | 100 | - | - | 400 | 500 | - | 600 | - | 700 | - | 800 |
| blue | 100 | - | 250 | 300 | - | 400 | 500 | 600 | 650 | 700 | 800 |
| purple | - | - | - | 250 | 300 | 400 | - | 500 | 600 | 700 | - |
| pink | - | - | - | - | - | - | - | - | - | - | - |
| maroon | - | - | - | 250 | 300 | 400 | - | 500 | 600 | 700 | - |
The visual example below follows the same logic for the numerical values. Each swatch, or cell, has two halves. The left half is the previous color and the right half is the new color of the equivalent value.
Previous vs new hex codes
| previous hex | new hex | previous value | new value |
| f8f9fa | f8f9fa | gray100 | gray50 |
| eaecf0 | eaecf0 | gray200 | gray100 |
| dadde3 | dadde3 | gray250 | gray200 |
| c8ccd1 | c8ccd1 | gray300 | gray300 |
| a2a9b1 | a2a9b1 | gray400 | gray400 |
| 72777d | 72777d | gray500 | gray500 |
| 54595d | 54595d | gray600 | gray600 |
| 404244 | 404244 | gray650 | gray700 |
| 27292d | 27292d | gray700 | gray800 |
| 202122 | 202122 | gray750 | gray900 |
| 101418 | 101418 | gray800 | gray1000 |
| fee7e6 | ffe9e5 | red100 | red50 |
| f8a397 | fea898 | red300 | red300 |
| ef8174 | fd7865 | red400 | red400 |
| ff4242 | f54739 | red500 | red500 |
| d73333 | refer to T370446 | red600 | red600 |
| bd2a2a | bf3c2c | red650 | red700 |
| b32424 | 9f3526 | red700 | red800 |
| 421211 | 3c1a13 | red800 | red1000 |
| fef6e7 {also ffe7e6} | fdf2d5 | yellow100 | yellow50 |
| fc3 | fecc44 | `yellow500 | yellow200 |
| edab00 | eeb533 | yellow600 | yellow300 |
| ad822b | ab7f2a | yellow650 | yellow500 |
| a66200 | 987027 | yellow700 | yellow600 |
| 301d00 | 2d2212 | yellow800 | yellow1000 |
| d5fdf4 | dff2eb | green100 | green50 |
| 74c9ac | 80cdb3 | green400 | green300 |
| 00af89 | 2cb491 | green500 | green400 |
| 14866d | 14876b | green600 | green600 |
| 096450 | 196551 | green700 | green800 |
| 00261e | 132821 | green800 | green1000 |
| eaf3ff | f1f4fd | blue100 | blue50 |
| c2d1f0 | cbd6f6 | blue250 | blue200 |
| afb6e9 | b0c1f0 | blue300 | blue300 |
| 6d8af2 | 6485d1 | blue400 | blue500 |
| 447ff5 | 4b77d6 | blue500 | blue600 |
| 36c | 36c | blue600 | blue700 |
| 3057ac | 3056a9 | blue650 | blue800 |
| 2a4b8d | 233566 | blue700 | blue900 |
| 1c2940 | 1b223d | blue800 | blue1000 |
| c3b2d8 | c5b9dd | purple250 | purple300 |
| ad97ca | a799cd | purple300 | purple400 |
| 977dbd | 8d7ebd | purple400 | purple500 |
| 7c5eab | 6a60b0 | purple500 | purple700 |
| 6b4ba1 | 534fa3 | purple600 | purple800 |
| 5a4086 | 353262 | purple700 | purple900 |
| d8afad | dcb5b3 | maroon250 | maroon300 |
| c99391 | c99391 | maroon300 | maroon400 |
| b97876 | b57775 | maroon400 | maroon500 |
| a55858 | 9f5555 | maroon500 | maroon700 |
| 874949 | 854848 | maroon600 | maroon800 |
| 733f3f | 512e2e | maroon700 | maroon900 |
| Extended replacements | |||
| 099D7C | 2cb491 | - | green400 |
Acceptance Criteria
- Realign values to one another across hues
- Fill in the gaps to expand color palette
- Add/adjust color option tokens
- Revise application and component tokens to match