Color Primitives

This is the reference palette — raw LCH color primitives that the design system is built from. Each of the 15 color families has 14 shades (25–1000), authored in LCH color space for perceptual uniformity.

These values are not used directly in components. Instead, they serve as building blocks for semantic tokens — which map color intent (background, text, border, status) to specific shades per theme.

Use this page to:- Browse shades and inspect their Lightness, Chroma, and Hue values - Test color pairs for WCAG 2.1 contrast compliance (AA / AAA) - Find the right primitives before assigning them to semantic roles

Color System Semantic tokens, color sets, themes, and how primitives map to meaningful roles

Show:

Lightness Chroma Hue

Copy as:

Variable LCH HEX

Hold ⌥ Option / Alt and click two swatches to check contrast (WCAG 2.1 AA / AAA)

Fg Foreground

on

Bg Background

— contrast

Text AA min 4.5 AAA min 7

Large text (≥ 24px) AA min 3 AAA min 4.5

Non-text (UI, icons) AA min 3

white

black

Pure

100 L 100 C 0 H 0 hex #ffffff var --cn-pure-white

5 L 5 C 1.5 H 270 hex #0f1013 var --cn-pure-black

25

50

100

150

200

300

400

500

600

700

800

850

900

950

1000

gray

99 L 99 C 0 H 272 hex #fcfcfc var --cn-gray-25

97 L 97 C 0 H 272 hex #f6f6f6 var --cn-gray-50

92 L 92 C 1 H 272 hex #e7e8e9 var --cn-gray-100

87 L 87 C 1 H 272 hex #d9d9db var --cn-gray-150

84 L 84 C 3.5 H 272 hex #ced1d7 var --cn-gray-200

79 L 79 C 6 H 272 hex #bec3ce var --cn-gray-300

76 L 76 C 6.5 H 272 hex #b5bbc7 var --cn-gray-400

65 L 65 C 6 H 272 hex #989ea8 var --cn-gray-500

57 L 57 C 5.5 H 273 hex #848892 var --cn-gray-600

47 L 47 C 6 H 275 hex #6b6f79 var --cn-gray-700

33 L 33 C 9 H 278 hex #484d5b var --cn-gray-800

25 L 24.5 C 9 H 278 hex #343a47 var --cn-gray-850

16 L 16 C 6 H 280 hex #242730 var --cn-gray-900

10 L 10 C 2 H 280 hex #1a1b1e var --cn-gray-950

8 L 7.5 C 1 H 280 hex #161617 var --cn-gray-1000

red

98 L 98 C 4 H 10 hex #fff7f8 var --cn-red-25

96 L 96 C 7 H 12 hex #fff0f1 var --cn-red-50

93 L 93 C 15 H 16 hex #ffe5e6 var --cn-red-100

88 L 88 C 25 H 20 hex #ffd1d2 var --cn-red-150

82 L 82 C 35 H 20 hex #ffbabc var --cn-red-200

78 L 78 C 45 H 20 hex #ffa9ac var --cn-red-300

72 L 72 C 58 H 25 hex #ff8f8f var --cn-red-400

67 L 67 C 76 H 30 hex #ff7870 var --cn-red-500

61 L 61 C 90 H 32 hex #ff5550 var --cn-red-600

48 L 48 C 86 H 32 hex #d22d34 var --cn-red-700

45 L 45 C 80 H 31 hex #c33035 var --cn-red-800

35 L 35 C 55 H 25 hex #8f2c2b var --cn-red-850

18 L 18 C 33 H 375 hex #4d1519 var --cn-red-900

15 L 15 C 28 H 375 hex #3d1418 var --cn-red-950

8 L 8 C 8 H 360 hex #1e1518 var --cn-red-1000

orange

99 L 98.5 C 4 H 70 hex #fffaf5 var --cn-orange-25

96 L 96 C 11 H 68 hex #fff1e4 var --cn-orange-50

93 L 93 C 16 H 65 hex #ffe6d1 var --cn-orange-100

89 L 89 C 28 H 62 hex #ffd8b9 var --cn-orange-150

84 L 84 C 41 H 58 hex #ffc49d var --cn-orange-200

78 L 78 C 58 H 55 hex #ffad7a var --cn-orange-300

72 L 72 C 78 H 53 hex #ff9355 var --cn-orange-400

67 L 67 C 100 H 52 hex #ff7b31 var --cn-orange-500

60 L 60 C 97 H 49 hex #e95d00 var --cn-orange-600

49 L 49 C 92 H 52 hex #c44d00 var --cn-orange-700

41 L 41 C 80 H 51 hex #a63d00 var --cn-orange-800

