Colors
Color System
The color system is the source of the colors that themes draw from. Each has a
range of values from 0 (black #000000) to 150 (white #ffffff). Not all
colors are or should be used in every theme, but the scales provide a chance to
see the colors in a larger context and makes it easy to switch out colors as desired.
The number assigned to each estimates how light or dark that color is. For parts of
an interface that are interactive, have text, or have any other important information,
please use colors combinations that have at least a difference of 20 where colors
overlap. Depending on the colors, you may need more contrast to create a theme that
meets accessibility standards about contrast or color blindness.
Gray
| System Name |
Value |
Sample |
| B0 |
#000000 |
 |
| B10 |
#19232D |
 |
| B20 |
#262E38 |
|
| B30 |
#37414F |
|
| B40 |
#455364 |
|
| B50 |
#54687A |
|
| B60 |
#60798B |
|
| B70 |
#788D9C |
|
| B80 |
#9DA9B5 |
|
| B90 |
#CBCACA |
|
| B100 |
#D9D8D8 |
|
| B110 |
#E1E1E1 |
|
| B120 |
#EEEEEE |
|
| B130 |
#F5F5F5 |
|
| B140 |
#FAFAFA |
|
| B150 |
#FFFFFF |
|
Blue
| System Name |
Value |
Sample |
| B0 |
#000000 |
|
| B10 |
#062647 |
|
| B20 |
#26486B |
|
| B30 |
#375A7F |
|
| B40 |
#346792 |
|
| B50 |
#1A72BB |
|
| B60 |
#057DCE |
|
| B70 |
#259AE9 |
|
| B80 |
#37AEFE |
|
| B90 |
#73C7FF |
|
| B100 |
#9FD9FF |
|
| B110 |
#C2E3FA |
|
| B120 |
#CEEBFF |
|
| B130 |
#DAF0FF |
|
| B140 |
#F5FBFF |
|
| B150 |
#FFFFFF |
|
Green
| System Name |
Value |
Sample |
| B0 |
#000000 |
|
| B10 |
#064738 |
|
| B20 |
#055C49 |
|
| B30 |
#007A5E |
|
| B40 |
#008760 |
|
| B50 |
#019D70 |
|
| B60 |
#02BA85 |
|
| B70 |
#20C997 |
|
| B80 |
#44DEB0 |
|
| B90 |
#3BEBB7 |
|
| B100 |
#88F2D3 |
|
| B110 |
#B0F5E1 |
|
| B120 |
#D1FBEE |
|
| B130 |
#E4FFF7 |
|
| B140 |
#F5FFFD |
|
| B150 |
#FFFFFF |
|
Red
| System Name |
Value |
Sample |
| B0 |
#000000 |
|
| B10 |
#470606 |
|
| B20 |
#760B0B |
|
| B30 |
#AF0F0F |
|
| B40 |
#D4140B |
|
| B50 |
#DE321F |
|
| B60 |
#E24232 |
|
| B70 |
#E74C3C |
|
| B80 |
#F66657 |
|
| B90 |
#F88478 |
|
| B100 |
#FFACA4 |
|
| B110 |
#FFC3BD |
|
| B120 |
#FEDDDA |
|
| B130 |
#FFEEEE |
|
| B140 |
#FFF5F5 |
|
| B150 |
#FFFFFF |
|
Orange
| System Name |
Value |
Sample |
| B0 |
#000000 |
|
| B10 |
#471D06 |
|
| B20 |
#692907 |
|
| B30 |
#AB3E00 |
|
| B40 |
#CE4B01 |
|
| B50 |
#E05E15 |
|
| B60 |
#E57004 |
|
| B70 |
#F37E12 |
|
| B80 |
#FF993B |
|
| B90 |
#FFB950 |
|
| B100 |
#FFCF84 |
|
| B110 |
#FFC3BD |
|
| B120 |
#FFEACA |
|
| B130 |
#FFF3E2 |
|
| B140 |
#FFFBF5 |
|
| B150 |
#FFFFFF |
|
Default Dark Mode
Background
| Palette Name |
System Name |
Value |
Sample |
| BACKGROUND_1 |
B10 |
#19232D |
|
| BACKGROUND_2 |
B20 |
#262E38 |
|
| BACKGROUND_3 |
B40 |
#455364 |
|
| BACKGROUND_4 |
B60 |
#60798B |
|
| BACKGROUND_5 |
B60 |
#60798B |
|
Text
| Palette Name |
System Name |
Value |
Sample |
| TEXT_1 |
B150 |
#FFFFFF |
|
| TEXT_2 |
B140 |
#FAFAFA |
|
| TEXT_3 |
B120 |
#EEEEEE |
|
| TEXT_4 |
B100 |
#D9D8D8 |
|
Inverse Text
| Palette Name |
System Name |
Value |
Sample |
| INVERSE_TEXT_1 |
B150 |
#FFFFFF |
|
| INVERSE_TEXT_2 |
B140 |
#FAFAFA |
|
| INVERSE_TEXT_3 |
B120 |
#EEEEEE |
|
| INVERSE_TEXT_4 |
B100 |
#D9D8D8 |
|
Accent
| Palette Name |
System Name |
Value |
Sample |
| ACCENT_1 |
B50 |
#1A72BB |
|
| ACCENT_2 |
B70 |
#259AE9 |
|
| ACCENT_3 |
B90 |
#73C7FF |
|
| ACCENT_4 |
B110 |
#C2E3FA |
|
Border
| Palette Name |
System Name |
Value |
Sample |
| BORDER_1 |
B40 |
#455364 |
|
| BORDER_2 |
B50 |
#54687A |
|
| BORDER_3 |
B60 |
#60798B |
|
| BORDER_4 |
B70 |
#788D9C |
|
Feedback
| Palette Name |
System Name |
Value |
Sample |
| SUCCESS_1 |
B40 |
#008760 |
|
| SUCCESS_2 |
B70 |
#20C997 |
|
| SUCCESS_3 |
B110 |
#B0F5E1 |
|
| ERROR_1 |
B40 |
#D4140B |
|
| ERROR_2 |
B70 |
#E74C3C |
|
| ERROR_3 |
B110 |
#FFC3BD |
|
| WARN_1 |
B40 |
#CE4B01 |
|
| WARN_2 |
B70 |
#F37E12 |
|
| WARN_3 |
B110 |
#FFDDA7 |
|
Icon
ICON_1 = 'GRAY_140' #FAFAFA
ICON_2 = 'BLUE_70' #259AE9
ICON_3 = 'GREEN_70' #20C997
ICON_4 = 'RED_70' #E74C3C
ICON_5 = 'ORANGE_70' #F37E12
ICON_6 = 'GRAY_30' #37414F
| Palette Name |
System Name |
Value |
Sample |
| ICON_1 |
B140 |
#FAFAFA |
|
| ICON_2 |
B70 |
#259AE9 |
|
| ICON_3 |
B70 |
#20C997 |
|
| ICON_4 |
B70 |
#E74C3C |
|
| ICON_5 |
B70 |
#F37E12 |
|
| ICON_6 |
B30 |
#37414F |
|
Highlight
| Palette Name |
System Name |
Value |
Sample |
| HIGHLIGHT_1 |
B50 |
#54687A |
|
| HIGHLIGHT_2 |
B60 |
#60798B |
|
| HIGHLIGHT_3 |
B70 |
#788D9C |
|
| HIGHLIGHT_4 |
B80 |
#9DA9B5 |
|
Find
FIND_1 = 'BLUE_50' #90% #1A72BB rgba(26,114,187,0.9)
FIND_2 = 'BLUE_60' #90% #057DCE rgba(5,125,206,0.9)
FIND_3 = 'BLUE_70' #90% #259AE9 rgba(37,154,233,0.9)
FIND_4 = 'BLUE_80' #90% #37AEFE rgba(55,174,254,0.9)
| Palette Name |
System Name |
Value |
Sample |
| FIND_1 |
B50 |
#1A72BB |
|
| FIND_2 |
B60 |
#057DCE |
|
| FIND_3 |
B70 |
#259AE9 |
|
| FIND_4 |
B80 |
#37AEFE |
|
Default Light Mode
Background
BACKGROUND_1 = 'GRAY_140' #FAFAFA
BACKGROUND_2 = 'GRAY_120' #EEEEEE
BACKGROUND_3 = 'GRAY_100' #D9D8D8
BACKGROUND_4 = 'GRAY_80' #9DA9B5
BACKGROUND_5 = 'GRAY_60' #60798B
Text
TEXT_1 = 'GRAY_0' #000000
TEXT_2 = 'GRAY_10' #19232D
TEXT_3 = 'GRAY_20' #262E38
TEXT_4 = 'GRAY_40' #455364
Inverse Text
INVERSE_TEXT_1 = 'GRAY_150' #FFFFFF
INVERSE_TEXT_2 = 'GRAY_140' #FAFAFA
INVERSE_TEXT_3 = 'GRAY_120' #EEEEEE
INVERSE_TEXT_4 = 'GRAY_100' #D9D8D8
Accent
ACCENT_1 = 'BLUE_50' #1A72BB
ACCENT_2 = 'BLUE_70' ##259AE9
ACCENT_3 = 'BLUE_90' #73C7FF
ACCENT_4 = 'BLUE_110' #C2E3FA
Border
BORDER_1 = 'GRAY_40' #455364
BORDER_2 = 'GRAY_50' #54687A
BORDER_3 = 'GRAY_60' #60798B
BORDER_4 = 'GRAY_70' #788D9C
Feedback
SUCCESS_1 = 'GREEN_40' #008760
SUCCESS_2 = 'GREEN_70' #20C997
SUCCESS_3 = 'GREEN_110' #B0F5E1
ERROR_1 = 'RED_40' #D4140B
ERROR_2 = 'RED_70' #E74C3C
ERROR_3 = 'RED_110' #FFC3BD
WARN_1 = 'ORANGE_40' #CE4B01
WARN_2 = 'ORANGE_70' #F37E12
WARN_3 = 'ORANGE_110' #FFDDA7
Icon
ICON_1 = 'GRAY_30' #37414F
ICON_2 = 'BLUE_70' #259AE9
ICON_3 = 'GREEN_70' #20C997
ICON_4 = 'RED_70' #E74C3C
ICON_5 = 'ORANGE_70' #F37E12
ICON_6 = 'GRAY_140' #FAFAFA
Highlight
HIGHLIGHT_1 = 'GRAY_100' #90% #E1E1E1 rgba(225,225,225,0.9)
HIGHLIGHT_2 = 'GRAY_90' #90% #CBCACA rgba(203,202,202,0.9)
HIGHLIGHT_3 = 'GRAY_80' #90% #9DA9B5 rgba(157,169,181,0.9)
HIGHLIGHT_4 = 'GRAY_70' #90% #788D9C rgba(120,141,156,0.9)
Find
FIND_1 = 'BLUE_80' #90% #37AEFE rgba(55,174,254,0.9)
FIND_2 = 'BLUE_70' #90% #259AE9 rgba(37,154,233,0.9)
FIND_3 = 'BLUE_60' #90% #057DCE rgba(5,125,206,0.9)
FIND_4 = 'BLUE_50' #90% #1A72BB rgba(26,114,187,0.9)
Isabela Presedo-Floyd