Palette

OKLCH scale or a harmony. Copy CSS variables and @theme.

Base

Mode

Steps

Variant

Token prefix

CSS

--color-brand-50: oklch(97% 0.02472 216); --color-brand-100: oklch(94.138% 0.04871 216); --color-brand-200: oklch(88.905% 0.08731 216); --color-brand-300: oklch(82.128% 0.0977 216); --color-brand-400: oklch(74.103% 0.10745 216); --color-brand-500: oklch(65% 0.11514 216); --color-brand-600: oklch(60.975% 0.1174 216); --color-brand-700: oklch(53.616% 0.11972 216); --color-brand-800: oklch(44.086% 0.10404 216); --color-brand-900: oklch(32.801% 0.07741 216); --color-brand-950: oklch(20% 0.0472 216);

@theme

@theme { --color-brand-50: oklch(97% 0.02472 216); --color-brand-100: oklch(94.138% 0.04871 216); --color-brand-200: oklch(88.905% 0.08731 216); --color-brand-300: oklch(82.128% 0.0977 216); --color-brand-400: oklch(74.103% 0.10745 216); --color-brand-500: oklch(65% 0.11514 216); --color-brand-600: oklch(60.975% 0.1174 216); --color-brand-700: oklch(53.616% 0.11972 216); --color-brand-800: oklch(44.086% 0.10404 216); --color-brand-900: oklch(32.801% 0.07741 216); --color-brand-950: oklch(20% 0.0472 216); }

Search tools