Color Shades & Tints Generator
Generate tints and shades of any base color.
This tool runs entirely in your browser. Your files are never uploaded to a server.
Tints (mixed with white)
#d8e6fd
#b1cdfb
#89b4fa
#629bf8
Base
#3b82f6
Shades (mixed with black)
#2f68c5
#234e94
#183462
#0c1a31
Enter a three- or six-digit HEX color to generate four tints by linearly mixing its RGB channels 80%, 60%, 40% and 20% toward white, plus four shades mixed 20%, 40%, 60% and 80% toward black. The normalized base and eight generated lowercase HEX values can be copied individually. This is direct sRGB channel interpolation with rounded values, not perceptual HSL, OKLCH or gamma-correct color mixing, so visual spacing between steps is not guaranteed. Use the nine-color set as a starting palette and verify contrast separately; processing remains local.
Frequently Asked Questions
- What's the difference between a tint and a shade?
- A tint is a color mixed with white (lighter); a shade is a color mixed with black (darker) — together they form a color scale.
- How many steps does this generate?
- Four tints, the base color, and four shades — nine steps in total, similar to a typical 50-900 UI color scale.
- What are shades and tints used for?
- They're commonly used for hover/active states, borders, backgrounds and text-on-background combinations in a design system.