Command Menu

Search documentation, components, and switch theme.

Getting Started

Colors

Brand Palettes#

Five brand color palettes defined in OKLCh color space for perceptual uniformity. Tints, the base value, and darker shades are shown alongside their HEX, RGB, CMYK, and OKLCh representations.

100
HEX
EBF0F0
RGB
235 ¦ 240 ¦ 240
OKLCH
0.9503 0.0053 197.07
100
HEX
F6F6FE
RGB
246 ¦ 246 ¦ 254
OKLCH
0.9747 0.0111 286.19
100
HEX
E2DED5
RGB
226 ¦ 222 ¦ 213
OKLCH
0.9007 0.0128 87.49
100
HEX
DAE7F1
RGB
218 ¦ 231 ¦ 241
OKLCH
0.922 0.0198 238.67
100
HEX
EFFBF0
RGB
239 ¦ 251 ¦ 240
OKLCH
0.9753 0.0181 148.38
200
HEX
DEE7E7
RGB
222 ¦ 231 ¦ 231
OKLCH
0.9225 0.0096 196.99
200
HEX
ECEBFF
RGB
236 ¦ 235 ¦ 255
OKLCH
0.9457 0.0274 288.16
200
HEX
C8C2B1
RGB
200 ¦ 194 ¦ 177
OKLCH
0.8142 0.0237 90.31
200
HEX
D9E8F2
RGB
217 ¦ 232 ¦ 242
OKLCH
0.9219 0.0207 238.68
200
HEX
E3F7E4
RGB
227 ¦ 247 ¦ 228
OKLCH
0.9567 0.0328 146.71
300
HEX
D5E1E1
RGB
213 ¦ 225 ¦ 225
OKLCH
0.9001 0.0122 202.07
300
HEX
E1E0FF
RGB
225 ¦ 224 ¦ 255
OKLCH
0.9181 0.0414 287.08
300
HEX
B1A791
RGB
177 ¦ 167 ¦ 145
OKLCH
0.7306 0.0333 87.57
300
HEX
8BB5D5
RGB
139 ¦ 181 ¦ 213
OKLCH
0.7538 0.0649 241.62
300
HEX
D4F2D5
RGB
212 ¦ 242 ¦ 213
OKLCH
0.931 0.0485 146.07
400
HEX
B7C6C8
RGB
183 ¦ 198 ¦ 200
OKLCH
0.8164 0.017 202
400
HEX
D8D6FF
RGB
216 ¦ 214 ¦ 255
OKLCH
0.8913 0.0558 287.5
400
HEX
978B6D
RGB
151 ¦ 139 ¦ 109
OKLCH
0.6401 0.0455 89
400
HEX
649DC9
RGB
100 ¦ 157 ¦ 201
OKLCH
0.6744 0.0881 242.61
400
HEX
C8EECA
RGB
200 ¦ 238 ¦ 202
OKLCH
0.913 0.0631 145.92
500
HEX
7A9394
RGB
122 ¦ 147 ¦ 148
OKLCH
0.6433 0.028 201.8
500
HEX
CECCFF
RGB
206 ¦ 204 ¦ 255
OKLCH
0.8635 0.070365 286.3527
500
HEX
7D6F4A
RGB
125 ¦ 111 ¦ 74
OKLCH
0.5448 0.0561 88.83
500
HEX
397AAC
RGB
57 ¦ 122 ¦ 172
OKLCH
0.5609 0.102 244.23
500
HEX
B9E9BA
RGB
185 ¦ 233 ¦ 186
OKLCH
0.889 0.0812 145.7
600
HEX
426367
RGB
66 ¦ 99 ¦ 103
OKLCH
0.4754 0.039 204.7
600
HEX
A7A4DB
RGB
167 ¦ 164 ¦ 219
OKLCH
0.7401 0.0786 286.6
600
HEX
64583A
RGB
100 ¦ 88 ¦ 58
OKLCH
0.4637 0.046541 88.8573
600
HEX
326A95
RGB
50 ¦ 106 ¦ 149
OKLCH
0.5065 0.0908 244.14
600
HEX
97C39A
RGB
151 ¦ 195 ¦ 154
OKLCH
0.7756 0.0752 146.09
700
HEX
01353C
RGB
1 ¦ 53 ¦ 60
OKLCH
0.3026 0.0516 208.89
700
HEX
7A78B5
RGB
122 ¦ 120 ¦ 181
OKLCH
0.5996 0.0915 284.81
700
HEX
4E442D
RGB
78 ¦ 68 ¦ 45
OKLCH
0.3909 0.0391 88.86
700
HEX
264F6E
RGB
38 ¦ 79 ¦ 110
OKLCH
0.4121 0.0702 243.8
700
HEX
749A76
RGB
116 ¦ 154 ¦ 118
OKLCH
0.6486 0.0683 146
800
HEX
01282D
RGB
1 ¦ 40 ¦ 45
OKLCH
0.253 0.0427 208.02
800
HEX
545190
RGB
84 ¦ 81 ¦ 144
OKLCH
0.467 0.1001 284.09
800
HEX
332D1F
RGB
51 ¦ 45 ¦ 31
OKLCH
0.2989 0.0257 87.46
800
HEX
19364C
RGB
25 ¦ 54 ¦ 76
OKLCH
0.323 0.052736 243.5648
800
HEX
527553
RGB
82 ¦ 117 ¦ 83
OKLCH
0.5265 0.0674 145.34
900
HEX
00171A
RGB
0 ¦ 23 ¦ 26
OKLCH
0.1879 0.032 202.57
900
HEX
2B296B
RGB
43 ¦ 41 ¦ 107
OKLCH
0.3246 0.1125 279.57
900
HEX
19160F
RGB
25 ¦ 22 ¦ 15
OKLCH
0.2032 0.014347 87.5361
900
HEX
0D1C26
RGB
13 ¦ 28 ¦ 38
OKLCH
0.2168 0.0283 240.87
900
HEX
2E4D2F
RGB
46 ¦ 77 ¦ 47
OKLCH
0.3855 0.061437 145.0161

