How it works
Enter your primary hex color and this tool generates a full 50-950 scale suitable for design systems. You can use the generated values in Tailwind themes, CSS variables, or SCSS maps.
How to Use a Tailwind Color Palette Generator
Pick a base color, review the generated scale, then export the palette into your Tailwind config to keep UI colors consistent across components.
Generate CSS Variables from a Single Brand Color
Convert one input hue into structured color tokens you can reuse in CSS and SCSS for scalable theming.
FAQ
What do shades 50 to 950 represent?
They represent a light-to-dark progression used in modern design systems for backgrounds, text, and accents.
Can I export colors for Tailwind, CSS, and SCSS?
Yes. The generated palette is designed for direct use in Tailwind configs, CSS variables, and SCSS maps.
How do I pick an accessible palette?
Use strong contrast between foreground and background shades, especially for body text and interactive states.