Tint & Shade Generator
Generate lighter tints, darker shades and muted tones from any color, with copyable hex codes and CSS variables.
Tints base mixed with white
Shades base mixed with black
Tones base mixed with grey
How it works
Enter any color — a hex code like #3498db, rgb(52, 152, 219),
hsl(204, 70%, 53%) or a CSS name such as tomato — and the
generator builds three ramps instantly. Tints mix your base with white
to make it lighter, shades mix it with black to make it darker, and
tones mix it with mid-grey to mute it. Each step blends a fixed
percentage in RGB space, so a 20% tint is exactly 20% of the way from your color to
white — the same maths a designer would do by hand.
Choose 5, 10 or 20 steps depending on how fine a ramp your design system needs. Click any swatch in the tints, shades or tones row to copy its hex code, or grab the whole palette as ready-to-paste CSS custom properties. Everything is calculated in your browser with plain JavaScript — no uploads, no accounts and no ads.
Frequently asked questions
What is the difference between a tint, a shade and a tone?
A tint is your base color mixed with white, so it looks lighter and softer. A shade is the base mixed with black, so it looks darker and deeper. A tone is the base mixed with mid-grey, which keeps the lightness roughly similar but makes the color less saturated and more muted. This generator builds all three ramps at once so you can compare them side by side.
How do I make a hex color lighter or darker?
Blend each RGB channel towards white to lighten it, or towards black to darken it. A 20% tint of #3498db moves every channel 20% of the way to 255, giving #5dade2; a 20% shade moves every channel 20% of the way to 0, giving #2a7aaf. Paste your hex code above and the tool does the maths for you and shows the resulting code under every swatch.
How many tints and shades should a design system have?
Most design systems use somewhere between 5 and 10 steps per color so each step is visibly distinct without creating dozens of near-identical values. Pick 5, 10 or 20 steps here, then use Copy CSS variables to paste the whole ramp as custom properties like --color-tint-20 straight into your stylesheet.