Color Shades Generator

Generate tints and shades of any base color.

This tool runs entirely in your browser. Your data is never uploaded, never stored, and never leaves your device.

Expands one base colour into an eleven-step scale labelled 50 to 950, mixing it progressively toward white for the five tints and toward black for the five shades.

How to use it

1Click the Base color swatch and pick a colour; its hex appears in the box next to it.
2Read the eleven swatches, with your own colour sitting untouched at 500 (base).
3Click a single swatch to copy just that hex — the label flips to "Copied!" for a moment — or use the Copy button to take the whole scale as one comma-separated list.

Example

Input: #6366f1
Output: 50 #f3f3fe · 500 (base) #6366f1 · 950 #141430

The mixing is linear on the raw red, green and blue channels, not a perceptual lightness ramp, so the scale is even in arithmetic but not to the eye — saturated blues wash out fast at the light end. The extremes stop short too: 950 is 80% of the way to black rather than black. Each label's text colour is chosen from a weighted brightness figure, which is why the caption flips from white to near-black somewhere around the 300 step.

What happens to your data

The picker is a native input of type color, so the choice is made in your operating system's own colour dialogue and only the resulting hex ever reaches the page. The eleven steps are arithmetic on those three channel values; clicking a swatch calls the browser's clipboard write, and if the browser refuses permission the click is silently ignored rather than routed anywhere else.

Last updated August 2026

You have one hex code — off a logo, a brand sheet, or a client who sent a single swatch — and the interface needs ten more colours out of it: a hover state a step darker, a pale background for a callout, a border that reads as the same colour but quieter.

Decide first whether you want an arithmetic ramp or a perceptual one, because the two disagree exactly where it matters. An arithmetic ramp blends the colour toward white and toward black by fixed proportions: quick, predictable, and what happens here. A perceptual ramp works in a space such as HSL or OKLCH, holding chroma roughly steady while lightness moves, so that the steps look evenly spaced rather than merely being evenly spaced. For backgrounds, borders and hover states it is usually enough; it fails when someone lays the swatches out and judges the gaps by eye.

Know too that a scale cannot add range the base colour does not already have. Every step is derived from the one you picked, so a very dark or very light start leaves half the ramp nowhere to go — from pure black, all five dark steps come back pure black. A logo colour often makes a poor step 500.

The common mistake is reading the numbers as measurements. They are labels: 700 in one palette and 700 in another share nothing but a name, and neither is guaranteed to pass a contrast check.

How it works

Toolvore reads the hex into red, green and blue values, then interpolates each channel toward 255 for the light steps and toward 0 for the dark ones, by a fixed proportion per step: 92, 85, 68, 50 and 28 per cent of the way to white, and 16, 32, 48, 64 and 80 per cent of the way to black. Channel values are rounded and clamped to 0–255. Blending toward white in sRGB raises all three channels at the same rate, which drains saturation faster than it adds lightness, so the pale end drifts toward a tinted grey and loses the character of the hue. And because each step takes a proportion of the distance remaining, a base already near one extreme yields steps a few 1/255 apart that round to nearly the same colour. Each caption flips between light and dark text on a weighted brightness sum, not a contrast ratio — a heuristic for the label, not a check you can borrow.

Common use cases

Deriving hover, pressed and disabled states from one brand colour
Filling in a 50 to 950 ramp for a colour that arrived as a single hex
Picking a pale tint for a callout background that still reads as the brand
Sketching dark surfaces from a colour specified only for light mode
Comparing two brand colours by how each holds up when lightened

Frequently asked questions

What is the difference between a tint, a shade and a tone?＋

A tint is your colour mixed with white, a shade is your colour mixed with black, and a tone is your colour mixed with grey. Everyday use has collapsed all three into the word shades, which is why a set of lighter steps still gets called a shade scale. The two directions behave differently: adding white strips saturation quickly, so tints go chalky, while adding black holds the hue better but compresses the difference between one dark step and the next. If the light end disappoints while the dark end goes muddy, that asymmetry is why.

What do the numbers 50, 500 and 900 in a colour scale mean?＋

They are a naming convention rather than a measurement, popularised by Material Design and carried on by Tailwind and most design-token systems since. Bigger number means darker, 500 sits in the middle as the anchor, and 50 is the palest usable tint rather than white. None of it is standardised: two palettes can both have a 700 at quite different lightness, so a step number only means something inside the palette it came from. The value is consistency in code — a token named surface-100 tells the next developer what they are reaching for.

Why do the lightest steps look washed out and slightly grey?＋

Because mixing toward white in sRGB raises red, green and blue at the same rate, and the distance between the channels is what carries saturation. Close that gap and the colour fades toward neutral faster than it gets lighter — precisely the blend used for the light half of this scale. Saturated blues, purples and reds show it worst, since their channels start furthest apart. sRGB values are gamma-encoded rather than linear light, so an arithmetic midpoint is not the visual midpoint either. Where pale steps carry weight, build them in OKLCH instead.

Which step of a scale is safe for text?＋

None by default, and it has to be measured rather than guessed. WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text or interface components. For a mid-saturation hue on white you are usually somewhere around 700 to 900 before that is met, but a yellow or a light green may not reach it at any step, and a colour that passes on white can fail on a pale tint of itself. Nothing here measures contrast — the swatch label picks white or near-black on a brightness threshold.

Is my colour sent to a server?＋

No. The picker, the arithmetic and the copying all happen inside the page, and there is no upload step for a colour to travel through. The only thing that leaves is what you put on your own clipboard. One quirk: copying a single swatch fails silently if the browser blocks clipboard access — that path has no error state, so the label stays as the hex instead of flipping. The button that copies the whole scale does report a failure and asks you to press Ctrl+C, so it is the way round a blocked clipboard.

How many steps does a palette actually need?＋

Fewer than eleven, for most projects. A typical interface uses four or five from any one hue: a pale surface, a border, the base, a darker hover, and a dark step for text. Ten and eleven-step ramps exist because design systems have to cover every product built on them, not because one screen needs that many. The risk of generating the full set is that every step becomes available, so two people pick 300 and 400 for the same job and the interface quietly loses its coherence. Decide which steps become named tokens.

Why do my dark steps look identical when I start from a very dark colour?＋

Because each step takes a proportion of the distance that is left, not a fixed amount of light. From a base near black there is barely any distance left, so the five dark steps land within a few 1/255 of each other and read as one colour; from pure black they are all identically black. The same collapse happens at the other end with a near-white base. If you need both a usable pale tint and a usable dark step, take a mid-lightness version of the colour as 500.

Can I get the scale as RGB, HSL or CSS variables?＋

The output is hex, from a single swatch and from the whole-scale copy alike, and that copy arrives as a plain comma-separated run with no step labels attached — so the order carries the meaning, lightest first through to darkest. Pasting them into a token block works as it stands, since CSS accepts a hex code anywhere a colour is expected, including as the value of a custom property. Converting to rgb() means reading each pair of hex digits as a number between 0 and 255. HSL and OKLCH need a real conversion.