Colors

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. gray50#f8f9fa
   2. gray100#eaecf0
   3. gray200#dadde3
   4. gray300#c8ccd1
   5. gray400#a2a9b1
   6. gray500#72777d
   7. gray600#54595d
   8. gray700#404244
   9. gray800#27292d
   10. gray900#202122
   11. gray1000#101418

4. Red

   1. red50#ffe9e5
   2. red100#ffdad3
   3. red200#ffc8bd
   4. red300#fea898
   5. red400#fd7865
   6. red500#f54739
   7. red600#d74032
   8. red700#bf3c2c
   9. red800#9f3526
   10. red900#612419
   11. red1000#3c1a13

5. Orange

   1. orange50#ffead4
   2. orange100#ffdcb8
   3. orange200#ffc894
   4. orange300#ffa758
   5. orange400#f97f26
   6. orange500#d46926
   7. orange600#bb5c26
   8. orange700#a95226
   9. orange800#8e4424
   10. orange900#572c19
   11. orange1000#361d13

6. Yellow

   1. yellow50#fdf2d5
   2. yellow100#fbe2a2
   3. yellow200#fecc44
   4. yellow300#eeb533
   5. yellow400#ca982e
   6. yellow500#ab7f2a
   7. yellow600#987027
   8. yellow700#886425
   9. yellow800#735421
   10. yellow900#453217
   11. yellow1000#2d2212

7. Lime

   1. lime50#e3f2e4
   2. lime100#d1e9d2
   3. lime200#b9debc
   4. lime300#94cb9a
   5. lime400#5db26c
   6. lime500#259948
   7. lime600#1f893f
   8. lime700#1f7a39
   9. lime800#1f6631
   10. lime900#183f20
   11. lime1000#142817

8. Green

   1. green50#dff2eb
   2. green100#c9eadd
   3. green200#aedfcd
   4. green300#80cdb3
   5. green400#2cb491
   6. green500#099979
   7. green600#14876b
   8. green700#177860
   9. green800#196551
   10. green900#153d31
   11. green1000#132821

9. Blue

   1. blue50#f1f4fd
   2. blue100#dce3f9
   3. blue200#cbd6f6
   4. blue300#b0c1f0
   5. blue400#88a3e8
   6. blue500#6485d1
   7. blue600#4b77d6
   8. blue700#36c
   9. blue800#3056a9
   10. blue900#233566
   11. blue1000#1b223d

10. Purple

    1. purple50#f0ecf6
    2. purple100#e6e0f0
    3. purple200#d9d0e9
    4. purple300#c5b9dd
    5. purple400#a799cd
    6. purple500#8d7ebd
    7. purple600#7a6db7
    8. purple700#6a60b0
    9. purple800#534fa3
    10. purple900#353262
    11. purple1000#23203b

11. Pink

    1. pink50#f5ebf2
    2. pink100#eedeea
    3. pink200#e6cede
    4. pink300#d9b4cd
    5. pink400#c690b4
    6. pink500#b5739e
    7. pink600#ac5c90
    8. pink700#9b527f
    9. pink800#82456a
    10. pink900#4e2c40
    11. pink1000#311e28

12. Maroon

    1. maroon50#f6ebeb
    2. maroon100#f0dedd
    3. maroon200#e8cecd
    4. maroon300#dcb5b3
    5. maroon400#c99391
    6. maroon500#b57775
    7. maroon600#ac6262
    8. maroon700#9f5555
    9. maroon800#854848
    10. maroon900#512e2e
    11. maroon1000#321f1e