Our color system uses LCH color space for perceptually uniform shades. Each color has 15 shades from lightest (25) to darkest (1000).
Core Palette
This is the reference palette — raw color values used when defining semantic tokens. These shades should not be used directly in components.
To support theme switching (light/dark modes), always use semantic variables instead. The semantic palette maps these core shades to meaningful roles (foreground, background, borders, etc.) that automatically adapt to the active theme.
Click any swatch to copy its value.
gray
lch(99% 0 272)
lch(97% 0 272)
lch(92% 1 272)
lch(87% 1 272)
lch(84% 3.5 272)
lch(79% 6 272)
lch(76% 6.5 272)
lch(65% 6 272)
lch(57% 5.5 273)
lch(47% 6 275)
lch(33% 9 278)
lch(24.5% 9 278)
lch(16% 6 280)
lch(9% 1.8 280)
lch(7.5% 1 280)
red
lch(98% 3 10)
lch(96% 7 12)
lch(93% 12 16)
lch(88% 22 20)
lch(82% 35 20)
lch(78% 40 20)
lch(72% 51.5 25)
lch(67% 70 30)
lch(61% 78 32)
lch(48% 76 32)
lch(45% 68 31)
lch(35% 44 25)
lch(20% 30 22)
lch(16% 16 15)
lch(8% 5 360)
orange
lch(98.5% 3 70)
lch(96% 11 68)
lch(93% 16 65)
lch(89% 26 62)
lch(84% 38 58)
lch(78% 55 55)
lch(72% 75 53)
lch(67% 100 52)
lch(58% 90 52)
lch(49% 80 52)
lch(41% 70 51)
lch(32% 46 48)
lch(23% 34 48)
lch(16% 18 55)
lch(10% 5 55)
yellow
lch(99% 9 98)
lch(96% 38 95)
lch(93% 45 92)
lch(89% 62 88)
lch(84% 80 82)
lch(77% 100 76)
lch(72% 95 70)
lch(65% 85 66)
lch(58% 75 63)
lch(49% 62 60)
lch(41% 48 58)
lch(32% 35 57)
lch(23% 24 58)
lch(16% 13 60)
lch(10% 2 60)
brown
lch(98% 3 38)
lch(96% 7 38)
lch(93% 13 38)
lch(89% 22 38)
lch(84% 33 38)
lch(78% 48 38)
lch(72% 58 38)
lch(65% 52 38)
lch(56% 46 38)
lch(49% 40 38)
lch(41% 34 38)
lch(32% 28 38)
lch(23% 20 38)
lch(16% 12 40)
lch(10% 3 50)
lime
lch(99% 10 120)
lch(98% 23 120)
lch(96% 30 120)
lch(90% 50 120)
lch(84% 60 122)
lch(78% 71.5 120)
lch(72% 80 120)
lch(65% 85 123)
lch(56% 78 125)
lch(50% 68 125)
lch(41% 56 125)
lch(32% 44 125)
lch(23% 28 128)
lch(17% 16 128)
lch(10% 5 130)
forest
lch(99% 6 150)
lch(96% 20 150)
lch(93% 35 150)
lch(89% 50 150)
lch(81% 60 150)
lch(78% 72 150)
lch(72% 80 150)
lch(65% 78 150)
lch(56% 75 150)
lch(50% 70 150)
lch(41% 60 150)
lch(29% 42 150)
lch(19% 26 152)
lch(16% 18 158)
lch(10% 6 160)
mint
lch(99% 5 165)
lch(96% 17 165)
lch(93% 16 166)
lch(89% 27 167)
lch(84% 55 165)
lch(78% 64 165)
lch(72% 72 165)
lch(65% 68 165)
lch(56% 62 165)
lch(49% 55 165)
lch(41% 46 165)
lch(32% 36 165)
lch(23% 26 165)
lch(16% 15 165)
lch(10% 4 165)
cyan
lch(99% 5 195)
lch(97% 15 195)
lch(94% 10 196)
lch(89% 21 195)
lch(84% 50 195)
lch(78% 62 195)
lch(72% 58 195)
lch(65% 53 195)
lch(56% 47 195)
lch(48% 42 195)
lch(41% 37 195)
lch(32% 31 195)
lch(18% 15 195)
lch(16% 14 195)
lch(10% 4 210)
blue
lch(98% 3 240)
lch(97% 5 240)
lch(95% 8 243)
lch(91% 13 255)
lch(86% 21 255)
lch(78% 37 253)
lch(72% 47 255)
lch(67% 56 255)
lch(60% 61 255)
lch(48% 51 255)
lch(41% 46 255)
lch(32% 38 255)
lch(20% 26 252)
lch(15% 18 250)
lch(11% 6 262)
indigo
lch(98% 3 280)
lch(96% 6 280)
lch(93% 11 280)
lch(91% 14 286)
lch(87% 18 284)
lch(78% 36 280)
lch(72% 47 280)
lch(64% 60 280)
lch(51% 77.5 280)
lch(47% 80 280)
lch(41% 72 280)
lch(32% 60 280)
lch(19% 26 266)
lch(14% 18 264)
lch(10% 5 270)
violet
lch(98% 3 290)
lch(97% 5 290)
lch(93% 10 295)
lch(90% 15 295)
lch(84% 27 290)
lch(78% 38 290)
lch(72% 49 290)
lch(65% 61 290)
lch(56% 77 290)
lch(49% 90 290)
lch(41% 78 290)
lch(32% 62 290)
lch(23% 48 290)
lch(16% 26 288)
lch(10% 5 285)
purple
lch(98% 5 320)
lch(96% 10 320)
lch(93% 17 320)
lch(89% 27 320)
lch(84% 40 320)
lch(78% 55 320)
lch(72% 71 320)
lch(65% 89 320)
lch(58% 95 320)
lch(48% 85 320)
lch(41% 68 320)
lch(32% 52 320)
lch(23% 35 320)
lch(16% 18 320)
lch(10% 4 320)
pink
lch(98% 4 350)
lch(96% 8 350)
lch(93% 14 350)
lch(89% 23 350)
lch(84% 34 350)
lch(78% 49 350)
lch(72% 64 350)
lch(65% 69.5 350)
lch(58% 70 350)
lch(50% 66.5 350)
lch(41% 62 350)
lch(32% 48 350)
lch(23% 32 350)
lch(16% 18 350)
lch(10% 4 350)
