Color Shades Generator
Pick or paste one color to get a balanced 11-step scale from 50 to 950, the way design systems like Tailwind CSS build their palettes, plus classic tints, shades and tones. Every swatch shows its contrast, copies with one click and exports to Tailwind, CSS variables, SCSS or JSON.
Color scale 50 – 950 · click a swatch to copy
Tints mixed with white, 0 – 90%
Shades mixed with black, 0 – 90%
Tones mixed with grey #808080, 0 – 90%
Export
How to use the Color Shades Generator
- Choose a base color with the picker or type a HEX code such as #3b82f6 (rgb() and color names work too).
- Pick the method: OKLCH gives even-looking steps; HSL matches older tools.
- Name the color (for example primary or brand) so the export uses that name.
- Press Generate or just edit the color; the scale, tints, shades and tones update live. Click a swatch to copy it.
- Export: choose Tailwind, CSS, SCSS or JSON, then copy the code or download the file.
How the 50–950 scale is built
Modern design systems describe each color as a ladder of steps. Tailwind CSS, for example, names them 50, 100, 200 … 900 and 950, where 50 is almost white, 500 is the "main" color and 950 is almost black. This generator gives every step a target lightness in the OKLCH color space and keeps the hue of your color the whole way down:
| Step | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| OKLCH lightness | 97% | 94% | 89% | 81% | 70% | 62% | 55% | 49% | 42% | 38% | 28% |
| Chroma (relative) | 8% | 16% | 30% | 52% | 80% | 100% | 98% | 90% | 78% | 65% | 45% |
Your color is placed on the step with the closest lightness and kept exactly as typed. Lighter steps are spread evenly between your color and white, darker steps between your color and black. Chroma (colorfulness) is lowered near the ends of the ladder so the palest and darkest steps do not look neon, and any color that falls outside the sRGB screen gamut has its chroma reduced until it fits, without changing its lightness or hue.
Tints, shades and tones: the formulas
The three classic rows mix your color with white, black or mid-grey in the sRGB channels. For each red, green and blue value c and a mix amount t from 0 to 0.9:
- Tint = c + (255 − c) × t
- Shade = c × (1 − t)
- Tone = c + (128 − c) × t
Worked example with #3b82f6 (59, 130, 246) at 50%: the tint is (157, 193, 251) = #9dc1fb, the shade is (30, 65, 123) = #1e417b and the tone is (94, 129, 187) = #5e81bb. Values are rounded to the nearest whole number.
Contrast labels explained
Each swatch shows the WCAG 2 contrast ratio of its text color (white or black, whichever is stronger) against the swatch. The ratio is (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colors.
| Label | Ratio | Good for |
|---|---|---|
| AAA | 7 : 1 or more | Body text for everyone, including low vision |
| AA | 4.5 : 1 or more | Normal body text and buttons |
| AA18 | 3 : 1 or more | Large text only (18 pt, or 14 pt bold) and icons |
| Fail | under 3 : 1 | Decoration only, not for text |
A common pattern is to use steps 50–200 for backgrounds, 500–600 for buttons with white text, and 700–900 for text on light backgrounds.
Frequently asked questions
What is the difference between tints, shades and tones?
A tint is a color mixed with white, a shade is a color mixed with black and a tone is a color mixed with grey. Tints get lighter, shades get darker and tones get duller while keeping roughly the same lightness.
How are the 50 to 950 steps chosen?
Each step has a target lightness similar to the default Tailwind CSS palette, from about 97% lightness at 50 to about 28% at 950. Your color is placed on the step whose lightness is closest to it, and the other steps are spread evenly towards white and black from there.
Why use OKLCH instead of HSL?
OKLCH is a perceptual color space: equal changes in its lightness look like equal changes to the eye, and hue stays stable as colors get lighter or darker. HSL lightness is not perceptual, so yellow at 50% looks much lighter than blue at 50%, and its steps can look uneven.
Is my exact color in the scale?
Yes. Your color is used unchanged on its natural step (shown with a dot), or on 500 if you choose Always 500. The other steps are generated around it.
What do the AA and AAA labels mean?
They are WCAG 2 contrast levels for text drawn on the swatch in the label color (white or black). AA needs a contrast ratio of at least 4.5:1 for normal text, AAA needs 7:1. Large text only needs 3:1 for AA, shown as AA18.
How do I use the palette in Tailwind CSS?
For Tailwind v3 paste the exported object into theme.extend.colors in tailwind.config.js. For Tailwind v4 paste the @theme block into your main CSS file. Then use classes like bg-primary-500 or text-primary-900.