Tint and shade generator
Enter a color to get evenly stepped tints, shades and tones — perfect for hover states, backgrounds and borders. Choose 5%, 10% or 20% steps and classic RGB mixing or perceptual OKLab blending, then copy any HEX code or the whole set as CSS variables.
Tints and shades of #2A9D8F in 10% steps.
How to use the tints & shades
- Enter your base color.
- Pick a step size: 5%, 10% or 20%.
- Optionally switch on perceptual (OKLab) blending for more even steps.
- Click a swatch to copy its HEX, or copy every step as CSS variables.
Tint vs shade vs tone
A tint is a color mixed with white, so it gets lighter and softer. A shade is mixed with black, so it gets darker and richer. A tone is mixed with gray, which lowers its intensity. Together they give you a family of related colors for interface states and depth.
RGB or OKLab mixing?
RGB mixing matches what browser dev tools and most classic generators produce. OKLab mixing follows human perception, so each step looks equally different and mid-tones stay cleaner.
Frequently asked questions
How do I make a color lighter?
Mix it with white — that's a tint. Pick the 10% or 20% tint from the list above, or use a tint for hover backgrounds.
How do I make a color darker?
Mix it with black to get a shade. Shades work well for pressed states and text on light backgrounds.