Color Shades

What this tool does

You have a colour you like. The problem is that one colour is rarely enough: you need a lighter version for a background, a darker one for text, and a few steps in between for buttons and borders. Mixing those by eye is awkward, and it is easy to end up with a set that does not quite hang together.

That is what this does, for any colour at all. You give it a colour, and it builds the whole run of that colour in even steps, each with its HEX, RGB, HSL, and HSV codes ready to copy. It is the general-purpose version of the shade tools, so if you already know you want a specific colour, there are dedicated pages for it, while this one happily takes whatever you throw at it.

How to use it

1. Set a base colour. The tool opens on a colour with its Hex shown. Use Change Color or the Color Picker to set the one you want, or paste any hex in.
2. Choose how many shades. The Color Shades number sets how many the tool generates, ten to start, and a higher value gives a finer gradient.
3. Copy the codes. Each shade is listed with its HEX, RGB, HSL, and HSV, ready to use anywhere.

It works the same for any starting colour, bright or muted, light or dark. Whatever you put in, you get its lighter and darker steps back, evenly spaced and ready to use.

How it works

The tool runs on TinyColor, a colour library that lightens and darkens any colour cleanly rather than just scaling its numbers. It takes whatever colour you give it, moves it toward white on one side and black on the other in even steps, and writes each one out in the four code formats.

The reason this matters is that lightening a colour properly is not as simple as it sounds. Crudely multiplying the red, green, and blue values tends to wash colours out unevenly, so some steps look bigger than others. A good colour library spaces the steps so they feel even to the eye, which is what makes the whole scale usable rather than just a list of values.

Shades, tints, and tones

The word shade gets used loosely, but it actually has a precise meaning, and it helps to know the family it belongs to. Strictly speaking, a shade is a colour with black added to it, making it darker. A tint is the opposite, a colour with white added, making it lighter. A tone is a colour with grey added, making it more muted. Together, tints, shades, and tones are all the ways you can vary a single colour without changing the colour itself.

In everyday use, though, people say shades to mean all of these at once, the whole spread of lighter and darker versions of a colour, which is exactly what this tool produces. So when you generate a run here, you are really getting the tints of your colour on the light side and the shades of it on the dark side, with your original sitting somewhere in the middle.

Reading the four codes

Every shade comes with four codes, and each is useful for something different. HEX, the six-character code like #3B82F6, is the one you will paste into CSS most often. RGB gives the same colour as amounts of red, green, and blue, which is handy in code and design tools. HSL and HSV describe a colour by its hue, saturation, and lightness or value, which makes them the easiest to reason about: to get a darker shade, you mostly just lower the lightness.

Having all four side by side saves you converting between them, but it also teaches you something. Watch the HSL lightness number climb as you move up the scale and fall as you move down, while the hue stays put, and you can see exactly what lightening and darkening a colour really does to its underlying values.

Why one colour is never enough

Real designs are built from scales, not single colours. Think about any interface: there is a pale version of a colour behind a section, a stronger version on a button, an even deeper one for the text on that button, and slightly different versions again when you hover or when something is disabled. That is one colour doing five or six jobs, and each job needs its own step.

Picking those steps as a matching family, rather than guessing at separate colours, is what makes a design look considered. A consistent scale of one colour reads as deliberate and professional, where a handful of unrelated colours quickly looks messy. Generating the scale from a single base is the quickest way to get that coherence without fussing over each value by hand.

Building a palette from any colour

The simplest strong palette is one base colour plus its scale. Use a pale step as a surface, a mid step for buttons and links, and a deep step for text, and you already have a clean, coherent look from a single colour. Most of the time that is genuinely enough.

When you want more, add one more base and generate its scale too, a neutral grey to carry text and structure, or an accent colour for highlights and calls to action. Two or three generated scales, used consistently, will cover almost any project. The trick is restraint: let each colour bring its own range rather than reaching for more colours, and the whole thing stays tidy.

Questions people ask

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

A shade is a colour with black added, so it is darker. A tint is a colour with white added, so it is lighter. A tone is a colour with grey added, so it is more muted. In casual use, shades often means all three.

What do HEX, RGB, HSL, and HSV mean?

HEX is the six-character code used in CSS. RGB describes a colour as amounts of red, green, and blue. HSL and HSV describe it by hue, saturation, and lightness or value, which makes lightening and darkening easy to follow.

How many shades should I generate?

It depends on the use. Ten is a sensible default and enough for most palettes. Generate more when you want a smooth gradient or a detailed scale, and fewer when you want bold, clearly separated steps.

Can I use any colour?

Yes. Paste any colour in as the base, bright or muted, light or dark, and the tool builds the lighter and darker steps of that colour, so you get a matching set for surfaces, text, and accents.

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. Tints and shades, the definitions of shade, tint, and tone. Wikipedia. https://en.wikipedia.org/wiki/Tints_and_shades