Tint, shade, tone: the difference
The three terms describe different ways of mixing a color:
- Tint — the color mixed with white, making it lighter and softer.
- Shade — the color mixed with black, making it darker.
- Tone — the color mixed with grey, making it less saturated and more muted.
The percentage is how much of the mixing color has been added. A 30% tint is 70% of your color and 30% white.
| Mix | Tint (white) | Shade (black) | Tone (grey) |
|---|---|---|---|
| 10% | #3B73ED | #2159D4 | #2E66E0 |
| 20% | #5182EF | #1E4FBC | #3769D6 |
| 30% | #6692F1 | #1A45A5 | #406CCB |
| 40% | #7CA1F3 | #163B8D | #496FC0 |
| 50% | #92B1F5 | #133276 | #5372B6 |
| 60% | #A8C1F7 | #0F285E | #5C74AB |
| 70% | #BED0F9 | #0B1E47 | #6577A0 |
| 80% | #D3E0FB | #07142F | #6E7A95 |
| 90% | #E9EFFD | #040A18 | #777D8B |
Mixing is not the same as changing lightness
A tint can be created in different ways. One approach is to mix the color with white; another is to increase its HSL lightness. These methods produce different RGB values, especially for highly saturated colors.
For example, mixing #00A86B with 25% white gives
#40BE90. Increasing its HSL lightness by 25% produces a
different color. The two methods can therefore give noticeably different
results even when both are described as "lightening" a color.
This generator uses direct RGB mixing: tints are mixed with white, shades with black, and tones with grey. That makes the calculation explicit and consistent from one step to the next.
Using them in a design
- Hover and active states. A small shade or tint can create a visible variation of a button or interactive element while keeping it visually related to the base color. Test the result against the surrounding colors.
- Backgrounds. A high-percentage tint can create a subtle colored surface that keeps a connection to the base color.
- Borders and dividers. A lighter tint can provide a softer border while retaining some of the base color.
- Muted colors. A tone can create a softer version of a color for secondary elements while keeping it visually related to the original.
Check contrast before using these for text
Lighter tints can have much less contrast against a light background. Check the actual color combination before using it for text or other important interface elements. Run any text pairing through the contrast checker — normal text needs a contrast ratio of at least 4.5:1 for WCAG AA.
Why some colors produce repeats
If your base color is already very close to white, there is very little
difference between the base color and white. Several tint steps can
therefore round to the same HEX value. For example, a base of
#FEFEFE produces the same rounded HEX value for every tint
step.
The same effect happens with shades of a color that is already very close to black, or with tones when the base is close to the grey used for mixing. The repeated values are a result of rounding in the RGB calculation, not an error in the generator.
Frequently asked questions
What is the difference between a tint and a shade?
A small shade can create a darker hover state on a light background, while a small tint can create a lighter variation on a dark background. The right amount depends on the surrounding colors and the contrast you need.
How do I make a hover color from my brand color?
A 10–20% shade is the usual choice for a hover state on a light background — dark enough to register, close enough to still read as the same color. On a dark background use a tint of the same size instead.
Why do my tints look more vivid elsewhere?
Tints can be generated in different ways. Increasing HSL lightness and mixing with white produce different colors. This generator mixes the original color with white, so its tints become progressively paler as the percentage increases.
How many shades should a design system have?
There is no fixed number that every design system needs. Five to ten steps can be enough for many projects, while larger systems may use more. This generator provides nine steps at 10% intervals so you can choose the values that fit your design.