How to use it
One color is rarely enough. A button needs a hover state, a card needs a barely tinted background, a heading needs something dark enough to read. A shade scale gives you all of them from one starting point.
- Type or paste your color at the top. Hex,
rgb(),hsl()andoklch()all work, and the color well opens your system picker. - Read the scale. Eleven steps run from 50, the lightest tint, to 950, the deepest shade, and the step closest to your own color is labeled base.
- Adjust the curve. The method sets how the steps are spaced; the sliders set how light the top goes, how dark the bottom goes, and how colorful the middle stays.
- Lock any step you want to protect, then nudge it lighter or darker. Locked steps survive every other change until you unlock them.
- Copy a single step by clicking it, or pick an export format and copy the whole set as Tailwind, CSS variables, an SCSS map or design tokens.
Working with a full palette? Add more colors to the set, or arrive from the palette generator and every color gets its own scale.
How the scales are built
Every method uses the same eleven positions along the ramp, spaced the way Tailwind's own palette is: close together at the light end, further apart toward the dark end. What differs is the color space they are measured in.
OKLCH curve
The default. Your color becomes lightness, chroma and hue, and the steps are placed along the lightness axis between the two ends you set. Chroma follows a gentle arc that peaks mid-ramp, because a very light or very dark step at full chroma looks artificial. The hue never moves, and anything a normal screen cannot show is pulled back to the nearest color that fits.
HSL tints and shades
The classic approach: keep the hue and saturation, move the HSL lightness. It is what most older CSS tooling does, and it gives a punchier ramp. The trade-off is that HSL lightness does not match what your eye sees, so the same numeric step can look like a big jump in one hue and a small one in another.
Mix with white and black
The most literal reading of "tint and shade": step 500 is your color untouched, lighter steps are blended toward white and darker steps toward black, the way CSS color-mix() in sRGB would do it. Use it to match a design that was built by hand this way. The intensity slider does nothing here, because mixing already decides the saturation.
Why the contrast columns matter
A ramp is only useful if you know where text can go. The two columns give the WCAG 2 contrast ratio for white and black text on each step, floored rather than rounded up: AAA at 7:1, AA at 4.5:1, large text only between 3:1 and 4.5:1. That shows where the flip happens — the step where buttons stop using dark labels and start using light ones.
Everything is calculated in your browser and nothing is uploaded. Your colors and settings live in the address bar, so copying the link sends the exact scale to someone else.
Questions
What is the difference between a tint and a shade?
A tint is your color mixed toward white, so it gets lighter. A shade is your color mixed toward black, so it gets darker. A 50-950 scale holds both: the low numbers are tints, the high numbers are shades, and your own color sits somewhere in the middle.
Why does the scale run from 50 to 950?
It is the numbering Tailwind CSS made common, and most design systems now follow it: 50 is the lightest wash for a page background, 950 is close to black, and 500 is roughly the color you would name if asked. Eleven steps cover backgrounds, borders, text and hover states without leaving dozens of unused values.
Which method should I choose?
Start with the OKLCH curve. It spaces the steps by perceived lightness, so 200 to 300 is about the same jump as 700 to 800, and it is the model Tailwind v4 uses. Choose HSL for the more saturated look older CSS tooling produces, and mixing when you are matching a design built by literally blending in white or black.
What is OKLCH, and why use it for shades?
OKLCH describes a color as lightness, chroma (how colorful it is) and hue. Its lightness axis is built to match human vision, so moving it by a fixed amount changes apparent brightness by a fixed amount. HSL does not: pure yellow and pure blue are both 50 percent lightness there, but yellow looks far brighter. That is why an OKLCH ramp feels evenly spaced.
Can I keep my exact brand color in the scale?
Yes. Leave the pin option on and your color is placed unchanged at whichever step its lightness is closest to, labeled base. Everything else is built around it. Turn the pin off if you would rather have a perfectly even ramp and do not mind the base shifting by a digit or two.
How do I use these shades in Tailwind CSS?
For Tailwind v4, copy the @theme block into your CSS entry file. Each line defines a custom property such as --color-indigo-500, and Tailwind turns it into the usual utilities like bg-indigo-500 and text-indigo-700. For Tailwind v3, copy the config export instead and merge the colors object into your tailwind.config.js.
Do the contrast numbers mean my text is accessible?
They give the WCAG 2 contrast ratio between each step and white or black text, floored rather than rounded up, so 4.49 never gets to call itself AA. Normal text needs 4.5:1 for AA and 7:1 for AAA; large text, meaning 24px or 18.66px bold, needs 3:1. That is the color part of readability, not the whole of an accessibility review.
Does my color leave the browser?
No. The scale is calculated in your browser, nothing is uploaded, and there is no account. Your colors and settings live in the address bar, and the last palette you worked on is kept in this browser's local storage so the other tools can pick it up.