Color Shades Generator
Generate a complete 11-shade palette (50–950) from any hex color. Copy individual shades or the full Tailwind config.
Base HSL: hsl(239, 84%, 67%)
Tailwind Config Output
const colors = {
primary: {
50: '#f4f4fb',
100: '#e9e9f7',
200: '#d0d0f1',
300: '#a8a9eb',
400: '#7375e7',
500: '#6366f1',
600: '#393df3',
700: '#0e11ec',
800: '#1518b2',
900: '#181981',
950: '#161764',
},
};Frequently Asked Questions
How are the shades calculated?
Your input color is used as the 500 anchor shade. The tool converts it to HSL, then generates lighter shades (50–400) by increasing lightness and adjusting saturation upward, and darker shades (600–950) by decreasing lightness and slightly adjusting saturation. The hue stays constant across all shades.
How do I use these shades in Tailwind CSS?
Click 'Copy as Tailwind Config' to get a ready-to-paste JavaScript object. In your tailwind.config.js or tailwind.config.ts, add the object inside the `theme.extend.colors` section. Then use classes like `bg-primary-500` or `text-primary-100` in your HTML.
What is the 500 shade?
The 500 shade is the base color — the exact hex value you entered. All other shades are derived from it. In Tailwind's default palette, the 500 shade is typically the 'default' tone of a color (e.g., blue-500 is a mid-tone blue).
Can I customize the shade algorithm?
This tool uses a fixed algorithm inspired by Tailwind's color palette generation. For advanced customization, you can copy the hex values and manually adjust them in a design tool like Figma or use a dedicated palette tool like Radix Colors or Paletter.
What is the best base color to start with?
Mid-tone colors with moderate saturation (lightness roughly 40–60%, saturation 50–80%) produce the most balanced palettes. Very light or very dark input colors can compress the lighter or darker shades respectively. Try the 'Random color' button to explore different starting points.