32 L 32 C 55 H 48 hex #7d3716 var --cn-orange-850

23 L 23 C 42 H 48 hex #542615 var --cn-orange-900

16 L 16 C 21 H 48 hex #382218 var --cn-orange-950

10 L 10 C 6 H 55 hex #1f1b18 var --cn-orange-1000

yellow

99 L 99 C 9 H 98 hex #fffced var --cn-yellow-25

96 L 96 C 38 H 95 hex #fff4b9 var --cn-yellow-50

93 L 93 C 48 H 92 hex #feea93 var --cn-yellow-100

89 L 89 C 65 H 88 hex #fedc64 var --cn-yellow-150

84 L 84 C 84 H 82 hex #ffc833 var --cn-yellow-200

77 L 77 C 100 H 76 hex #f8af00 var --cn-yellow-300

72 L 72 C 98 H 70 hex #f49b00 var --cn-yellow-400

65 L 65 C 95 H 66 hex #e38600 var --cn-yellow-500

58 L 58 C 95 H 63 hex #cf7200 var --cn-yellow-600

49 L 49 C 82 H 60 hex #b05d10 var --cn-yellow-700

41 L 41 C 60 H 58 hex #904f1c var --cn-yellow-800

32 L 32 C 45 H 57 hex #6e3f1d var --cn-yellow-850

23 L 23 C 33 H 58 hex #4e2f19 var --cn-yellow-900

16 L 16 C 19 H 60 hex #342418 var --cn-yellow-950

10 L 10 C 4 H 60 hex #1e1b19 var --cn-yellow-1000

brown

98 L 98 C 4 H 38 hex #fff8f6 var --cn-brown-25

96 L 96 C 7 H 38 hex #fff0ed var --cn-brown-50

93 L 93 C 13 H 38 hex #ffe5df var --cn-brown-100

89 L 89 C 22 H 38 hex #ffd6cc var --cn-brown-150

84 L 84 C 33 H 38 hex #ffc3b4 var --cn-brown-200

78 L 78 C 48 H 38 hex #ffab97 var --cn-brown-300

72 L 72 C 62 H 38 hex #ff9179 var --cn-brown-400

65 L 65 C 62 H 38 hex #ea7e67 var --cn-brown-500

56 L 56 C 56 H 38 hex #c86b57 var --cn-brown-600

49 L 49 C 50 H 38 hex #ac5e4d var --cn-brown-700

41 L 41 C 42 H 38 hex #8f4e40 var --cn-brown-800

32 L 32 C 34 H 38 hex #703d31 var --cn-brown-850

23 L 23 C 24 H 38 hex #502d25 var --cn-brown-900

16 L 16 C 14 H 40 hex #37231d var --cn-brown-950

10 L 10 C 4 H 50 hex #1f1b18 var --cn-brown-1000

lime

99 L 99 C 10 H 120 hex #f8ffeb var --cn-lime-25

98 L 98 C 23 H 120 hex #efffd4 var --cn-lime-50

96 L 96 C 32 H 120 hex #e5fbc0 var --cn-lime-100

90 L 90 C 56 H 120 hex #c8ef8c var --cn-lime-150

84 L 84 C 68 H 122 hex #ace16c var --cn-lime-200

78 L 78 C 80 H 120 hex #97d240 var --cn-lime-300

72 L 72 C 90 H 120 hex #7ec30a var --cn-lime-400

65 L 65 C 85 H 123 hex #65b000 var --cn-lime-500

56 L 56 C 80 H 125 hex #4e9700 var --cn-lime-600

50 L 50 C 72 H 125 hex #448600 var --cn-lime-700

41 L 41 C 60 H 125 hex #376d00 var --cn-lime-800

32 L 32 C 54 H 125 hex #2c5506 var --cn-lime-850

23 L 23 C 33 H 128 hex #233d13 var --cn-lime-900

17 L 17 C 20 H 128 hex #1f2c16 var --cn-lime-950

10 L 10 C 5 H 130 hex #1a1c18 var --cn-lime-1000

forest

99 L 99 C 6 H 150 hex #f4fff6 var --cn-forest-25

96 L 96 C 25 H 150 hex #d6fddf var --cn-forest-50

93 L 93 C 42 H 151 hex #b5fbc8 var --cn-forest-100

89 L 89 C 63 H 151 hex #8df5ad var --cn-forest-150

81 L 81 C 78 H 152 hex #5de28d var --cn-forest-200

78 L 78 C 89 H 152 hex #1ddd79 var --cn-forest-300

72 L 72 C 87 H 152 hex #00cb6c var --cn-forest-400

