What's the difference between shades, tints and tones?

Shades mix the color toward black, tints toward white, and tones toward gray. Together they form a complete color family.

What is a design scale?

A 50–900 ramp (like Tailwind's) that goes from a very light tint at 50 to a very dark shade at 900, with the base color at 500.

Can I copy the whole family?

Yes — each row has a copy button that copies all its hex values at once.

Color Tools

Color Variations (Shades, Tints & Tones)

Turn any color into a full family. Generate 10 shades (mixed toward black), 10 tints (toward white), 10 tones (toward gray), and a ready-to-use 50–900 design scale for your design system. Every row copies as a comma-separated list.

#color shades#color tints#color tones#shades generator#color variations

Quick Info

Browser-based
Instant results
Free — No signup

Generate Variations

How to use Color Variations (Shades, Tints & Tones)

Enter a base color

Type a hex or pick a color to build the family from.

View the family

Shades, tints, tones and a full design scale appear instantly.

Copy what you need

Copy any row or swatch with one click.

Color variations — shades, tints & tones

#92140c

Valid color

Shades — mix with black

Tints — mix with white

Tones — mix with gray

Design scale — a ready 50–900 brand ramp

100

200

300

400

500

600

700

800

900

Shades darken toward black, tints lighten toward white, tones desaturate toward gray.

Key Features

10 shades, 10 tints and 10 tones automatically
50–900 design scale with named steps
Click any swatch to copy its hex
Copy full rows as comma-separated lists
Live updates as you change the base

Common Use Cases

Build a Tailwind-style color scale for your design system
Find hover and active states for buttons
Create monochromatic marketing assets
Understand how mixing with black/white/gray changes a color

Explore Related Tools & Guides

Free Tool

Color Converter

Free online color converter — convert HEX, RGB, HSL, HSV, CMYK, XYZ, LAB and more instantly with liv

Free Tool

HEX to RGB Converter

Convert HEX to RGB color values instantly. Free online HEX to RGB converter with live preview, copy

Free Tool

RGB to HEX Converter

Convert RGB to HEX color values instantly. Free online RGB to HEX converter with live preview, copy

Free Tool

HEX to HSL Converter

Convert HEX to HSL color values instantly. Free online HEX to HSL converter with live preview, copy

Free Tool

HSL to HEX Converter

Convert HSL to HEX color values instantly. Free online HSL to HEX converter with live preview, copy

Free Tool

RGB to HSL Converter

Convert RGB to HSL color values instantly. Free online RGB to HSL converter with live preview, copy

Free Tool

HSL to RGB Converter

Convert HSL to RGB color values instantly. Free online HSL to RGB converter with live preview, copy

Free Tool

HEX to HSV Converter

Convert HEX to HSV color values instantly. Free online HEX to HSV converter with live preview, copy

Technical Details

Outputs: Shades (black), tints (white), tones (gray), 50–900 scale

Steps: 10 per family

Processing: 100% client-side

Related Tools

View All

color

Color Converter

Free online color converter — convert HEX, RGB, HSL, HSV, CMYK, XYZ, LAB and more instantly with live preview and batch mode.

Free Tool

color

HEX to RGB Converter

Convert HEX to RGB color values instantly. Free online HEX to RGB converter with live preview, copy buttons, and batch support.

Free Tool

color

RGB to HEX Converter

Convert RGB to HEX color values instantly. Free online RGB to HEX converter with live preview, copy buttons, and batch support.

Free Tool

color

HEX to HSL Converter

Convert HEX to HSL color values instantly. Free online HEX to HSL converter with live preview, copy buttons, and batch support.

Free Tool