Color tools
Shades & Tints Generator
Generate lighter/darker variants from a base HEX color. Helpful for UI states and for building intuition for color matching.
Base color (HEX)
Paste any HEX and tweak saturation. For RGB/HSL, use Color Converter.
Saturation scale (%)
100 keeps original saturation; lower makes grayer.
Preview
Base
Generated shades & tints
Notes
This tool generates variants by holding hue constant and stepping lightness across a range. That’s a good starting point for tints and shades, but “perfect” ramps depend on your display and context.
If you’re also checking readability, pair this with Contrast Checker.
FAQ
- What are shades and tints?
- A tint is a lighter version of a color (higher lightness). A shade is a darker version (lower lightness). They’re useful for UI states and creating depth.
- Why do my shades look different on different screens?
- Because displays vary in calibration, brightness, and viewing conditions. Your environment changes perceived contrast too.
- Should I keep saturation the same?
- Often you’ll reduce saturation slightly for darker shades to avoid “neon” colors. This tool lets you scale saturation as a quick starting point.