65 L 65 C 80 H 152 hex #00b660 var --cn-forest-500

56 L 56 C 75 H 153 hex #009b51 var --cn-forest-600

50 L 50 C 70 H 153 hex #008947 var --cn-forest-700

36 L 36 C 64 H 158 hex #006232 var --cn-forest-800

28 L 28 C 44 H 150 hex #004a26 var --cn-forest-850

19 L 19 C 30 H 152 hex #093521 var --cn-forest-900

16 L 16 C 21 H 158 hex #0b2e1e var --cn-forest-950

10 L 10 C 7 H 160 hex #141e19 var --cn-forest-1000

mint

99 L 99 C 5 H 165 hex #f3fff9 var --cn-mint-25

96 L 96 C 20 H 165 hex #d4fdea var --cn-mint-50

93 L 93 C 20 H 166 hex #CDF4E3 var --cn-mint-100

89 L 89 C 33 H 167 hex #ABEDD3 var --cn-mint-150

84 L 84 C 65 H 165 hex #4aebb4 var --cn-mint-200

78 L 78 C 70 H 165 hex #00dba2 var --cn-mint-300

72 L 72 C 75 H 165 hex #00c994 var --cn-mint-400

65 L 65 C 70 H 165 hex #00b484 var --cn-mint-500

56 L 56 C 63 H 165 hex #009970 var --cn-mint-600

49 L 49 C 55 H 165 hex #008561 var --cn-mint-700

41 L 41 C 50 H 165 hex #006f50 var --cn-mint-800

32 L 32 C 43 H 165 hex #00573e var --cn-mint-850

23 L 23 C 30 H 165 hex #00402d var --cn-mint-900

16 L 16 C 18 H 165 hex #0f2d22 var --cn-mint-950

10 L 10 C 4 H 165 hex #161d1a var --cn-mint-1000

cyan

99 L 99 C 5 H 195 hex #f2fffe var --cn-cyan-25

97 L 97 C 17 H 195 hex #d5fffd var --cn-cyan-50

94 L 94 C 15 H 196 hex #D7F4F3 var --cn-cyan-100

89 L 89 C 27 H 195 hex #ADEBE9 var --cn-cyan-150

84 L 84 C 60 H 195 hex #00eae8 var --cn-cyan-200

78 L 78 C 62 H 195 hex #00d8d6 var --cn-cyan-300

72 L 72 C 60 H 195 hex #00c6c4 var --cn-cyan-400

65 L 65 C 53 H 195 hex #00b1af var --cn-cyan-500

56 L 56 C 50 H 195 hex #009795 var --cn-cyan-600

48 L 48 C 42 H 195 hex #00807f var --cn-cyan-700

36 L 36 C 38 H 195 hex #005f5e var --cn-cyan-800

28 L 28 C 38 H 195 hex #004a49 var --cn-cyan-850

18 L 18 C 22 H 195 hex #053231 var --cn-cyan-900

16 L 16 C 15 H 195 hex #082d2d var --cn-cyan-950

10 L 10 C 5 H 210 hex #151d1e var --cn-cyan-1000

blue

98 L 98 C 3 H 240 hex #f4fafe var --cn-blue-25

97 L 97 C 6 H 240 hex #eef8ff var --cn-blue-50

95 L 95 C 10 H 243 hex #E1F3FE var --cn-blue-100

91 L 91 C 15 H 255 hex #D3E9FD var --cn-blue-150

86 L 86 C 27 H 255 hex #B5DCFD var --cn-blue-200

76 L 76 C 55 H 253 hex #5cbdff var --cn-blue-300

72 L 72 C 54 H 255 hex #5eb8ff var --cn-blue-400

65 L 65 C 58 H 255 hex #2da6ff var --cn-blue-500

60 L 60 C 61 H 255 hex #009ae7 var --cn-blue-600

48 L 48 C 51 H 255 hex #007ab8 var --cn-blue-700

41 L 41 C 46 H 255 hex #00679d var --cn-blue-800

32 L 32 C 38 H 255 hex #00517c var --cn-blue-850

22 L 22 C 32 H 252 hex #004466 var --cn-blue-900

15 L 15 C 18 H 250 hex #082b40 var --cn-blue-950

11 L 11 C 6 H 262 hex #191e25 var --cn-blue-1000

indigo

98 L 98 C 3 H 280 hex #f8f9ff var --cn-indigo-25

96 L 96 C 6 H 280 hex #f1f3ff var --cn-indigo-50

93 L 93 C 11 H 280 hex #e7eaff var --cn-indigo-100

