Why generating palettes is an art
A "UI color palette" isn't just picking colors you like. It's a structured system with defined relationships — a primary scale with 10+ lightness steps, semantic colors for status, neutral surfaces for backgrounds, and foreground content colors chosen for accessibility. Done well, it supports every UI state and component automatically.
Start with a single brand hue
The most practical approach: start with one key hue and build outward. Your brand color might be defined as a HEX — convert it to OKLCH first:
Primary brand: #7c3aed
Convert: oklch(0.53 0.28 291)Now you have three numbers to work with: L (lightness), C (chroma), H (hue angle).
Building a lightness scale
A complete color scale has ~10 shades from very light (50) to very dark (950). In OKLCH, generate each step by keeping H and C roughly stable and varying L:
- 50: L ≈ 0.97 — barely tinted white, for hover backgrounds
- 100: L ≈ 0.93
- 200: L ≈ 0.87
- 300: L ≈ 0.78
- 400: L ≈ 0.68
- 500: L ≈ 0.58 — often the "brand" color itself
- 600: L ≈ 0.50
- 700: L ≈ 0.42 — for hover states on colored buttons
- 800: L ≈ 0.32
- 900: L ≈ 0.22
- 950: L ≈ 0.14 — near-black tinted version
Note: reduce chroma slightly at the extremes (very light and very dark) to avoid overly vivid off-white or near-black tints.
Generating secondary and accent palettes
Use color harmony to derive additional palettes:
- Complementary: H + 180° (direct visual opposite)
- Triadic secondary: H + 120°
- Analogous: H ± 30–50° (closest to primary, cohesive)
- Accent (vivid pop): highest-chroma hue that contrasts well
Neutral scale
Most of your UI surface area uses neutrals — backgrounds, cards, borders, dividers, labels. Build a 10-step neutral scale:
- Pure neutral: zero chroma (C=0), varying L from 0.98 to 0.05
- Warm neutral: add small H tint (e.g., yellow/orange H=60, C=0.01–0.02)
- Cool neutral: slight blue hue (H=240, C=0.01–0.02)
Slightly tinted neutrals feel more premium than pure gray neutrals.
Semantic color system
Every UI needs semantic status colors. Keep them recognizable but match your brand's mood:
- Error: red family (H ≈ 5–25°), C ≈ 0.20–0.35
- Warning: amber/orange (H ≈ 45–70°), C ≈ 0.18–0.32
- Success: green (H ≈ 120–145°), C ≈ 0.15–0.25
- Info: blue (H ≈ 210–240°), C ≈ 0.14–0.24
Content (foreground) colors
Every background color needs a foreground counterpart chosen for accessibility (WCAG AA minimum: 4.5:1 contrast). The algorithm:
- Try pure white against the background — if contrast ≥ 4.5:1, use it.
- Try pure black — if contrast ≥ 4.5:1, use it.
- If neither satisfies, walk toward the higher-contrast option until the ratio is met.
Generate palettes automatically with LiveTheme
LiveTheme's free theme editor automates the entire process. Hit the Randomize button to generate a complete, harmonically-coherent, contrast-checked palette instantly — then refine individual colors as needed. Export the result as DaisyUI, TailwindCSS, shadcn/ui, or raw CSS variables.