Color Palette

Design tokens and color system

Semantic Colors

info

100

#E9EFFB
220° 69% 95%

200

#93B1EB
220° 69% 75%

300

#5684E1
220° 70% 61%

400

#2F68DA
220° 70% 52%

500

#2560D4
220° 70% 49%

600

#183F8B
220° 71% 32%

700

#0F2757
220° 71% 20%

800

#091734
220° 70% 12%

900

#08142B
219° 69% 10%

success

100

#DDF3DF
125° 48% 91%

200

#BCE6BE
123° 46% 82%

300

#9ADA9E
124° 46% 73%

400

#50BE56
123° 46% 53%

500

#2D7B31
123° 46% 33%

600

#256528
123° 46% 27%

700

#1D4E1F
122° 46% 21%

800

#133415
124° 46% 14%

900

#0A1A0B
124° 44% 7%

warning

100

#FFF4D1
46° 100% 91%

200

#FFE8A3
45° 100% 82%

300

#FFDD75
45° 100% 73%

400

#FFCF3D
45° 100% 62%

500

#FFC105
45° 100% 51%

600

#C19510
45° 85% 41%

700

#92710C
45° 85% 31%

800

#634C08
45° 85% 21%

900

#342804
45° 86% 11%

destroy

100

#FFD1D4
356° 100% 91%

200

#FFA3A9
356° 100% 82%

300

#FF757E
356° 100% 73%

400

#FF3D4A
356° 100% 62%

500

#FF0011
356° 100% 50%

600

#C20A16
356° 90% 40%

700

#8E0B14
356° 86% 30%

800

#5C0A10
356° 80% 20%

900

#2D0609
355° 76% 10%

Brand

brand

100

#D0D9EB
220° 40% 87%

200

#A1B3D7
220° 40% 74%

300

#728EC3
219° 40% 61%

400

#4368AF
219° 45% 47%

500

#14429B
220° 77% 34%

600

#10357C
219° 77% 27%

700

#0C285D
219° 77% 21%

800

#081A3E
220° 77% 14%

900

#040D1F
220° 77% 7%

Neutrals

coreNeutrals

50

#F2F2F2
0° 0% 95%

100

#E5E5E5
0° 0% 90%

150

#D9D9D9
0° 0% 85%

200

#CCCCCC
0° 0% 80%

250

#BFBFBF
0° 0% 75%

300

#B2B2B2
0° 0% 70%

350

#A6A6A6
0° 0% 65%

400

#999999
0° 0% 60%

450

#8C8C8C
0° 0% 55%

500

#808080
0° 0% 50%

550

#737373
0° 0% 45%

600

#666666
0° 0% 40%

650

#595959
0° 0% 35%

700

#4D4D4D
0° 0% 30%

750

#404040
0° 0% 25%

800

#333333
0° 0% 20%

850

#262626
0° 0% 15%

900

#1A1A1A
0° 0% 10%

coolNeutrals

50

#F7F9FC
216° 45% 98%

100

#F1F2F6
228° 22% 95%

150

#E9EBF1
225° 22% 93%

200

#E1E4EB
222° 20% 90%

250

#D7DAE3
225° 18% 87%

300

#CACED8
223° 15% 82%

350

#BEC2CD
224° 13% 77%

400

#B1B6C3
223° 13% 73%

450

#A2A8B7
223° 13% 68%

500

#939AAA
222° 12% 62%

550

#838A9B
222° 11% 56%

600

#737A8D
224° 10% 50%

650

#62697D
224° 12% 44%

700

#525A70
224° 15% 38%

750

#434B60
223° 18% 32%

800

#353C51
225° 21% 26%

850

#272D41
226° 25% 20%

900

#1A1F2D
224° 27% 14%

wireframe

100

#F8FBFB
180° 27% 98%

150

#DAEAEC
187° 32% 89%

200

#C0D6D8
185° 24% 80%

300

#A8BCBD
183° 14% 70%

400

#82A0A1
182° 14% 57%

500

#5E7C7D
182° 14% 43%

600

#587374
182° 14% 40%

700

#44595A
183° 14% 31%

800

#2E3D3D
180° 14% 21%

900

#273434
180° 14% 18%

