What Is the Tailwind Color Scale Generator?
This Tailwind color scale generator creates production-ready 50–900 or 100–950 color ramps from a single base color using the OKLCH color space. Unlike HSL-based tools, OKLCH produces perceptually uniform steps—meaning each shade in the scale looks evenly spaced to the human eye. The result is a professional tailwind color palette generator output you can drop straight into your project's theme configuration, CSS custom properties, or design tokens pipeline.
How to Use This Tool
- Enter a base color — paste a HEX code, type an RGB or HSL value, or pick a color from the interactive input. Choose a preset to get started quickly.
- Select your scale range — pick 50–900 for a classic nine-step Tailwind ramp or 100–950 for the extended eleven-step format introduced in Tailwind CSS v4.
- Tune the algorithm — choose between a pure OKLCH Lightness Ramp or OKLCH + Chroma Easing to shape saturation across the scale. Enable Hue Lock for strict brand fidelity or dial in a Hue Bend for warmer highlights and cooler shadows.
- Review accessibility — each swatch displays WCAG AA guidance for light and dark text. Verify critical pairings in the contrast checker before shipping.
- Export — copy the output as a Tailwind config object, CSS variables, or JSON and integrate it directly into your codebase.
Why Use an OKLCH Color Scale for Tailwind?
Tailwind CSS ships a carefully hand-tuned palette, but custom brand colors still need consistent shade ramps. Generating these manually in HSL often leads to muddy mid-tones and blown-out extremes because HSL lightness is not perceptually uniform. An OKLCH color scale solves this: equal numeric increments translate to equal visual differences, so your 400→500→600 transition looks as even as 700→800→900.
This matters most when building Tailwind CSS custom colors for design systems where multiple teams need predictable, accessible token scales. The generator also flags out-of-gamut colors and maps them to the nearest sRGB-safe value—an essential check you can explore further with the OKLCH gamut checker.
Integrating Your Scale into Tailwind CSS
Once you've generated a scale, integration depends on your Tailwind version. In v4, paste the exported CSS variables inside a @theme block in your main stylesheet. In v3, add the generated object to theme.extend.colors in your tailwind.config.js file. Either way, your new utilities—like bg-brand-500 or text-brand-700—are immediately available across your markup. The Tailwind v4 release notes cover the CSS-first configuration approach in full.
For a complete workflow, start from an image with the palette extractor, convert values with the color converter, and then scale your chosen base here.
Tips for Better Scales
- Pick a base with mid-range lightness (approximately 0.55–0.70 L in OKLCH) for a balanced 500 step.
- Keep chroma between 0.08 and 0.18 for professional UI palettes; higher values may clip outside sRGB.
- Test your 500, 600, and 700 steps on both white and dark backgrounds to confirm WCAG 2.2 minimum contrast requirements.
- Use the color comparison tool to measure ΔE between your generated shades and existing brand tokens.