Color Palette Generator
Pick a base color, choose a harmony, and get a palette generated in OKLCH so every swatch stays perceptually balanced. Click a swatch to copy HEX, right-click for CSS.
:root {
}How to create a color palette
Start with the color you already own — usually a brand color. Choose analogous for calm, closely related schemes, complementary when you need one loud accent against a dominant hue, and triadic or tetradic when a product needs several distinguishable categorical colors (charts, tags, statuses).
Then check the numbers under each swatch. Every swatch reports its contrast against both white and black, so you can immediately tell whether a color can hold text or should stay decorative.
OKLCH vs HSL for palettes
In HSL, rotating the hue channel changes perceived brightness dramatically — yellows jump forward, blues sink back. OKLCH separates lightness (L), colorfulness (C) and hue (H) in a way that matches human vision, so a harmony rotation produces swatches that genuinely feel like siblings. Values are clamped back into sRGB where required, so nothing you copy renders as an unexpected flat color.
Exporting the palette
The CSS block below is ready to paste. Each color is emitted as an oklch() custom property with the HEX fallback in a comment, which is the easiest way to migrate an existing codebase gradually.
Frequently asked questions
- What is a color palette generator?
- It takes one base color and derives a set of related colors using color-harmony rules such as complementary, analogous or triadic relationships, then shows copy-ready CSS values for each result.
- Why generate palettes in OKLCH instead of HSL?
- OKLCH is perceptually uniform, so rotating hue keeps the perceived lightness of every swatch consistent. In HSL, a hue rotation can make one swatch look much brighter than the rest even though the numbers match.
- How many colors should a UI palette have?
- Most interfaces need one brand hue, one neutral ramp and three feedback hues (success, warning, danger). Five to six base colors is plenty; depth comes from ramps rather than more hues.
- Can I lock colors and regenerate the rest?
- Yes. Lock any swatch and press regenerate or the spacebar-free Regenerate button; locked swatches are preserved while the others are re-derived from a new base color.
Related tools
Turn one color into a 50–950 ramp, export as CSS variables, JSON or Tailwind theme.
Primary, neutral, success, warning, danger ramps plus semantic light/dark tokens.
WCAG ratios plus perceptual OKLCH repair suggestions when a pair fails.