Shades & Tints Generator
Generate lighter tints and darker shades of any color — perfect for hover states and design systems.
Was this tool helpful?
Thanks for the feedback!
Give this generator one base colour and it returns a nine-step scale: four tints mixed toward white, the base itself, and four shades mixed toward black, each with its hex code. Designers and front-end developers use a scale like this for hover states, borders, backgrounds and dark-mode surfaces that all belong to the same colour family.
The mixing formula
Each red, green and blue channel is moved a fixed share of the way toward white (255) or black (0), then rounded:
- Tint at t%: channel + (255 − channel) × t
- Shade at s%: channel × (1 − s)
For #6d48f5, the channels are 109, 72 and 245. The 20% tint is 109 + 146 × 0.2 = 138.2 → 138, 72 + 183 × 0.2 = 108.6 → 109, and 245 + 10 × 0.2 = 247, giving #8a6df7. The 20% shade is 109 × 0.8 = 87.2 → 87, 72 × 0.8 = 57.6 → 58, and 245 × 0.8 = 196, giving #573ac4.
The full scale for #6d48f5
| Step | Hex | One possible use |
|---|---|---|
| Tint 80% | #e2dafd | Card or page background |
| Tint 60% | #c5b6fb | Borders, selected rows |
| Tint 40% | #a791f9 | Disabled buttons |
| Tint 20% | #8a6df7 | Icons on dark surfaces |
| Base | #6d48f5 | Primary buttons, links |
| Shade 20% | #573ac4 | Hover and pressed states |
| Shade 40% | #412b93 | Text on light tints |
| Shade 60% | #2c1d62 | Headings |
| Shade 80% | #160e31 | Dark-mode background |
Nine steps map neatly onto the 100 to 900 naming used in many design systems: Tint 80% as 100, the base as 500 and Shade 80% as 900.
Checking contrast across the scale
Lightening a colour quickly reduces its contrast with white text, and darkening a background reduces it with dark text. Some real pairs from this scale:
- White on the base #6d48f5: 5.39:1, passing WCAG AA for normal text.
- White on Shade 20% #573ac4: 7.48:1, passing AAA as well.
- Base #6d48f5 text on Tint 80% #e2dafd: only 4.03:1, which fails AA for body text.
- Shade 40% #412b93 text on Tint 80% #e2dafd: 7.87:1, a safe choice for a tinted callout box.
The usual pattern is light tints for backgrounds and deep shades for text. Confirm any pair with the Color Contrast Checker.
Tints, shades and tones
A tint adds white, a shade adds black, and a tone adds grey. This tool produces tints and shades only. Mixing is done directly on RGB values, which is simple and predictable, though it can make tints look slightly washed out compared with scales tuned by eye in design software.
Limits
The steps are fixed at 20% intervals, so you cannot request 5% steps or an eleven-step scale. Input must be a three- or six-digit hex code. To pick a second family to build the same way, start with the Color Palette Generator and feed its swatches back in here.