Color Shade Generator
A shade is the result of mixing a colour with black, each step gets darker. The generator takes a base HEX colour and produces 3 to 20 steps (10 by default) of increasingly dark shades, plus the lighter tints of the same base. Useful for design-system palette ladders (500 → 900), button pressed/active states, text colours that remain legible, and shadow overlays. Each step is shown as a swatch with its hex value ready to copy.
How shade generation works
-
1
Pick a base colour
Use the colour picker, or pass a hex value in the page URL in funnel mode. The base sits between the tint range and the shade range.
-
2
Choose step count
3 to 20 steps, 10 by default. More steps give a smoother ladder; fewer steps give stronger jumps.
-
3
Mix with black in even steps
Each step scales the red, green and blue channels by the same factor, which is the same as mixing with black (or white for tints) in even steps. With 10 steps, each step is about 9% darker or lighter. Hue stays identical to the base.
-
4
Read off the scale
Every swatch displays its hex value. Select the text to copy it into CSS, a Tailwind theme or a design token file.
Shade vs tint vs tone
- Shade: colour + black → darker.
- Tint: colour + white → lighter.
- Tone: colour + grey → less saturated.
This generator produces both shades and tints from the same base. The tint+shade pair usually forms a design-system palette (e.g. brand-100 through brand-900 where 500 is the base).
Example scale: #3B82F6 (Tailwind blue-500)
| Step | Hex | Mix | Role in design system |
|---|---|---|---|
| 0 | #3B82F6 | Base | Primary brand (e.g. blue-500) |
| 1 | #316CCD | 17% black | Hover state |
| 2 | #2756A4 | 33% black | Pressed/active state (blue-600) |
| 3 | #1D417B | 50% black | blue-700 |
| 4 | #132B52 | 67% black | blue-800 |
| 5 | #091528 | 83% black | blue-900 |
The table shows a 5-step scale: each step is one sixth of the way to black.
How the steps are computed
The tool scales the red, green and blue channels of the base by the same factor on every step. That is equivalent to mixing with black for the shade range and with white for the tint range, in even steps. With 10 steps, each step is about 9% darker or lighter than the previous one.
Scaling all channels equally keeps the hue of the base exactly: a blue base stays blue, a green base stays green. Mixing with black also lowers saturation along with lightness, so dark steps look natural instead of glowing. Reducing lightness alone, without touching saturation, leaves dark colours oversaturated.
Using shades in UI
- Button: base for rest state, 1-2 steps darker for hover, 2-3 steps darker for active/pressed.
- Body text: 2-3 steps darker than base ensures legibility on white; lighter for secondary text.
- Border / divider: 1-2 steps darker than the background, enough to delineate without overwhelming.
- Shadows: darkest step (or darker) with reduced alpha rather than a new grey.
- Data viz: use shades of a single hue for a sequential scale (value magnitudes), or pair shades of two hues for diverging scales (positive vs negative).
Common pitfalls
- Too many steps squash into indistinguishable bands. 10-step scales work well because each step is about 9% darker; at 20 steps the differences become subtle. For strong contrasts, prefer 3-5 steps.
- Hue drift is not possible here: every step scales all channels equally, so a red stays red and a green stays green. Hue drift appears when interpolating between two different colours, which this tool does not do.
- Ignoring accessibility: shades that look harmonious can fail WCAG contrast against the background. Always verify contrast at each step.
- Shade-only scales feel oppressive on dark backgrounds. Pair with the tint scale for a usable dark mode.
Frequently Asked Questions
For a design system, 5 shade steps + 5 tint steps (10 total around the base) is the common convention. For quick UI state colours (hover, active), 3 steps are enough.
The even mixing used here keeps every step on a straight line between the base and black, so mid-range steps stay clean. Muddy mid-range usually comes from a tool that interpolates between two different colours, or that reduces lightness without reducing saturation.
Dark colours already have little room to go darker before turning black, a dark purple base yields only 2-3 distinctive steps before the scale collapses. Pick a mid-lightness base for richer scales.
Similar in intent, but mixing with black reduces saturation alongside lightness, which typically looks more natural. Pure lightness reduction keeps saturation high and can result in oversaturated dark colours.
Related Tools
HEX Color Picker
Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.
ASCII Table Reference
Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.
Color Palette Generator
Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.
FPS Counter
Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.
JSON Formatter
Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.
Phone Validator
Validate phone numbers by country, detect the region and type, and normalize valid numbers to E.164, international, national and RFC 3966 formats.