Home / Design / Color Shades Generator
Color Shades Generator
Turn one colour into a full 50–950 scale of tints and shades, and export it for CSS or Tailwind.
Click a swatch to copy its HEX. Your base colour is outlined and placed at the step closest to its lightness.
Why perceptual: simply mixing with white and black gives uneven steps and greyish mid-tones. The OKLCH method changes lightness in equal visual steps while keeping the hue steady, the same idea behind modern design-system palettes like Tailwind’s. Use 50–200 for backgrounds, 500–600 for buttons and 700–900 for text on light backgrounds.
About the Color Shades Generator
The Colour Shades Generator turns one colour into a full 50–950 scale of tints and shades, using the perceptual OKLCH method or classic mixing with white and black. Click any swatch to copy it, then export the scale as CSS variables, Tailwind config, SCSS or JSON for a consistent design system.
How to use the Color Shades Generator
- Enter your base colour and a name for exports.
- Choose the perceptual OKLCH method or mixing with white and black.
- Click any swatch to copy its HEX.
- Export the scale as CSS variables, Tailwind, SCSS or JSON.
Frequently asked questions
What is the difference between a tint and a shade?
A tint is a colour mixed with white, making it lighter. A shade is mixed with black, making it darker.
Why use the OKLCH method?
OKLCH follows how people actually perceive lightness, so the steps look evenly spaced and colours stay vivid instead of turning grey or muddy.
How do I use the scale with Tailwind CSS?
Choose the Tailwind export and paste it into the colours section of your Tailwind config, then use classes like bg-brand-500.