How color palettes are generated
A color palette is a curated set of colors that work together harmoniously. This tool generates a complete design system palette from a single seed color, using the OKLCH color space for perceptually uniform results.
OKLCH (OK Lightness Chroma Hue) is a modern color space where equal steps in lightness look equally bright to humans. This makes it ideal for generating shade scales — from light tints to dark shades — that feel natural and consistent.
The palette includes harmonies (complementary, analogous, triadic, etc.) based on color theory, plus a ready-to-use Tailwind CSS config block. Everything runs entirely in your browser — no data is sent to any server.
Color spaces
Standard web color notation — #3b82f6. Compact and widely supported.
Red, Green, Blue channels — rgb(59, 130, 264). The additive model screens use.
Hue, Saturation, Lightness — hsl(217, 92%, 60%). Intuitive for human editing.
Perceptually uniform — oklch(0.628 0.258 255). Equal steps look equal.
Where developers use it
Design systems
Generate a complete color token set from your brand color — primary, neutral, and accent scales.
Tailwind projects
Copy a ready-to-paste config block directly into your tailwind.config.js.
Accessibility testing
Explore shade variations to find combinations that meet WCAG contrast ratios.
Frequently asked questions
OKLCH (OK Lightness Chroma Hue) — a perceptually uniform color space where equal lightness steps look equally bright to humans.
Yes. The Tailwind tab generates a ready-to-paste config block for your tailwind.config.js.
Yes. All color processing happens in your browser — no data is sent to any server.
HEX (#3b82f6), RGB (rgb(59, 130, 246)), HSL (hsl(217, 92%, 60%)), and OKLCH (oklch(0.628 0.258 255)).