ColorKitOne color, three families
Shades, tints and tones side by side
Free and without an account: give this page one color and it builds three families next to each other — white added, black added and 50% gray added — at 3 to 12 steps each. Every swatch carries its L* and its chroma, which is where the useful surprise lives: six steps toward gray move #2563eb by 5.8 points of lightness while stripping 85% of its chroma, so a tone mutes a color rather than darkening it. Each column copies as a hex list and the full sheet downloads as an editable SVG.
- 100% free
- No signup
- 3 families at once
- Up to 12 steps
- SVG swatch sheet
Press Ctrl+V anywhere on the page to drop in the color you want three families of — no need to click the field first.
Tints
+ white- #4479ee53 / 67
- #6390f161 / 55
- #82a6f468 / 43
- #a2bcf676 / 32
- #c1d2f984 / 21
- #e0e9fc92 / 10
Shades
+ black- #2055c940 / 71
- #1a47a833 / 61
- #15398626 / 51
- #102a6519 / 40
- #0b1c4311 / 28
- #050e224 / 14
Tones
+ 50% gray- #3267dc46 / 69
- #3f6bcc47 / 58
- #4c6fbd48 / 46
- #5974ae49 / 35
- #66789f50 / 23
- #737c8f52 / 12
Each swatch shows L* then C*: perceived lightness on a 0-100 scale and chroma, the distance from the gray axis. Read the tone column downwards and watch C* collapse while L* barely moves — that is the difference between muting a color and darkening it.
How to build shades of a color
Pick the color, pick the resolution, and read the two numbers that tell you which family you actually want.
Enter the color the ramps grow from
Type a hex code, an rgb() or hsl() value or one of the 148 CSS keywords into the field; the base sits in its own bar above the columns with its L* and chroma, and it is the only row the three families share. While the string is incomplete the table keeps showing #2563eb rather than flickering to black, and the field turns orange so you know the ramps are not yours yet.
Choose how finely to slice it
The slider runs from 3 to 12 steps per column. Step n is a mix at n/(steps+1) of the way to the target, which is why no column ever repeats the base and no column ever reaches pure white, pure black or pure gray — those endpoints are not shades of your color, they are the thing you mixed it with. Six steps is enough for a hover-and-pressed pair; twelve is for picking one swatch out of a fine gradient.
Read the numbers, then take the ramp with you
Each swatch prints L* then chroma, so the columns can be compared rather than admired: watch the tone column hold its lightness while chroma collapses. Copy any column as a plain hex list, or press Download SVG sheet for a 39-patch file with the hex printed on each patch — real rect and text nodes, so it stays sharp in a slide and can be recolored later in an editor.
Technical specifications
| Families produced | Three at once: tints toward #ffffff, shades toward #000000, tones toward #808080 |
|---|---|
| Steps | 3 to 12 per column, placed at n/(steps+1) so neither the base nor the mixing color appears in the ramp |
| Mixing space | Channel-wise sRGB, the same arithmetic a design tool performs when it drops your color's opacity onto a white artboard |
| Metrics on every swatch | CIE Lab L* and LCH chroma, rounded to whole numbers |
| Worked example | #2563eb at L* 46.1 and chroma 80.1 → sixth tint #e0e9fc (L* 92.1, chroma 10.4), sixth shade #050e22 (L* 4.2, chroma 13.8), sixth tone #737c8f (L* 51.9, chroma 11.7) |
| Copy | One click per column gives a newline-separated hex list of that family |
| SVG sheet | 39 rect and 39 text nodes at twelve steps, under 5 KB, 64px patches, no embedded bitmap |
| File handling | The sheet is assembled as a string in the page and handed straight to the download — it is never uploaded to build it |
Frequently asked questions
What is the difference between a tint, a shade and a tone?
A tint is your color mixed with white, a shade is mixed with black and a tone is mixed with gray — and the three behave nothing alike. Taking #2563eb six steps toward each: the last tint is #e0e9fc at L* 92.1, the last shade is #050e22 at L* 4.2, and the last tone is #737c8f, which has moved only 5.8 points of lightness while chroma fell from 80.1 to 11.7. The tone is the one people mean when they say a color feels dusty or expensive.
Why do my tints lose their color when HSL says the saturation never changed?
Because HSL saturation and perceptual chroma are not the same measurement. Every tint of #2563eb reports S 83% in HSL — the number simply does not move — while chroma falls from 80.1 at the base to 10.4 at the sixth step. HSL saturation describes the position between the gray axis and the most vivid color available at that lightness, and there is very little color available at 92% lightness; chroma describes the actual distance from gray, which is what your eye is reporting.
Is a shade the same as Sass darken() or a lower HSL lightness?
No, and the gap is large enough to notice. darken(#2563eb, 20%) subtracts 20 points from HSL lightness and lands on #0e3b9c at L* 28.3, whereas mixing 20% black gives #1e4fbc at L* 37.0 — nearly nine points of perceived lightness apart from two operations that both call themselves “20% darker”. Sass deprecated darken() in favour of color.adjust() for related reasons; if you want a lightness change rather than a mix, do it in HSL deliberately.
Why does the last shade never reach black?
Because pure black is not a shade of anything — it is the color you are mixing with. The steps are placed at n/(steps+1), so a six-step column stops at 6/7 of the way and keeps a trace of the hue: the darkest step of #2563eb is #050e22, which still measures chroma 13.8 and reads as very dark blue rather than as black. If you need the endpoint, it is #000000 and it does not need a generator.
Do the steps look evenly spaced?
Reasonably, for a mid-lightness color, and less so as the base moves toward either end. The six tints of #2563eb step L* by 7.0 to 7.9 points each, which the eye reads as even; the same six tints of #f59e0b, which starts at L* 72.2, only have 27 points of lightness left to spend and step by 3.5 to 4.2. When the goal is a ramp with genuinely equal perceptual steps regardless of the base, the lightness has to be set in LCH rather than reached by mixing.
Does a color with transparency survive the ramp?
Yes — alpha is carried through untouched and the output grows to eight-digit hex to show it. Each family mixes toward white, black or gray at your color's own alpha, so a 60% translucent blue produces 60% translucent tints rather than sliding toward opaque. Remember that a translucent swatch has no fixed appearance until it is composited over something.
What is in the downloaded SVG?
A three-column sheet of rect elements with the hex code drawn as text on each patch, sized 64px per swatch. It stays under 5 KB even at twelve steps, contains no embedded bitmap and no font file, and every fill is editable, so a designer can drop it into Figma and pull individual swatches out of it.
About tints, shades and tones
The three words are not interchangeable, though most software treats them as if they were. They come from a way of describing color that predates screens: a hue is the pure pigment, adding white gives a tint, adding black gives a shade and adding gray gives a tone. Every one of those is the same operation with a different partner, which is why this page and the color mixer are running identical arithmetic — the mixer lets you choose the second color, and here it is fixed at white, black and #808080 so the three results can be compared in one glance.
What the comparison shows is that the tone column is the odd one out, and it is also the one interfaces need most. Lightness barely moves along it while chroma falls away, which is precisely the recipe for a muted surface color that still belongs to the brand rather than being another gray. The tint and shade columns, meanwhile, quietly demonstrate the most common misunderstanding in day-to-day color work: HSL saturation stays fixed at 83% all the way down the tints of #2563eb while chroma drops by 87%, because HSL saturation is relative to what is achievable at that lightness rather than absolute. If you want to see the same color expressed in the cylindrical model those percentages come from, HEX to HSL spells it out.
Mixing is the right tool when you want a family that clearly descends from one color, whether that is a brand hex or a swatch you locked on the random generator. It is the wrong tool when you need eleven steps that look evenly spaced no matter which hue you started from, because equal mix weights do not produce equal perceptual steps once the base sits near either end of the lightness range. That job belongs to a ramp built in LCH, which is what the Tailwind scale generator does, and a full interface set with contrast already checked comes from the scheme generator. The downloaded sheet is genuine SVG rather than a screenshot, so SVG to PNG will rasterize it at whatever width a ticket or a slide deck needs.
Where the ramps are built
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
One SVG sheet is all this page can hand you, and it is assembled in memory before your browser saves it; the temporary URL behind it dies the same instant. Nowhere but your disk ends up with a copy.