Color Palette Generator
Generate 5-token UI palettes and export OKLCH, HSL Channel, HEX, RGB, LAB, LCH, and more
Build a 5-token UI palette
Start from one hue, preview light and dark tokens, then export modern CSS as OKLCH, HSL Channel, HEX, RGB, LAB, LCH, OKLAB, HWB, or color(srgb).
Base Hue
Palette Style
Preview Mode
Check the same token set against light and dark surfaces.
Palette Tokens
Click a token to copy its OKLCH value.
Generated CSS
OKLCH is the default because it keeps UI palettes more even across lightness changes.
/* Complete CSS color values */
:root {
--primary: oklch(0.9058 0.0278 17.7);
--pre-primary: oklch(0.9533 0.0141 17.4);
--secondary: oklch(0.199 0.0424 21.6);
--tertiary: oklch(0.3391 0.1451 328.2);
--accent: oklch(0.46 0.0959 109.6);
}
.dark {
--primary: oklch(0.2473 0.0607 22.6);
--pre-primary: oklch(0.2974 0.0775 23);
--secondary: oklch(0.8866 0.0348 17.8);
--tertiary: oklch(0.7156 0.2379 327.7);
--accent: oklch(0.9123 0.1764 109.4);
}About Color Palette Generator
Create coordinated 5-token UI palettes for backgrounds, panels, text, highlights, and actions. Start from one base hue, choose a palette style, preview light and dark mode, then export CSS variables as OKLCH, HSL Channel, HEX, RGB, HSL, HWB, LAB, LCH, OKLAB, or color(srgb). OKLCH is the default for modern CSS palettes, while HSL Channel output is available for token systems that use hsl(var(--token)).
Frequently Asked Questions
How does the color palette generator choose colors?
It starts from a base hue and applies coordinated saturation, lightness, tertiary, and accent relationships to create five UI tokens: primary, pre-primary, secondary, tertiary, and accent.
Which color format should I use for modern web projects?
OKLCH is the recommended default for modern CSS because it is more perceptually even when adjusting lightness and chroma. Use HSL Channel when your variables are consumed as hsl(var(--token)).
Which CSS color formats can I export?
You can export OKLCH, HSL Channel, HEX, RGB, HSL, HWB, LAB, LCH, OKLAB, and color(srgb) values from the same generated palette.
Can I preview dark mode before copying CSS?
Yes. The tool generates matching light and dark token sets so you can check the palette before copying the CSS variables.
Try Our Browser Extension
Access essential tools instantly from your browser sidebar. Available for Chrome and Microsoft Edge.