Color Shades Generator

What this tool does

When you are actually building something, you do not want to sit there mixing ten versions of a colour by hand. You want a complete set of one colour, evenly stepped from light to dark, generated for you in seconds and ready to paste straight into your work.

That is what this does. You give it any base colour, and it generates the full run of that colour in even steps, each with its HEX, RGB, HSL, and HSV codes ready to use. It is the workflow tool for the moment you have picked a colour and now need the whole scale of it to build an interface, a brand, or a palette.

How to use it

1. Set your base colour. When the tool loads it shows a colour and its Hex. Swap in your own through Change Color or the Color Picker, or paste any hex straight in.
2. Set the number of shades. The Color Shades box holds the count, ten by default. Turn it up for a smoother, finer scale.
3. Take the generated codes. Every shade comes with its HEX, RGB, HSL, and HSV, ready to drop into a project.

The base colour is the only real decision. Once it is set, the generator handles the rest, producing an even scale around it that you can use as it is or fine-tune to taste.

How it works

The tool runs on TinyColor, a colour library that generates even lighter and darker steps from any colour. It takes your base colour, builds an even series running from light to dark, and writes each step out in the four code formats.

The value of a generator is consistency. Doing this by hand, you tend to make some jumps bigger than others without noticing, so the scale comes out lumpy. Generating it means every step is spaced to match, so the lightest and darkest ends and everything between belong to one even, predictable series, which is what makes a generated scale so much easier to build on than a hand-mixed one.

Why generate instead of guess

It is tempting to just eyeball a lighter and a darker version of a colour when you need them. The catch is that the eye is bad at keeping steps even, so the versions you pick by hand tend to drift, one a big jump, the next barely different, and the scale ends up uneven in ways that quietly make a design feel off.

Generating the scale removes that guesswork. Because the steps are calculated rather than chosen, they are evenly spaced and repeatable, which means the colour you use for a hover state really does sit halfway between the resting and active states, and a surface two steps lighter than another genuinely looks two steps lighter. That evenness is invisible when it is right and obvious when it is wrong, and it is exactly what a generator gets you for free.

Using a scale in a design system

A generated scale maps neatly onto the way modern interfaces are built. Design systems usually store a colour as a numbered scale, something like colour-50 for the palest step up to colour-900 for the deepest, and then build everything from those steps. The pale steps become backgrounds and surfaces, the mid steps become buttons, links, and borders, and the deep steps become text and headings.

The real win is interactive states. A button needs one colour at rest, a slightly different one on hover, another when pressed, and a muted one when disabled, and a generated scale hands you all of those as neighbouring steps that already match. Naming the steps as tokens and reusing them keeps a whole product consistent, since every component pulls from the same generated set rather than a scatter of one-off colours.

Light mode, dark mode, and contrast

A full scale is what makes light and dark themes possible from one colour. In a light theme you lean on the pale steps for surfaces and the deep steps for text, and in a dark theme you simply flip it, deep steps for surfaces and pale steps for text. Because both ends come from the same generated series, the two themes feel related rather than like two separate designs.

The thing to watch throughout is contrast. Text needs to stand out clearly from whatever sits behind it to stay readable, which is the heart of the accessibility guidelines for colour. A generated scale helps here, because having the full range of light and dark steps on hand makes it easy to pair a light step with a dark one that has enough contrast between them, rather than being stuck with two values that are too close to read comfortably.

From one base to a full palette

One generated scale already does a lot, but a couple of them cover almost everything. Generate a scale for your main brand colour, then generate a second for a neutral grey to handle text, surfaces, and structure. Between them, those two scales will carry most of an interface on their own.

Add one more scale for an accent colour, used sparingly for highlights and calls to action, and you have a complete, flexible palette built entirely from generated steps. The discipline that keeps it clean is simple: let each base colour bring its whole range, lean on the neutral for most of the heavy lifting, and reserve the accent for the few places you want to draw the eye.

Questions people ask

Why generate a scale instead of picking colours by hand?

Because the eye struggles to keep steps even. A generator spaces them precisely, so the whole scale is consistent and repeatable, which makes states, surfaces, and themes line up properly. Hand-picked steps tend to come out uneven.

How many shades should I generate?

Ten is a good default and maps well onto a numbered design-system scale. Generate more for a smoother range or finer control, and fewer when you only need a handful of clearly distinct steps.

Can I generate a scale for any colour?

Yes. Set any colour as the base, and the generator builds an even scale of lighter and darker steps around it, ready to use for surfaces, text, states, and accents.

How do I use a generated scale for light and dark mode?

Use the pale steps for surfaces and deep steps for text in light mode, then flip it for dark mode. Keep an eye on contrast between paired steps so text stays readable in both themes.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor
3. World Wide Web Consortium (W3C), Web Content Accessibility Guidelines (WCAG), contrast. https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html