How to Use the Tailwind CSS 50-950 Color Palette Generator
-
1
Enter your primary brand color (HEX) or choose one from the color picker.
-
2
The tool automatically anchors your color at step 500 (or 600) and calculates the full 11-step scale (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950).
-
3
Click any swatch to copy its individual HEX value.
-
4
Click "Copy tailwind.config.js" to paste the exact theme configuration object into your project.
Practical Example & Use Case
Common Real-World Scenario
Generating a custom "brand" color ramp for Tailwind CSS from #6366f1 to use classes like bg-brand-50, text-brand-600, and border-brand-200.
Technical Notes & Limitations
Browser Engine Architecture
Generates perception-corrected lightness and saturation adjustments matching standard Tailwind CSS palette curves.
Frequently Asked Questions
How do I use this output in my Tailwind project?
Paste the generated configuration object into the `theme.extend.colors` section of your `tailwind.config.js` file.