Click a swatch to copy its hex.
W / B: contrast ratio of white and black text on each step — bold where it passes WCAG AA (4.5:1).
Base Color
Variables are named --primary-500
Scale
Adjust
OKLCH keeps steps perceptually even. Hue shift drifts tints and shades in opposite directions, like hand-tuned palettes.
CSS Output
:root {
--primary-50: #f5f4fd;
--primary-100: #eeecfe;
--primary-200: #ded8ff;
--primary-300: #c7bbff;
--primary-400: #aa92fc;
--primary-500: #8b5cf6;
--primary-600: #7849db;
--primary-700: #6539bd;
--primary-800: #522b9e;
--primary-900: #401e7e;
--primary-950: #2e145e;
}About CSS Tints & Shades Generator
Turn one color into a complete tints and shades scale — Tailwind-style 50 to 950, a 10-step scale or your own step count. Steps are spaced evenly in OKLCH, and you can export CSS variables, SCSS, Tailwind v3 or v4, or JSON.
How to Generate Tints & Shades
- 1Pick a base color — type HEX, RGB, HSL or OKLCH, or click the swatch to choose one.
- 2Name the color (for example primary or brand). The name is used in every variable and config key.
- 3Choose a scale: Tailwind's 50–950, a 10-step scale, or a custom number of steps, then choose which step the base color sits at.
- 4Keep OKLCH for perceptually even steps, or switch to HSL or an RGB mix. Add a little hue shift for warmer tints and cooler shades.
- 5Click any swatch to copy its hex, or copy the whole scale as CSS variables, SCSS, Tailwind v3, Tailwind v4 @theme or JSON.
Frequently Asked Questions
A tint is a color made lighter, traditionally by mixing in white. A shade is a color made darker, by mixing in black. A tints and shades scale puts both on one ladder, from the lightest tint to the darkest shade, with your base color in between.
Keep the Tailwind preset, set your color as the base at 500, and give it a name. Copy the Tailwind v4 tab into your CSS for an @theme block, or the Tailwind v3 tab into tailwind.config.js. Classes like bg-primary-100 and text-primary-900 then work straight away.
HSL lightness is not how bright a color looks: a yellow and a blue at the same HSL lightness look very different. OKLCH is built around perceived lightness, so steps look evenly spaced across every hue, and tints keep their color instead of washing out to gray.
Yes. The step you choose as the base is your color, unchanged. The other steps are generated lighter and darker around it.
They are the WCAG contrast ratios of white text (W) and black text (B) on that step. Bold numbers reach 4.5:1, which is enough for normal-size text at level AA — handy for choosing button and badge colors.
Hand-tuned palettes rarely keep exactly the same hue from light to dark. Hue shift rotates the tints one way and the shades the other, by up to 30 degrees at the ends, which can make a scale feel warmer and richer.
Related Tools
More free CSS generators you might like.