Tints vs Shades
Mixing a base color toward white or toward black—compare tints and shades for building UI color scales.
Overview
A usable color scale needs both directions from the base: tints move toward white and shades move toward black. The interesting part is not the math but the step spacing, because evenly spaced mixes rarely feel evenly spaced to the eye. Extremes are where scales break—too light and the fill vanishes, too dark and the brand hue turns into near-black.
Pros
- Lighter steps read as calm and spacious
- Ideal for hover states on dark text
- Useful for zebra rows and subtle fills
Cons
- Text contrast drops quickly as steps lighten
- Very light steps collapse into white
Pros
- Darker steps add weight and depth
- Strong pairing for white or light text
- Good for pressed and active states
Cons
- Deep steps lose hue identity fast
- Can muddy brand color recognition
Comparison table
| Aspect | Tints | Shades |
|---|---|---|
| Mixed toward | White | Black |
| Common role | Backgrounds and subtle fills | Emphasis, borders, pressed states |
| Failure mode | Washed out, low contrast | Hue identity disappears |
| Best fit | You need soft backgrounds under dark text | You need emphasis or dark-mode surfaces |
Recommendation
Generate five tints and five shades from your base, then delete the steps that fail contrast or lose the hue. A pruned nine-step scale beats a mathematically perfect twelve-step scale nobody can use.
Related tools
Related articles
Related comparisons
Frequently asked questions
- How many steps should a color scale have?
- Most systems land between seven and eleven steps. Fewer forces awkward reuse; more creates steps that are indistinguishable in real interfaces.
- Should tints and shades be generated or hand-picked?
- Generate first for consistent spacing, then hand-tune the two or three steps you use most for text and primary surfaces.
- What pushes someone toward Tints instead of Shades?
- Tints wins when you need soft backgrounds under dark text. The practical upside is that lighter steps read as calm and spacious, and ideal for hover states on dark text. The trade-off to watch is that text contrast drops quickly as steps lighten.
- When does Shades beat Tints for the same job?
- Reach for Shades when you need emphasis or dark-mode surfaces. It gives you darker steps add weight and depth plus strong pairing for white or light text, at the cost that deep steps lose hue identity fast.
- Can ToolHub help me try Tints and Shades before I commit?
- Yes. The tools linked from each side of Tints vs Shades run in your browser, so you can exercise Tints and Shades with sample data without uploading anything.