Color Tints and Shades Generator
FreeGenerate a complete tint and shade scale from any color. Get a 10-step scale from near-white to near-black. Free, browser-based.
What's next
Settings guide
Standard 10-step scale mapping:
| Step | Lightness (approx) | Use case |
|---|---|---|
| 50 | 97% | Page backgrounds, subtle tints |
| 100 | 94% | Card backgrounds, hover surfaces |
| 200 | 86% | Borders, dividers |
| 300 | 73% | Disabled states, placeholders |
| 400 | 61% | Secondary icons, muted text |
| 500 | 50% | Base color — most vivid |
| 600 | 42% | Hover states for buttons |
| 700 | 35% | Active/pressed states |
| 800 | 28% | Dark text on light backgrounds |
| 900 | 21% | Headings, high-contrast text |
| 950 | 14% | Near-black — dark theme bases |
When to adjust saturation alongside lightness:
- ·Very light tints (L:90%+) often look muddy if S stays high — drop S slightly
- ·Very dark shades (L:15%–) can look muddy — keep S higher to maintain color identity
- ·Tailwind's scales adjust saturation at the extremes for this reason
Format comparison
HSL lightness steps vs perceptual uniformity: Equal HSL lightness steps are not perceptually equal — the human eye perceives lightness non-linearly and differently across hues. A yellow at L:50% appears much lighter than a blue at L:50%. For design systems where perceptual uniformity matters, OKLCH provides more consistent-looking steps. For most practical work, HSL-based scales are sufficient.
10-step vs custom step count: 10 steps gives you enough granularity to cover all practical use cases (backgrounds, borders, hover, active, text). More steps increase precision but complicate the design system. Fewer steps force you to reuse the same shade for multiple semantic meanings, creating visual confusion.
Tint/shade vs monochromatic palette: A tint/shade scale is one input to a design system. A monochromatic palette is a design choice to use only one hue throughout the interface, relying on this scale for all variety. Not all design systems are monochromatic — many use 2–3 hues with scales for each.
How it works
Enter base color
Input your brand or primary color in any format.
Choose steps
Select the number of steps (default 10) and lightness distribution.
Export
Copy the full scale as HEX codes, CSS custom properties, or a Tailwind config object.
About this format
A tint is a color mixed with white — it moves the color toward lighter pastel territory. A shade is a color mixed with black — it moves the color toward deeper, darker territory. Together, a systematic tint/shade scale gives you the full lightness range of any base color: from the palest tint usable as a background to the deepest shade usable as dark text on a light surface.
This is the foundation of every modern design system's color scale. Tailwind CSS generates a 10-step scale (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) for each of its named colors. Material Design generates a similar scale. The reason: a single hex value is not enough to build an interface — you need lighter variants for hover states, subtle backgrounds, and borders, and darker variants for pressed states, text, and depth.
In HSL, generating a tint/shade scale is straightforward: keep the hue and saturation constant, step the lightness from near-100% (tint) to near-0% (shade) in equal increments. The result is a perceptually consistent scale where adjacent steps look related and steps at opposite ends still share the same color identity.