Tint & Shade
Tints are colours mixed with white (lighter); shades are colours mixed with black (darker).
Plain English
A tint is a lighter version of a colour — blue mixed with white becomes a soft sky blue. A shade is a darker version — blue mixed with black becomes navy. This is how colour scales work: your primary blue at full saturation might be the 500 stop, lighter tints become 400/300/200/100/50, and darker shades become 600/700/800/900. Understanding tints and shades lets you create cohesive palettes where all your colours feel related rather than randomly chosen.
Technical
In CSS, lightness in HSL (Hue, Saturation, Lightness) produces tints (increase L) and shades (decrease L). True tints mix with white, which also desaturates; true shades mix with black. Most design tools and systems use a mix approach. Tooling: Tailwind's colour palette is a set of tints/shades; Radix Colours provides perceptually uniform scales; shadcn/ui uses HSL custom properties for a full 11-stop scale per hue.
Live Demo
Tints add white, shades add black. Both are derived from the same base hue.
Usage
✓ Good usage
Use the 50-stop tint as the page background, the 100-stop as the card surface, and the 500-stop accent for buttons — the tint-shade relationship makes them feel like a family.
✗ Bad usage
Using completely unrelated blues for background (desaturated sky blue), text (cold navy), and buttons (saturated royal blue) — they look like three different designs.
Recommended values
- Light surface tint (50–100 stop): card backgrounds, page backgrounds
- Border tint (200 stop): subtle dividers
- Muted text shade (400–500 stop): secondary text
- Body text shade (700–900 stop): primary text
- Full-saturation accent (500 stop): buttons, links, interactive elements
- Dark accent shade (600–700 stop): hover states on accent
Common mistakes
- Creating tints by reducing opacity instead of mixing with white — opacity-based tints shift in a coloured container.
- Over-saturated dark shades — mixing a vibrant colour with black can create muddy, unpleasant darks; reduce saturation too.
- Using tints for text — light colours on white backgrounds fail contrast.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Build the UI from a single hue: use the 50-stop tint for the page background, 100-stop for card surfaces, 200-stop for borders, 600-stop for text, and the 500-stop accent for interactive elements. All colours share the same hue.