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`