Colour Shades and Palette Generator

How it works

Type one colour into the left box — #2F6FED, rgb(47, 111, 237) and hsl(220, 84%, 56%) are all accepted, and if you paste several lines each one gets its own palette. Then choose what you want. The tints and shades option holds hue and saturation still and walks lightness from 90% down to 10%: ask for 7 colours and #2F6FED becomes a seven-step ladder running from #D0DFFB at the light end to #04132F at the dark end. The complementary option jumps 180 degrees across the wheel and hands you an accent colour; analogous spreads neighbours across ±30 degrees, and triadic returns three colours 120 degrees apart. Every row prints HEX, RGB and HSL side by side, and the swatches under the output carry the same HEX labels. If you plan to use a light tint as background and a dark shade as text, measure the pair with the contrast checker before committing to it.

This tool is also known as color shades generator, tints and shades of a hex color, lighter and darker shades of a colour, complementary color finder, analogous color palette generator.

What is Tint?

A tint is a lightened version of a colour. In paint it is made by stirring white into the pigment; on screen it is produced by raising the lightness value in HSL. The two routes do not give the same result: adding white also lowers saturation and washes the colour out, while moving lightness alone keeps the colour's identity intact. In interfaces tints usually carry the surfaces that should stay in the background — page backdrops, selected rows, disabled buttons.

What is Shade?

A shade is a darkened version of a colour and works in the opposite direction to a tint: black added in paint, lightness lowered on screen. Shades earn their keep wherever something has to step forward — the hover state of a button, text meant to be read on a light background, borders and dividers. The one thing to watch at the dark end is that below roughly 10% lightness different shades stop being distinguishable from each other and from black.

What is Lightness?

Lightness is the third component of the HSL model and places a colour between black and white as a percentage: 0% is pure black, 100% pure white, and 50% is where a colour appears at its most saturated. Every tint and shade in this tool is produced by moving this single number. Where lightness reaches 0% or 100% the hue and saturation values stop meaning anything, which is why the ladder is kept between 90% and 10%.

What is Complementary colour?

A complementary colour sits directly opposite another on the colour wheel, 180 degrees away: orange complements blue, green complements red. Placed side by side they push each other forward as hard as two colours can, which makes a complement the natural candidate for an accent. The same property makes them tiring over large areas, where they produce a shimmering edge — safer to make the complement the colour of one button than the colour of a whole page.

What is the difference between analogous and triadic harmony?

Both build a palette by travelling around the colour wheel; only the distance changes. Analogous harmony stays inside a narrow ±30 degree arc, so the colours read as one family and produce a calm, unified surface — ideal for backgrounds and fills. Triadic harmony splits the wheel into three equal 120 degree parts, and the colours separate clearly, which is what you want when three data series have to be told apart in the same chart. Roughly: analogous builds unity, triadic builds distinction.

Why the ladder is built on lightness

There are two common ways to lighten a colour: mix white into it, or raise the lightness value in HSL. Mixing white also drags saturation down, so the colour fades as it lightens and a brand colour drifts towards grey within a couple of steps.

This tool keeps hue and saturation fixed and moves lightness alone. What comes out is an evenly spaced ladder that stays in the same family from the light end to the dark end — exactly what an interface theme needs.

One caveat: the eye separates steps poorly at the extremes. On a ten-step ladder the two neighbours at each end can look almost identical. That is not a bug, it is how vision works.

Which harmony for which job?

The four options are not interchangeable; the right one depends on the role the colour has to play.

• Tints and shades → single-colour themes, button states, borders and surface layers
• Complementary → one accent that has to be noticed (alert badge, primary call to action)
• Analogous → calm backgrounds and chart fills that should read as one family
• Triadic → three data series that must stay clearly apart in the same chart

Frequently asked questions

What is the difference between a tint and a shade?

A tint is the lighter version of a colour, a shade the darker one. This tool produces both on one ladder: the upper rows are tints, the lower rows shades.

If I paste the generated HSL into CSS, do I get exactly the same colour?

Almost. HSL values are rounded to whole numbers for readability, while the HEX is computed from the unrounded figures; the two can differ by one unit, which is invisible. Use the HEX when an exact match matters.

How many steps does a scale need?

Five is enough for small interfaces. If you colour the default, hover, pressed and disabled state of a button separately, seven works better; a full design system is more comfortable with ten.

Are my colours sent anywhere?

No. Generation runs entirely inside your browser; the colour codes you type are never sent to a server or a third party.