Palette Generator

Generate Tailwind-style color scales from any color using OKLCH. 

  
 
 
  
 
How OKLCH color scales work
 

This generator builds a Tailwind-style 50–950 scale from a
        single base color. Instead of hand-picking eleven shades, it holds
        hue and chroma roughly constant and walks lightness from bright (50)
        to near-black (950), so every step reads as a natural progression:

 
     
  • Hue remains constant throughout the scale
    •  
  • Lightness varies from ~0.97 (lightest) to ~0.15 (darkest)
    •  
  • Chroma scales proportionally, peaking at your base color
    •  
 

Doing this in OKLCH instead of HSL is what keeps the steps looking
        even. HSL's lightness channel is not perceptually uniform, so
        palettes generated by walking HSL lightness tend to bunch several
        dark steps together while leaving visible gaps near the middle.
        OKLCH's lightness tracks perceived brightness directly, so each step
        looks like a consistent jump from the last.

 

Contrast ratio matters as much as visual evenness — check
        which steps are safe to use as text or background pairs before you
        ship a scale, not after. WCAG 2.1 requires 4.5:1 for normal text and
        3:1 for large text.

 
FAQ
 
 
 
How do I choose a base color?
 
Pick the color you want to sit around the middle of the scale (roughly the 500 step) — usually your brand or primary accent color. The generator derives every lighter and darker step from its hue and chroma.
 
 
What contrast ratio do I need for WCAG?
 
WCAG 2.1 requires at least 4.5:1 for normal text and 3:1 for large text to meet the AA level. Aim for 7:1 if you need the stricter AAA level.
 
 
Can I use these scales with Tailwind?
 
Yes — copy the CSS Variables output straight into your global stylesheet, or paste the Tailwind Config tab into your tailwind.config.js under theme.extend.colors to register the scale as utility classes.
 
 
Why do the steps look more even than HSL-generated palettes?
 
HSL's lightness value doesn't correspond to perceived brightness in a straight line, so equal HSL steps can look bunched at one end of a scale and stretched at the other. OKLCH's lightness channel is built to match human perception, so equal steps in L actually look equally spaced.