Generate complete design system color palettes from a single primary color using OKLCH color space and multiple generation methods.
Brand color
Type OKLCH or use the sliders. We’ll keep it valid and in sync.
Aa
Format: oklch(L% C H) — L 0–100, C 0–0.4, H 0–360
Generated Palette
A complete color system derived from oklch(49.6% 0.272 303.89)
11 shades
Base Scale
base-50
base-100
base-200
base-300
base-400
base-500
base-600
base-700
base-800
base-900
base-950
Tonal Scale
brand-50
brand-100
brand-200
brand-300
brand-400
brand-500
brand-600
brand-700
brand-800
brand-900
brand-950
Semantic Colors
success
Aa
45.0%
warning
Aa
65.0%
error
Aa
50.0%
info
Aa
45.0%
Charts Colors
chart-1
Aa
72.0%
chart-2
Aa
72.0%
chart-3
Aa
72.0%
chart-4
Aa
72.0%
chart-5
Aa
72.0%
Neutral Colors
neutral-50
Aa
98.0%
neutral-100
Aa
95.0%
neutral-200
Aa
88.0%
neutral-300
Aa
78.0%
neutral-400
Aa
65.0%
neutral-500
Aa
52.0%
neutral-600
Aa
42.0%
neutral-700
Aa
32.0%
neutral-800
Aa
22.0%
neutral-900
Aa
15.0%
neutral-950
Aa
8.0%
Export Design System
Export your generated palettes to different design systems
:root {
--radius: 0.65rem;
--background: oklch(1.000 0.000 0.000);
--foreground: oklch(0.150 0.008 303.890);
--card: oklch(1.000 0.000 0.000);
--card-foreground: oklch(0.150 0.008 303.890);
...