Darken Color

What this tool does

You have a colour, and you need a darker version of it. Perhaps you want a deeper shade of your main colour for text, a stronger tone for a pressed button, or a richer variant for a border or shadow. Trying to eyeball a darker colour that still matches is awkward, when what you actually want is the same colour, just deeper.

That is what this does. You give it a colour and say how much darker you want it, and it returns the darkened result in the usual formats. It holds on to the character of your original and simply lowers its lightness, which is the reliable way to make a deeper shade that plainly belongs to the colour you started from.

How to use it

1. Enter your colour. Type or paste your starting colour, then choose how much to darken it, using the slider or an amount.
2. Read the darker colour. The tool shows the darkened result next to your original, with a swatch and its codes.
3. Copy what you need. Take the darkened colour in whichever format your work requires.

Choose a small amount for a slightly deeper tone or a larger one for a much darker colour, adjusting until it looks right beside your original.

How it works

The tool takes your colour, considers it as hue, saturation, and lightness, and lowers the lightness by the amount you set. It leaves the hue and the saturation untouched, so the colour remains the same colour and only its lightness drops. This is done by TinyColor, which reduces the lightness and returns the darker colour.

Since just one of the three properties moves, the result is easy to predict. Nothing is being mixed in and no new colour is being guessed at; your exact colour is simply moved down the light-to-dark scale. That is why a darkened colour still reads as part of the same family, only deeper, instead of turning into something that no longer matches.

What lightness means

Lightness, the L in HSL, measures how light or dark a colour is, from black at one end to white at the other. A lightness of zero is black whatever the hue, and a lightness of one hundred percent is white. The pure colour lives near the middle, with paler versions above it and darker versions below.

Describing a colour like this keeps how dark it is apart from what colour it is. The hue settles the colour, red or green or blue, the saturation settles how vivid it is, and the lightness on its own decides how near it sits to black or white. That split is what allows a tool to lower the lightness by itself, making a colour deeper without changing its actual colour.

How darkening a colour works

Darkening means moving a colour down the lightness scale, toward black. The hue and the saturation stay put, so it holds its colour, but it loses lightness and grows deeper. A small drop gives a slightly richer tone; a larger one takes it well down toward black, until at the very bottom it would become black outright.

This is the clean way to make what designers call a shade: the original colour with black effectively added. Because the hue never shifts, the shade stays clearly tied to the colour you started with, which is just what you want for text, deep accents, and pressed states that need to feel like the strong, dark relative of the main colour rather than a different one.

Why darken a colour

The usual reason is building the darker end of a palette. One base colour on its own rarely covers everything; you also need deeper versions for readable text, strong headings, active states, and edges that need more weight. Darkening the base gives you those while keeping the whole range feeling like a single, coherent set.

It also helps with contrast and depth. Text often needs to be a darker shade of a colour to stay legible on a light background, a pressed button usually darkens to signal the press, and shadows and borders read better as deeper tones of the colour they sit against. In each case you want the same colour, stronger and deeper, and lowering its lightness is the direct route.

How much to darken

As with lightening, modest amounts do most of the useful work, so it pays to begin small. Small steps give you the deeper tones that designs tend to call for, the slightly richer and the solidly darker, and it is best to raise the amount bit by bit while watching the result against your original rather than leaping to a large change.

There is a floor to bear in mind, though. Keep darkening and the colour heads toward black, and beyond a point different colours all collapse into much the same near-black, losing what made the original distinct. If a darkened colour is turning muddy and hard to tell from black, ease the amount back up until it clearly reads as a deeper version of your colour rather than as almost-black.

Questions people ask

How do I darken a colour?

Enter the colour, set how much darker you want it, and the tool lowers its lightness and returns the result. Your original stays visible for comparison.

Does darkening change the colour?

Only its lightness. The hue and saturation stay the same, so it remains the same colour, just a deeper version, which keeps a shade clearly tied to the original.

What is a shade?

A shade is a darker version of a colour, effectively the colour with black added. Darkening a colour is how you make one, useful for text, deep accents, and pressed states.

Can I darken a colour too far?

Yes. Push it far enough and it heads toward black and loses its character, turning muddy. Ease the amount back until it reads clearly as a deeper version of your colour.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. Lightness, how light or dark a colour is. Wikipedia. https://en.wikipedia.org/wiki/Lightness
3. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor