Colors

NOTICE

Colors are currently being updated. This page is not a completely accurate depiction of new colors being added and existing colors being altered.

The Codex color palette is used to bring visual meaning to interface elements and convey specific messages in certain instances. The primary colors used are various shades of gray as textual and foundational elements, blue as progressive elements, and red, yellow, and green to convey status.

For documentation on how all colors are applied, visit Color tokens.

To check the contrast ratio between two colors, visit the WebAIM contrast checker.

Color options

1. White

   1. white#fff

2. Black

   1. black#000

3. Gray

   1. gray100#f8f9fa
   2. gray200#eaecf0
   3. gray250#dadde3
   4. gray300#c8ccd1
   5. gray400#a2a9b1
   6. gray500#72777d
   7. gray600#54595d
   8. gray650#404244
   9. gray700#27292d
   10. gray750#202122
   11. gray800#101418

4. Red

   1. red100#fee7e6
   2. red300#f8a397
   3. red400#ef8174
   4. red500#ff4242
   5. red600#d73333
   6. red650#bd2a2a
   7. red700#b32424
   8. red800#421211

5. Yellow

   1. yellow100#fef6e7
   2. yellow500#fc3
   3. yellow600#edab00
   4. yellow650#ad822b
   5. yellow700#a66200
   6. yellow800#301d00

6. Green

   1. green100#d5fdf4
   2. green400#74c9ac
   3. green500#00af89
   4. green600#14866d
   5. green700#096450
   6. green800#00261e

7. Blue

   1. blue100#eaf3ff
   2. blue250#c2d1f0
   3. blue300#afb6e9
   4. blue400#6d8af2
   5. blue500#447ff5
   6. blue600#36c
   7. blue650#3057ac
   8. blue700#2a4b8d
   9. blue800#1c2940

8. Purple

   1. purple250#c3b2d8
   2. purple300#ad97ca
   3. purple400#977dbd
   4. purple500#7c5eab
   5. purple600#6b4ba1
   6. purple700#5a4086

9. Maroon

   1. maroon250#d8afad
   2. maroon300#c99391
   3. maroon400#b97876
   4. maroon500#a55858
   5. maroon600#874949
   6. maroon700#733f3f