Primary Swatches
Use for defining layout and branded elements
Copied!
Plum 500
#7740bfRGB: 119/64/191HSL: 266/50/50Copied!
Grass 500
#4db35eRGB: 77/179/94HSL: 130/40/50Copied!
Berry 500
#d22da3RGB: 210/45/163HSL: 317/65/50Copied!
Turquoise 500
#4daeb3RGB: 77/174/179HSL: 183/40/50Functional Swatches
Use only for functional feedback and charts/graphs
Copied!
Tomato 500
#d22d2dRGB: 210/45/45HSL: 0/65/50Copied!
Orange 500
#ed6212RGB: 237/98/18HSL: 22/86/50Copied!
Lemon 500
#e6ac19RGB: 230/172/25HSL: 43/80/50Copied!
Sky 500
#3382ccRGB: 51/130/204HSL: 209/60/50Neutral Swatches
Use for backgrounds, texts, and other neutral contexts
Copied!
Cool Gray 500
#71768eRGB: 113/118/142HSL: 230/11/50Copied!
Neutral Gray 500
#808080RGB: 128/128/128HSL: 0/0/50Lightness Variants
T indicates that it passes WCAG AA and thus can be used as text color on white background.
Plum
900#180d26
800#30194d
700#472673
600#5f3399
500#7740bf
400#9266cc
300#ad8cd9
200#c9b3e5
100#e4d9f2
50#f1ecf9
25#f7f4fb
Berry
900#2a0921
800#541241
700#7e1b62
600#a82483
500#d22da3
400#db57b6
300#e481c8
200#edabda
100#f6d5ed
50#fbeaf6
25#fdf7fb
Grass
900#0f2413
800#1f4725
700#2e6b38
600#3d8f4b
500#4db35e
400#70c27e
300#94d19e
200#b8e0be
100#dbf0df
50#edf7ef
25#f8fcf9
Turquoise
900#0f2324
800#1e4547
700#2e686c
600#3d898f
500#4daeb3
400#70bec2
300#94ced1
200#b8dee0
100#dbeff0
50#edf7f7
25#f8fcfc
Tomato
900#2a0909
800#541212
700#7e1b1b
600#a82424
500#d22d2d
400#db5757
300#e48181
200#edabab
100#f6d5d5
50#fbeaea
25#fdf7f7
Orange
900#2f1404
800#5f2707
700#8e3b0b
600#be4f0e
500#ed6212
400#f18241
300#f4a171
200#f8c0a0
100#fbe0d0
50#fdefe7
25#fef9f6
Lemon
900#2e2205
800#5c450a
700#8a670f
600#b88914
500#e6ac19
400#ebbc47
300#f0cd75
200#f5dea3
100#faeed1
50#fcf7e8
25#fefcf6
Sky
900#0a1a29
800#143452
700#1f4f7a
600#2968a3
500#3382cc
400#5c9bd6
300#85b4e0
200#adcdeb
100#d6e6f5
50#ebf3fa
25#f7fafd
Cool Gray
900#14113b
800#2a274b
700#444755
600#5b5f71
500#71768e
400#8e92a4
300#aaadbb
200#c6c8d2
100#e3e4e8
50#f1f1f4
25#f9fafa
Neutral Gray
900#1a1a1a
800#333333
700#4d4d4d
600#666666
500#808080
400#999999
300#b2b2b2
200#cccccc
100#e5e5e5
50#f2f2f2
25#fafafa