🎨 Utilities

Color Shades Generator

Generate shades and tints of any color. Click to copy the HEX, RGB or HSL code. Perfect for design systems and UI development.

Base color

Click any swatch to copy the HEX code

Shades

Tints

How to use?

Pick a base color from the picker or type a HEX code straight in. From it you get 10 darker shades plus 10 lighter tints. To copy the HEX code of any of them, just click on its square.

Shades and tints of any colour

A single colour rarely gets the job done. Buttons, states, backgrounds and borders all want that same colour in lighter and darker versions, and that's what holds a design system together. Pick a starting colour and the generator builds the whole scale of shades (darker) and tints (lighter) on its own.

Every variation arrives with its code ready to go. One click copies the hex value, the same one printed inside the swatch — the HSL conversion stays under the hood, used only to work out the scale. No more darkening and lightening the colour by eye and hoping the set stays harmonious: you get a coherent scale in one go, a solid base for your design system.

If you're a designer or developer who needs chromatic consistency, this clears up an annoying problem. The generation runs entirely in the browser, starting from the colour you set.

Frequently asked questions

Why is the first shade square identical to the color I picked?

Because the scale starts there. The ten shades come from multiplying the base color's lightness by 10/10, 9/10 and so on down to 1/10, so the first square uses the full factor and simply repeats your original color. The tints run the other way, pushing lightness towards 100%, which is why the last square in the second row is pure white. Across all twenty squares hue and saturation stay frozen: only the HSL lightness moves.

Does a click copy the value in RGB or HSL?

It always copies the hexadecimal. The tool converts to HSL internally, but only to build the scale; what lands on your clipboard is the #rrggbb code, the same one printed inside the square and shown in the hover tooltip. If your project wants rgb() or hsl(), copy the HEX and run it through a color converter. The green confirmation clears itself after a second and a half.

I typed a code into the text field and nothing changed. Why?

The field only takes the long form. The scale rebuilds when the text matches a # followed by exactly six hex digits, so #f00, names like tomato and rgb() values are dropped without a word, and the previous palette stays on screen. Type #ff0000 and all twenty swatches refresh instantly. One more thing that surprises people: picking pure black or pure white gives you a grey ramp, since saturation is zero in both and there is no hue left to preserve.

Related Tools

🖼️

Image Color Picker

Load an image and discover the color of any pixel in real time. Hover to see HEX, RGB and HSL with a magnifier. Automatically extracts the dominant color palette.

🎨

Color Mixer

Mix two colors and get the resulting color. Control the percentage weight of each color. Result in HEX, RGB and HSL.

🎨

Color Picker

Pick a color and get its HEX, RGB and HSL values with one click to copy.

🎨

Color Palette Generator

Generate harmonious color palettes from a base color. Schemes: monochromatic, analogous, complementary, triadic, tetradic and split-complementary.

🎨

Color Adjuster

Lighten, darken, invert, desaturate or adjust the saturation of a HEX, RGB or HSL color. See the result in real time.

🔃

Invert Image Colors

Invert all colors in an image (negative effect). Each pixel is replaced by its RGB complement. Processed in the browser.