Turn one hex value into a full 50 to 950 scale for Tailwind v4, v3 or CSS variables.
hsl(332, 82%, 59%) · Your colour is placed at the stop it sits closest to and kept exactly as entered.
Click any swatch to copy its hex value.
@theme {
--color-brand-50: #fdf2f7;
--color-brand-100: #fbe5ef;
--color-brand-200: #f6c1da;
--color-brand-300: #f197c2;
--color-brand-400: #ed63a5;
--color-brand-500: #ec4393;
--color-brand-600: #da1a75;
--color-brand-700: #b41862;
--color-brand-800: #931651;
--color-brand-900: #771342;
--color-brand-950: #4e0e2c;
}Pick it with the swatch or paste a hex value. This is the colour the whole scale is built around, and it is preserved exactly rather than approximated.
Use the name you want in your config, such as brand or primary. It becomes the token prefix, so you end up with names like brand-500 in your classes.
Tailwind v4 uses the theme block with CSS variables, v3 uses the colors object in the config file, and the plain CSS option works in any project without Tailwind.
Because 500 is not a fixed slot, it is a lightness. A colour that is already light belongs nearer 300, and a dark one nearer 700. Placing it by lightness keeps the scale even instead of forcing your colour into the middle.
Yes. The stop it lands on returns your hex unchanged, marked with a ring in the swatches. Only the other stops are generated.
A very light or very dark shade at full saturation looks artificial, closer to a neon tint than a real palette step. Easing saturation off at the extremes is what makes a scale look designed.
v4 defines colours as CSS variables inside a theme block, so they work in plain CSS too. v3 uses a JavaScript object in the config file. Pick whichever matches your project.
Yes. The CSS variables option gives you plain custom properties on the root element, usable in any stylesheet.
No, generating a scale and checking contrast are separate jobs. Take the shades you plan to pair and run them through the contrast checker, which is linked below.
Yes, though a colour with no saturation produces a neutral scale by definition. For a tinted grey, pick a colour with a small amount of saturation and the tint carries through the scale.
Yes, completely free with no sign-up.
Convert colors between HEX, RGB, and HSL formats with live preview and CSS output.
Open ToolCheck any colour pair against WCAG AA and AAA, and get a suggested fix when it fails.
Open ToolPull the dominant colours out of an image with hex, HSL and the share of each.
Open Tool