#FFFFFF
#E5DFFD
#C9BFFB
#ACA0F8
#8B83F5
#6366F1
#5151BC
#3F3D89
#2D2B5A
#1B192F
#000000
How to use
01
Enter a base color
Paste a hex into the Base color field or click the swatch to use a visual picker. The ramp rebuilds instantly, running from pure white through your color down to black.
02
Set the step count
Move the Steps slider between 5 and 21. Eleven steps gives you a ramp that maps neatly onto the 50 through 900 naming that most design systems use.
03
Copy your swatches
Each row shows an uppercase hex with its own copy button. Copy all outputs the entire ramp as a comma-separated list, ready for a tokens file.
Why Shades & Tints
- Generates a smooth ramp of tints (lighter) and shades (darker).
- Uses LAB color space for perceptually-uniform steps.
- Adjustable count from 5 to 21.
Common questions
What's the difference between tints and shades in this tool?
Tints are your base color mixed with white and shades are the base mixed with black. The generator builds both at once, placing your color in the middle of the ramp with tints above it and shades below it.
Which steps map to a 50 to 900 scale when I generate shades of a color?
Set the slider to 11 steps and treat your base as the 500 slot. For #6366F1 that yields #ACA0F8 around the 300 position, #5151BC at 600, and #3F3D89 at 700, with pure white and black at the extremes that you'll usually discard.
What makes LAB better than HSL for the shades ramp?
HSL lightness is mathematically even but perceptually lumpy; a 10 percent HSL step looks bigger in yellows than in blues. LAB spacing keeps each step looking like the same size jump, which is what you want when adjacent swatches will sit next to each other in a UI.
Can this work as a lighter and darker color generator for hover states?
That's one of its best uses. Take the swatch one step darker than your base for hover and two steps darker for active. Because the steps are perceptually even, every button in your system will darken by the same visual amount.
Do the shades ramps always start at white and end at black?
Yes, the endpoints are always #FFFFFF and #000000 so the full range is visible. In practice you drop the first and last swatch and keep the interior steps, which is why odd counts like 11 or 13 work so well.
Is there a limit on how many shade steps I can create?
The slider runs from 5 to 21 in increments of two, so counts are always odd and your base color always sits exactly in the center of the ramp. Twenty-one steps is useful when you want fine-grained control for data visualization ramps.
How does Copy all format the shade list?
It produces one line of uppercase hex codes separated by commas and spaces, in ramp order from lightest to darkest. Paste it into a spreadsheet, a config file, or a Slack message and the order is preserved.