Color Shades Generator

Feed most free shade generators a hex and they walk it evenly up toward white and down toward black, call that a scale, and hand it back. It looks fine as a strip of chips, but drop it into a real interface and the pale tints glow like a highlighter while the deep shades go muddy and gray. That naive straight-line ramp is a big part of why a lot of side projects look slightly cheap, and it's the exact thing this tool is built to fix.

So it gives you two rows instead of one. The top row is the plain lightness ramp, lighter toward white on the left, darker toward black on the right, your base marked dead center. That's the row you grab when you just want this-color-but-a-little-darker for a hover or a border and you want zero surprises. The bottom row is the one I actually care about: a 50-to-900 scale in the Tailwind and Material style that eases the saturation off at both ends and spaces the lightness unevenly, so it reads like colors from a real design system rather than ten evenly-spaced blends.

Type a hex, drag the picker, or hit Randomize, and every swatch recomputes instantly. Click any chip to copy its hex, grab the ramp with Copy all, or take the whole scale as ready-to-paste CSS variables. Free, no sign-up, and the math runs in your browser.

1. Set your base color. Type a hex into the field or click the swatch to pick one by eye. Both #3498db and 3498db work, and shorthand like #39d expands on its own.
2. Pick how many steps. The dropdown offers 5, 7, 9, or 11 for the tint-and-shade ramp, more steps for finer gradations, fewer for bigger jumps. They're odd numbers because your base sits dead center with the same count of tints and shades either side, so the number you pick is the number of chips you get. The 50-to-900 scale below is always ten steps, the convention every framework uses.
3. Read the two rows. Top is the literal lightness ramp with your base in the middle. Bottom is the designed 50-to-900 scale, where 500 is your base anchored at mid lightness.
4. Copy what you need. One click on any swatch copies its hex. Copy all gives you the ramp as a comma-separated list. Copy CSS variables hands you the scale as --color-50 through --color-900, ready to drop into a stylesheet.
5. No color in mind? Randomize drops in a fresh base so you can watch how any color's family falls out. Whatever you had stays put until you change it.

Blend evenly from white to your color to black in ten equal steps and you've built the obvious scale. It's also wrong in two specific ways, and both are why the second row exists.

Your eyes don't read lightness on a straight line. A drop from 90 percent lightness down to 80 barely registers, while the same ten-point drop from 20 down to 10 reads as a much bigger step. So evenly spaced numbers hand you unevenly spaced-looking colors, the pale tints bunch together and the dark end spreads apart. A scale that actually looks even has to spread the numbers out the other way, with the widest jumps landing in the light-to-mid steps where your eye keeps compressing them and tighter ones closing in on black, where each drop already looks exaggerated. That uneven curve is baked into the 50-to-900 row.

Then there's saturation, which most generators leave alone entirely. Take a vivid blue and keep pouring white in, and the light tints go neon and washed out right where you wanted something calm to sit behind text. Pour black in and the dark shades lose their color and go dull. Real design systems ease the saturation down at both ends and hold it strongest through the middle, where the brand color should register hardest. That's built into the bottom row too, so the pale steps come out soft enough to sit behind body copy, the mids stay punchy, and the deep steps read rich instead of dead.

Most free tools stop at the straight-line version and call it a scale. The tuning in that bottom row is exactly the part they skip, and it's why the two rows answer two different questions. The tint-and-shade ramp is pure lightness, right for a hover one notch darker where you want the result predictable. The 50-to-900 scale is the designed one, meant to become the real color tokens you commit and build an interface on top of.

If you've touched Tailwind, Material, or Radix, the numbering is already familiar. 50 is the palest surface tint, 500 is your base, 900 is the deep anchor. In practice 50 and 100 are page and card backgrounds and the faint fill behind a highlighted row. The 200s and 300s make good borders and dividers. 600 and 700 become your hover and pressed states, dark enough that a button visibly answers a click. 800 and 900 carry strong text, or flip to surfaces in dark mode. Assign every state its own step and you stop inventing one-off colors mid-build, the slow drift that leaves one button a slightly different dark from the next.

Two neighboring steps don't have the contrast to work as text, and the numbering won't warn you about it. Your 400 next to your 500 looks perfectly distinct as two chips, but 400 text on a 500 background fails, because readability rides almost entirely on the lightness gap and those two sit close. For text, jump at least four or five steps, so a 500 background pairs with 50 or 900, never 600. When a pair has to be accessible, run it through a contrast checker against the WCAG minimum instead of trusting your eye.

Wiring it in is fast. Copy CSS variables, paste the block into :root, and reference var(--color-500) instead of raw hex everywhere, so a rebrand becomes a ten-value swap in one file rather than a find-and-replace across the codebase. Tailwind users can lift the same hexes straight into theme.extend.colors and get bg-brand-500 and hover:bg-brand-600 for free.