Tint & Shade Scale Generator
Turn one brand color into a 50-900 design-system scale — ten tints and shades with hex codes, click to copy.
1,060 views
Click a swatch to copy its hex
How the Scale Is Built
Color theory defines three ways to systematically alter a base hue in the HSL model: tint (mix toward white, raising Lightness — the color looks paler), shade (mix toward black, lowering Lightness — the color looks darker and richer), and tone (mix toward gray, reducing Saturation with Lightness roughly unchanged — the color looks muted or "dusty"). This generator produces the tint/shade half of that trio: starting from your base color, it steps Lightness up toward white for the lighter stops and down toward black for the darker stops, producing the ten-step 50-900 scale that design systems like Tailwind and Material use, with the original brand color anchored around step 500.
A concrete example: starting from a blue around hsl(217, 91%, 60%), step 50 lands near hsl(217, 91%, 97%) — almost white, just a whisper of the hue remaining — while step 900 lands near hsl(217, 60%, 20%) — very dark, with saturation compressed as the color approaches black. Each stop gets both a hex code and a ready-to-use CSS variable; clicking any swatch copies it.
The practical payoff of generating a full scale instead of eyeballing a handful of shades is consistency: every stop is derived from the same base hue with the same mixing rule, so a card border at step 200 and a hover state at step 100 always feel like they belong to the same color family, even months later when a different designer or a different component needs a new shade of the same brand color.
What to Know
- Tint, shade and tone are not the same operation: this tool performs only tint and shade — Lightness changes. A true tone reduces Saturation while holding Lightness roughly fixed, producing a muted version of the color rather than a lighter or darker one; that separate manipulation is not what this generator applies.
- Where each stop is used: 50-100 for page backgrounds and hover fills, 200-300 for borders and dividers, 500-600 for buttons and links (the brand color itself), 700-900 for body text on light backgrounds.
- Contrast is not automatic: pairing a ≥700 step with a ≤100 step usually clears WCAG AA contrast, but "usually" is not "always" — verify the exact pair you plan to ship with a dedicated contrast checker.
- Not identical to Tailwind's own palettes: Tailwind's built-in colors are hand-tuned per hue by design, while this generator applies one consistent mixing formula to any input — predictable for custom brand colors, close enough for real interfaces.
- Dark mode usually flips the scale: a background that uses step 50 in light mode often maps to something near step 900 in dark mode, and vice versa — generating the full scale up front means both themes are already covered.
Frequently Asked Questions
Why does my vivid color look washed out in light tints?
Mixing toward pure white drains saturation — that is desirable for backgrounds. If you want livelier tints, nudge the base color more saturated before generating.
Where should my brand color sit on the scale?
Aim for 500-600. If your brand color is very light or dark, place it at the step matching its lightness and let the generator fill both directions.
Are these the same values Tailwind would give?
Not identical — Tailwind palettes are hand-tuned per hue. This scale uses consistent mixing, which is predictable for custom brand colors and close enough for real projects.
What is the difference between a tint, a shade, and a tone?
A tint adds white (raises Lightness) to lighten a color; a shade adds black (lowers Lightness) to darken it; a tone adds gray (lowers Saturation, Lightness roughly unchanged) to mute it without making it lighter or darker. This generator produces tints and shades — the lightening and darkening steps — not tones.
Why do steps near 500 keep the most saturation while 50 and 900 look flatter?
Mixing toward pure white or pure black inherently compresses how much of the original hue's saturation can still show — near white there is almost no room left for saturated color, and near black saturation reads as barely distinguishable from gray, so the scale's midpoint is where the color's original vividness is best preserved. This is also why dark mode typically reuses the same ten values but flips which end serves as background versus text.
Similar Tools
Report a Problem
Tint & Shade Scale Generator
Comments
No comments yet — be the first to write one!