91 L 91 C 15 H 286 hex #E0E4FF var --cn-indigo-150

87 L 87 C 20 H 284 hex #D1D8FA var --cn-indigo-200

78 L 78 C 36 H 280 hex #b1bfff var --cn-indigo-300

72 L 72 C 47 H 280 hex #9aaeff var --cn-indigo-400

64 L 64 C 60 H 280 hex #7699ff var --cn-indigo-500

51 L 51 C 85 H 280 hex #007bfe var --cn-indigo-600

47 L 47 C 80 H 280 hex #006dea var --cn-indigo-700

41 L 41 C 72 H 280 hex #005fcd var --cn-indigo-800

32 L 32 C 60 H 280 hex #004aa3 var --cn-indigo-850

19 L 19 C 30 H 266 hex #093054 var --cn-indigo-900

14 L 14 C 20 H 264 hex #10253c var --cn-indigo-950

10 L 10 C 5 H 270 hex #191e25 var --cn-indigo-1000

violet

98 L 98 C 3 H 290 hex #f9f9ff var --cn-violet-25

97 L 97 C 5 H 290 hex #f7f6ff var --cn-violet-50

93 L 93 C 10 H 295 hex #ECEAFE var --cn-violet-100

90 L 90 C 18 H 295 hex #E3E0FC var --cn-violet-150

84 L 84 C 29 H 290 hex #d1cdff var --cn-violet-200

78 L 78 C 38 H 290 hex #bfbbff var --cn-violet-300

72 L 72 C 49 H 290 hex #aca9ff var --cn-violet-400

65 L 65 C 61 H 290 hex #9495ff var --cn-violet-500

56 L 56 C 77 H 290 hex #707bff var --cn-violet-600

49 L 49 C 90 H 290 hex #4c68ff var --cn-violet-700

41 L 41 C 82 H 290 hex #3956dc var --cn-violet-800

32 L 32 C 67 H 290 hex #3143a9 var --cn-violet-850

23 L 23 C 52 H 290 hex #25317c var --cn-violet-900

16 L 16 C 28 H 288 hex #21254b var --cn-violet-950

10 L 10 C 5 H 285 hex #1b1b22 var --cn-violet-1000

purple

98 L 98 C 5 H 320 hex #fef7ff var --cn-purple-25

96 L 96 C 10 H 320 hex #fdefff var --cn-purple-50

93 L 93 C 17 H 320 hex #fce3ff var --cn-purple-100

89 L 89 C 30 H 320 hex #fad3ff var --cn-purple-150

84 L 84 C 42 H 320 hex #f6bfff var --cn-purple-200

78 L 78 C 60 H 320 hex #f2a6ff var --cn-purple-300

72 L 72 C 78 H 320 hex #ec8cff var --cn-purple-400

65 L 65 C 95 H 320 hex #e56bff var --cn-purple-500

58 L 58 C 100 H 320 hex #d949f9 var --cn-purple-600

48 L 48 C 94 H 320 hex #b035cc var --cn-purple-700

41 L 41 C 75 H 320 hex #9537aa var --cn-purple-800

32 L 32 C 60 H 320 hex #722e81 var --cn-purple-850

23 L 23 C 40 H 320 hex #502659 var --cn-purple-900

16 L 16 C 18 H 320 hex #352138 var --cn-purple-950

10 L 10 C 4 H 320 hex #1e1a1f var --cn-purple-1000

pink

98 L 98 C 4 H 350 hex #fff7fa var --cn-pink-25

96 L 96 C 8 H 350 hex #fff0f6 var --cn-pink-50

93 L 93 C 14 H 350 hex #ffe4ef var --cn-pink-100

89 L 89 C 23 H 350 hex #ffd4e6 var --cn-pink-150

84 L 84 C 34 H 350 hex #ffbfdb var --cn-pink-200

78 L 78 C 49 H 350 hex #ffa6cf var --cn-pink-300

72 L 72 C 64 H 350 hex #ff8ac3 var --cn-pink-400

65 L 65 C 80 H 350 hex #ff63b5 var --cn-pink-500

58 L 58 C 82 H 350 hex #ee49a3 var --cn-pink-600

50 L 50 C 75 H 350 hex #d1358d var --cn-pink-700

41 L 41 C 68 H 350 hex #b11f75 var --cn-pink-800

32 L 32 C 54 H 350 hex #87205a var --cn-pink-850

23 L 23 C 35 H 350 hex #5e2040 var --cn-pink-900

16 L 16 C 22 H 350 hex #3d1d2d var --cn-pink-950

10 L 10 C 6 H 350 hex #201a1d var --cn-pink-1000

Copied!