How do I generate a Tailwind 50-950 palette from one color?
Generate a Tailwind 50-950 palette from a single base color, using OKLCH for a perceptually-uniform lightness scale.
Standard generators do this in HSL which gives "300 looks identical to 400". We use OKLCH = readable steps that match Tailwind v3 / v4.
Pick your "anchor" - which step your original color sits at (typically 500). Export as CSS variables or a Tailwind config snippet.
How to use it
- Pick a base color: HEX (e.g. #3b82f6), native picker, screen eyedropper (Chrome/Edge), or one of 6 brand presets.
- Pick an "anchor" - which Tailwind step your original color should land on. Default 500. For very light colors choose 200, for very dark 800. The anchor is marked with a star (★).
- On the right you see the full 50-950 scale. Each swatch is clickable - copies HEX. 50-200 for "backgrounds and subtle borders", 300-500 for "main interactive states", 600-950 for "text and accents".
- "Contrast preview" shows the contrast ratio of each swatch with white text (A) and black text (A). Helps you decide which steps work for buttons.
- Two exports: CSS variables (drop into globals.css) or a ready Tailwind config snippet (drop into tailwind.config.js).
When this is useful
Where the Tailwind palette generator helps - typical scenarios:
- Brand book → Tailwind - you have a brand color (e.g. #3b82f6 indigo) and need a full scale for design. The generator builds 50, 100, ..., 950 following the Tailwind convention.
- Dark mode - in Tailwind v4 an OKLCH palette means inverting the scale (50 ↔ 950, 100 ↔ 900) gives a sensible dark mode.
- Design system - full palette for N brand colors + 1 grayscale = a complete system.
- HSL → OKLCH migration - an old HSL project to migrate to OKLCH - the generator shows what Tailwind v4 would produce from your brand color.
- Education - compare our OKLCH-based swatches to Tailwind v3 official defaults - they're very close, because Tailwind also uses OKLCH since 2024.
Need to dial in the base color first? Use the color converter to grab HEX / OKLCH. Picking accent and neutral pairs is easier in the color harmony tool, and run final text/background combinations through the contrast checker before shipping.
Questions and answers
HSL has perceptual non-uniformity - L=50% in blue looks much darker than L=50% in yellow. An HSL generator gives a scale where 300 and 400 look identical. OKLCH (Oklab Lightness/Chroma/Hue, 2020) has equal perceptual steps - 300 is visibly lighter than 400. Tailwind v4 and Radix Colors use OKLCH for exactly this reason.