Tools › Color Variations

Variations of any color

Enter any HEX color and get its variations — lighter, darker, more saturated, paler, warmer and cooler. Click any color to copy.

Source color
Source color

Tints and shades

A tint is a color mixed with white, making it lighter. A shade is mixed with black, making it darker. Together they create a brightness scale for one hue, like in Tailwind or Material design systems.

Saturation and temperature

Saturation shows color intensity — from gray to vivid. Temperature shifts the hue toward warm (red-yellow) or cool (blue-green) tones while preserving other characteristics.

What it's used for

Variations are used in design systems for hover and active states, shadows and backgrounds. No limits, no registration.

FAQ
What are tints and shades?
A tint is a color lightened with white, a shade is darkened with black. For example, for blue #3B82F6: tints will be light blue, shades will be dark blue.
How does it work technically?
All variations are calculated in HSL space. Lightness changes for tints/shades, saturation for intensity variations, and hue shifts for temperature changes.
Can I export the result?
Yes. Click "Copy as CSS" to get CSS custom properties for all variations. Or "Copy all HEX" — a comma-separated list of all codes.
Is this tool free?
Yes, completely free with no limits. No registration.