Color Variations (Shades, Tints & Tones)
100% Client-Side PrivacyGenerate shades, tints and tones of any color plus a 50–900 design scale. Free online color variation generator.
Quick 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
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.
Why choose this tool
- Completely free — no signup or hidden limits
- Runs 100% in your browser — your data stays private
- Instant results, no downloads or installs
- Works on any device with a modern browser
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
Technical Details
Frequently Asked Questions
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.
Explore Related Tools & Guides
Color Converter
Free online color converter — convert HEX, RGB, HSL, HSV, CMYK, XYZ, LAB and more instantly with liv
HEX to RGB Converter
Convert HEX to RGB color values instantly. Free online HEX to RGB converter with live preview, copy
RGB to HEX Converter
Convert RGB to HEX color values instantly. Free online RGB to HEX converter with live preview, copy
HEX to HSL Converter
Convert HEX to HSL color values instantly. Free online HEX to HSL converter with live preview, copy
HSL to HEX Converter
Convert HSL to HEX color values instantly. Free online HSL to HEX converter with live preview, copy
RGB to HSL Converter
Convert RGB to HSL color values instantly. Free online RGB to HSL converter with live preview, copy
HSL to RGB Converter
Convert HSL to RGB color values instantly. Free online HSL to RGB converter with live preview, copy
HEX to HSV Converter
Convert HEX to HSV color values instantly. Free online HEX to HSV converter with live preview, copy
Related Tools
View AllColor Converter
Free online color converter — convert HEX, RGB, HSL, HSV, CMYK, XYZ, LAB and more instantly with live preview and batch mode.
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.
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.
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.
Related Articles
View All
WCAG Color Contrast Guide for Designers: Pass AA & AAA Standards
Master web accessibility with our complete WCAG color contrast guide. Learn contrast ratios, pass AA/AAA standards, and ensure readable designs.
How to Convert CSV to JSON Online: Free, Instant & Type-Safe Guide
Convert CSV rows and spreadsheets into beautifully formatted JSON arrays in real-time. Zero server uploads, auto type detection.
How to Convert JSON to CSV Online: The Ultimate Free & Private Guide
Turn complex JSON data, arrays, and API responses into clean CSV spreadsheets in seconds. 100% private in-browser conversion.