Tailwind CSS Color Generator
Generate perfect Tailwind CSS color scales (50-950 shades) from any hex code using advanced OKLCH color science
Browse Popular PalettesClick "Apply Theme" to see your color across the entire interface
Generated Palette: Blue Family
Saved Swatches
Click the heart icon on any shade to save it here!
Build your own custom color collection
About this Tailwind Blue 400 Palette
This Tailwind CSS 'Tailwind Blue 400' color scale is generated based on the hex code #51A2FF. Built using the advanced OKLCH color space, this 11-step palette (spanning from shade 50 to 950) ensures perceptual uniformity, making it ideal for consistent UI design and WCAG-compliant text contrast.
Unlock Professional Color Tools
- ✦Recolor SVG icons & illustrations — apply any Tailwind palette to your vector assets in seconds
- ✦Brand color matching — Shuffle SVG colors to match your exact brand palette
- ✦Export clean SVG — download production-ready, optimized files for Figma, web & apps
How to Use the Tailwind Color Generator
Choose Base Color
Pick any hex code or use our random generator. Our tool uses this as the reference point.
Generate 50-950 Shades
Our algorithm instantly creates a perfectly balanced 11-step scale using the OKLCH color space.
Export to Tailwind
Copy the CSS variables or the full config object directly into your tailwind.config.js file.
Why Our Generator?
Scientific OKLCH Palettes
Unlike RGB generators, we use perceptually uniform OKLCH space to ensure every shade from 50 to 950 is visually consistent.
Tailwind Config Export
Get ready-to-paste code for your tailwind.config.js. We support both CSS variables and direct hex values.
WCAG Accessibility
We automatically calculate contrast ratios for every shade, ensuring your text is readable on any background color.
Deep Color Analysis
Visualize the luminance and chroma curves of your palette to understand exactly how your colors behave.
Frequently Asked Questions
© 2026 Grafeum. Built for the modern web.