Decorative Colors

red

100

#FAD6DC
350° 78% 91%

200

#F4ACB8
350° 77% 82%

300

#EF8395
350° 77% 73%

400

#E95971
350° 77% 63%

500

#E4304E
350° 77% 54%

600

#B6263E
350° 65% 43%

700

#891D2F
350° 65% 33%

800

#5B131F
350° 65% 22%

900

#2E0A10
350° 64% 11%

orange

100

#FAE2D6
20° 78% 91%

200

#F4C4AC
20° 77% 82%

300

#EFA783
20° 77% 73%

400

#E98959
20° 77% 63%

500

#E46C30
20° 77% 54%

600

#B65626
20° 65% 43%

700

#89411D
20° 65% 33%

800

#5B2B13
20° 65% 22%

900

#2E160A
20° 64% 11%

yellow

100

#FAF4D6
50° 78% 91%

200

#F4E8AC
50° 77% 82%

300

#EFDD83
50° 77% 73%

400

#E9D159
50° 77% 63%

500

#E4C630
50° 77% 54%

600

#B69E26
50° 65% 43%

700

#89771D
50° 65% 33%

800

#5B4F13
50° 65% 22%

900

#2E280A
50° 64% 11%

green

100

#D6FADC
130° 78% 91%

200

#ACF4B8
130° 77% 82%

300

#83EF95
130° 77% 73%

400

#59E971
130° 77% 63%

500

#30E44E
130° 77% 54%

600

#26B63E
130° 65% 43%

700

#1D892F
130° 65% 33%

800

#135B1F
130° 65% 22%

900

#0A2E10
130° 64% 11%

teal

100

#D6FAF4
170° 78% 91%

200

#ACF4E8
170° 77% 82%

300

#83EFDD
170° 77% 73%

400

#59E9D1
170° 77% 63%

500

#30E4C6
170° 77% 54%

600

#26B69E
170° 65% 43%

700

#1D8977
170° 65% 33%

800

#135B4F
170° 65% 22%

900

#0A2E28
170° 64% 11%

cyan

100

#D6EEFA
200° 78% 91%

200

#ACDCF4
200° 77% 82%

300

#83CBEF
200° 77% 73%

400

#59B9E9
200° 77% 63%

500

#30A8E4
200° 77% 54%

600

#2686B6
200° 65% 43%

700

#1D6589
200° 65% 33%

800

#13435B
200° 65% 22%

900

#0A222E
200° 64% 11%

blue

100

#D6E2FA
220° 78% 91%

200

#ACC5F4
219° 77% 82%

300

#83A7EF
220° 77% 73%

400

#598AE9
220° 77% 63%

500

#306DE4
220° 77% 54%

600

#2657B6
220° 65% 43%

700

#1D4189
220° 65% 33%

800

#132C5B
219° 65% 22%

900

#0A162E
220° 64% 11%

violet

100

#DCD6FA
250° 78% 91%

200

#B8ACF4
250° 77% 82%

300

#9583EF
250° 77% 73%

400

#7159E9
250° 77% 63%

500

#4E30E4
250° 77% 54%

600

#3E26B6
250° 65% 43%

700

#2F1D89
250° 65% 33%

800

#1F135B
250° 65% 22%

900

#100A2E
250° 64% 11%

pink

100

#FAD6E8
330° 78% 91%

200

#F4ACD0
330° 77% 82%

300

#EF83B9
330° 77% 73%

400

#E959A1
330° 77% 63%

500

#E4308A
330° 77% 54%

600

#B6266E
330° 65% 43%

700

#891D53
330° 65% 33%

800

#5B1337
330° 65% 22%

900

#2E0A1C
330° 64% 11%

Rainbow

rainbow

50

#F7F9FC
216° 45% 98%

100

#EAEBEE
225° 11% 93%

200

#DEE6F4
218° 50% 91%

300

#E2DEF4
251° 50% 91%

400

#F4DEE9
330° 50% 91%

500

#F4DEDF
357° 50% 91%

600

#F4E6DE
22° 50% 91%

700

#F4F0DE
49° 50% 91%

800

#DEF4E2
131° 50% 91%

900

#DEEDF4
199° 50% 91%