Main Variants#

The default tone for each palette — used as the primary brand color in product surfaces, marketing, and components.

Emerald · 700
PMS
547 C 5463 U
HEX
01353C
RGB
1 ¦ 53 ¦ 60
CMYK
98 ¦ 12 ¦ 0 ¦ 76
OKLCH
0.3026 0.0516 208.89
Lilac · 500
PMS
6085 C 6085 U
HEX
CECCFF
RGB
206 ¦ 204 ¦ 255
CMYK
19 ¦ 20 ¦ 0 ¦ 0
OKLCH
0.8635 0.070365 286.3527
Gold · 500
PMS
4243 C 4485 U
HEX
7D6F4A
RGB
125 ¦ 111 ¦ 74
CMYK
0 ¦ 11 ¦ 41 ¦ 51
OKLCH
0.5448 0.0561 88.83
Cobalt · 500
PMS
2150 C 6125 U
HEX
397AAC
RGB
57 ¦ 122 ¦ 172
CMYK
67 ¦ 29 ¦ 0 ¦ 33
OKLCH
0.5609 0.102 244.23
Mint · 500
PMS
2253 C 2254 U
HEX
B9E9BA
RGB
185 ¦ 233 ¦ 186
CMYK
21 ¦ 0 ¦ 20 ¦ 9
OKLCH
0.889 0.0812 145.7
Slate
PMS
7541 C 642 U
HEX
D5E1E1
RGB
213 ¦ 225 ¦ 225
CMYK
5 ¦ 0 ¦ 0 ¦ 12
OKLCH
0.9001 0.0122 202.07

UI Tokens#

Core UI tokens that adapt between light and dark themes.

background
foreground
primary
secondary
muted
accent
card
popover
border
input
ring