Every design system I have ever shipped started with a single brand color and then immediately needed a dozen more. One blue is never enough. You need a lighter blue for a hover state, a much lighter blue for a selected-row background, a darker blue for text that sits on a pale surface, and a muted blue for a disabled button that should not shout. When I was building the interface for toolz.dev, I kept opening a color picker, nudging the lightness slider, eyeballing whether the result still looked like the same family, and pasting hex codes into my stylesheet one at a time. It worked, but it was slow, and the results were inconsistent because "nudge until it looks right" is not a repeatable process.
So I built the Color Shades Generator. You give it one color and it gives you three complete scales, computed in the color space CSS Color Module Level 4 defines rather than by nudging hex digits: tints stepping toward white, shades stepping toward black, and tones stepping toward gray. This guide explains what those three words actually mean, how the math works, and how to turn a single brand color into a coherent palette you can drop straight into CSS.
TL;DR: A tint is your color mixed with white, a shade is your color mixed with black, and a tone is your color mixed with gray. Each keeps the original hue and only changes how light, dark, or muted the color looks. Paste a HEX, RGB, or HSL value, pick how many steps you want, and the generator builds all three scales at once, each swatch copyable as HEX, RGB, or HSL. Everything runs in your browser.
What is the difference between a tint, a shade, and a tone?
These three words come from traditional color theory, and they describe three different ways of changing a color without changing which color it fundamentally is. The distinction is worth getting right because designers, and increasingly design tokens, use the words precisely.
A tint is a color mixed with white. Adding white raises the lightness and softens the color. Pink is a tint of red, and baby blue is a tint of a stronger blue. Tints are what you reach for when you need pale backgrounds, subtle fills, and the lightest surfaces in an interface.
A shade is a color mixed with black. Adding black lowers the lightness and deepens the color. Maroon is a shade of red, and navy is a shade of blue. Shades give you the darker end of a scale: text colors, pressed-button states, and borders that need more weight than the base.
A tone is a color mixed with gray. Adding gray reduces the color's intensity without making it dramatically lighter or darker. Tones are the most underused of the three, and they are the secret behind palettes that feel sophisticated rather than garish. A toned-down color reads as calmer and more professional, which is why muted palettes dominate serious product design.
The important thing all three share is that they preserve the hue. A tint of blue is still blue, a shade of blue is still blue, and a tone of blue is still blue. That is what makes a set of tints, shades, and tones look like one family rather than a random assortment.
How is each scale actually calculated?
Under the hood, every swatch is a straight-line mix between two colors in RGB space. The generator takes your base color as a red, green, and blue triple, and it takes a target color, then it walks from one to the other in even steps. For tints the target is white, which is (255, 255, 255). For shades the target is black, (0, 0, 0). For tones the target is mid-gray, (128, 128, 128).
The mix for any single channel is simple arithmetic. To get a swatch that is thirty percent of the way from the base toward the target, you compute base + (target - base) * 0.30 for the red channel, then the green channel, then the blue channel, and round to whole numbers. A ten-step tint scale runs that calculation at ten percent, twenty percent, and so on up to a hundred percent, where the color has become pure white. The base color itself is included as the zero-percent swatch at the top of each scale, so you can always see where you started.
Because the mix happens per channel in RGB, the hue stays essentially fixed for tints and shades. Blending toward pure white or pure black changes how much light the color reflects but not its underlying character, so a tint and a shade of the same base read as the same color at different brightness. Tones can shift the perceived hue a hair, because gray sits at the neutral center and pulling toward it slightly desaturates every channel, but in practice the whole scale still reads as one color. If you want to inspect exactly how a given swatch lands across formats, the Color Converter will show you its HEX, RGB, HSL, and HWB values side by side.
Why not just change lightness in HSL?
A reasonable question is why the tool mixes in RGB rather than simply raising or lowering the L value in HSL. Both approaches produce a monochromatic scale, and both are valid. Mixing toward white and black in RGB is the classic painter's model of tints and shades, and it maps cleanly onto the words designers already use. It also keeps the endpoints honest: a hundred-percent tint is exactly white and a hundred-percent shade is exactly black, which is not always true when you only manipulate HSL lightness because of how saturation interacts with it. The generator gives you tones as a third scale specifically to cover the "less intense" axis that a pure lightness change does not address.
How many steps should I generate?
The generator lets you pick anywhere from two to twenty steps per scale, and the right number depends on what you are building. For a design system where you want a named ramp like blue-50 through blue-900, a larger step count gives you a fine gradient you can sample from. For a quick pair of hover and active states, three or four steps is plenty. My default is ten, because ten tints, ten shades, and ten tones from one base gives me a full working palette without an overwhelming wall of swatches.
More steps mean smaller jumps between adjacent colors, which is what you want when neighboring shades need to be visually distinct but close, like the alternating bands of a data table. Fewer steps mean bolder jumps, which suits a compact palette where each color has a clearly different job. There is no wrong answer, and because the tool recomputes instantly you can slide the step count up and down until the spacing looks right.
How do tints differ from lowering opacity?
A trap I fell into early was using opacity to fake a tint. It seems equivalent: drop a blue button to fifty percent opacity over a white page and it looks like a lighter blue. The problem is that opacity is not a color, it is a compositing instruction, and it depends entirely on whatever sits behind the element. That same fifty-percent blue over a dark surface becomes a muddy dark blue, and over a photo it becomes unpredictable. Your "light blue" changes identity depending on its background, which is the opposite of what a design system needs.
A tint solves this by baking the lightness into a real, opaque color. The swatch the generator gives you is a fixed hex value that looks the same no matter what is behind it, because it is fully opaque. When you need a consistent lighter version of a color that behaves predictably across every surface in your product, use a tint rather than a transparency. Reserve opacity for genuine transparency effects, like overlays and scrims, where you actually want the background to show through. Keeping those two ideas separate is one of the quiet habits that makes a palette feel solid rather than accidental.
How do I turn these scales into a usable palette?
A palette is not just a pile of colors, it is a set of assignments. Here is the workflow I use when I start from a single brand color. Take the base as your primary action color, the one on your main buttons and links. Reach into the tints for backgrounds: a very light tint for page or card surfaces, a slightly stronger tint for the hover state of a light element. Reach into the shades for text and emphasis: a deep shade for body copy that needs contrast against a pale tint, a medium shade for the pressed state of your primary button. Use a tone when you need the color present but quiet, like a disabled control or a secondary badge.
The one rule you cannot skip is contrast. A tint that looks lovely as a button background is useless if the label text on it fails to meet accessibility contrast requirements. Once you have chosen the pairs of colors that will sit on top of each other, run them through the Color Contrast Checker to confirm they clear the WCAG thresholds. Picking beautiful shades is the easy part. Making sure the text on them is readable is the part that separates a real palette from a mood board.
The table below shows how I typically map a ten-step scale onto interface roles.
| Swatch source | Typical role | Example use |
|---|---|---|
| Lightest tints | Surfaces and backgrounds | Page background, card fill, selected row |
| Light tints | Hover states on light elements | Button hover, list-item hover |
| Base color | Primary action | Main button, active link, brand accent |
| Medium shades | Pressed and active states | Button active, focused border |
| Dark shades | Text and high emphasis | Body text on light surfaces, headings |
| Tones | Muted secondary elements | Disabled controls, secondary badges |
How does this fit alongside other color tools?
The shades generator is one instrument in a small orchestra. It answers the question "give me more of this one color," but real palette work touches a few adjacent questions too. When you need harmonious colors that are not the same hue, like a complementary or analogous set, the Color Palette Generator builds those relationships. When you are sampling a starting color from an image or a design and need to read its exact value, the Color Picker gets you the hex code. And when your shades are destined for a CSS background that fades from one to another, the Gradient Generator turns two of them into a ready-to-paste linear-gradient.
The natural pipeline looks like this: pick or paste a base color, generate its tints, shades, and tones, verify the pairs you plan to stack against the contrast checker, and copy the winners into your stylesheet or design tokens. Every one of those tools runs entirely in the browser, so a brand color you have not announced yet never travels to anyone's server. If local-first tooling is a value you share, the piece on data privacy and online tools explains why I build everything that way, and the web developer toolkit collects the rest of the utilities that live in my daily workflow.
A quick worked example
Start with the brand blue #4466EE. Set the step count to ten and leave the copy format on HEX. The generator returns three columns.
The tints column begins at #4466EE and climbs toward white, passing through progressively paler blues until the final swatch is #FFFFFF. Somewhere in the middle you get a soft periwinkle that makes an excellent selected-row background. The shades column begins at the same #4466EE and descends toward black, giving you deep indigos suitable for text and pressed states, ending at #000000. The tones column begins at #4466EE and moves toward gray, producing muted slate-blues that read as calm and understated, ending at #808080.
From that one input you now have a background (a light tint), a hover fill (a slightly darker tint), a primary color (the base), a text color (a dark shade), and a disabled color (a tone). Click any swatch to copy it, switch the copy format to RGB or HSL if your project prefers those, and paste. What used to be twenty trips to a color picker is now one paste and a handful of clicks, and because the math is deterministic the palette is consistent every single time.
Frequently asked questions
What is the difference between a tint, a shade, and a tone?
A tint is a color mixed with white, making it lighter. A shade is a color mixed with black, making it darker. A tone is a color mixed with gray, which mutes it without changing whether it is light or dark. All three keep the original hue and only change how light, dark, or saturated the color appears.
How do I generate shades of a color?
Enter your base color, then read the shades column, which mixes the color with increasing amounts of black. Each row is a darker version of the original at an even step, and you can copy any of them as HEX, RGB, or HSL. Increase the step count for a smoother range of dark values.
How are the lighter and darker colors calculated?
Each scale is a linear mix of the base color toward a target. Tints blend toward white (255, 255, 255), shades blend toward black (0, 0, 0), and tones blend toward mid-gray (128, 128, 128). A 30% tint, for example, moves each red, green, and blue channel 30% of the way from the base to white.
What color formats can I paste in?
You can enter a HEX code (3 or 6 digits, with or without a leading hash), an rgb() value, an hsl() value, or a common CSS color name such as crimson or steelblue. The tool converts your input to RGB internally and reports every swatch in HEX, RGB, and HSL.
How many shades can I generate?
You can set between 2 and 20 steps per scale. Each scale also includes the original base color, so a 10-step setting gives you the base plus ten tints, ten shades, and ten tones. Fewer steps give bold jumps between values, while more steps give a fine gradient.
Can I build a monochromatic palette with this tool?
Yes. A monochromatic palette uses one hue at different levels of lightness and saturation, which is exactly what the tints, shades, and tones produce. Pick a base brand color and use its tints for backgrounds, the base for primary elements, and its shades for text or hover states.
Do the generated colors keep the same hue?
Tints and shades keep the hue almost exactly, because mixing with pure white or black changes lightness rather than hue. Tones can shift very slightly because gray sits at the center of the color space, but for practical design work the whole scale reads as one family of the same color.
Is the color shades generator free and private?
Yes. It is completely free with no signup and no limits. All parsing and color math run in your browser using client-side JavaScript, so the colors you enter never leave your device and the tool keeps working offline once the page has loaded.
