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.

More color tools

Color PickerUpload a photo and click anywhere — get HEX, RGB, HSL and color name Palette from ImageExtract 5–8 dominant colors from any image Palette BuilderGenerate N colors with guaranteed text readability Color HarmoniesComplementary, analogous, triadic and split-complementary Gradient GeneratorCreate beautiful gradients and copy the CSS code WCAG ContrastCheck AA and AAA accessibility — free Color Blindness SimulatorHow colors look to people with protanopia, deuteranopia and other types Tailwind ConverterNearest Tailwind class for any HEX color Color ConverterHEX ↔ RGB ↔ HSL ↔ CMYK instantly, with one-click copy Color by NameFind HEX by name — "terracotta", "indigo", "azure" CSS Filter for SVGRecolor SVG icons to any color via CSS without a code editor Color PalettesCurated palettes by theme — click a color to copy HEX