About Color Shades & Harmonies

Color Shades & Harmonies turns one colour into a usable set. Get an 11-step ramp from near-white to near-black, lighter tints, darker shades, muted tones, or a harmony set (complementary, analogous, triadic, tetradic, split-complementary, square).

Steps are computed in HSL so the hue stays constant within tints, shades, and tones. Nothing is uploaded.

How to use it

  1. Pick a base colour by the swatch or by typing a hex, rgb(), or hsl() value.
  2. Choose a set: ramp, tints, shades, tones, or a harmony.
  3. Click a swatch to copy it, or use Copy list or Copy as CSS variables.

Common questions

How are shades and tints computed?

In HSL. Shades lower the lightness, tints raise it, tones lower the saturation, all keeping the hue.

What harmonies are available?

Complementary, analogous, triadic, tetradic, split-complementary, and square, by rotating the hue.

Can I export the set?

Yes. Copy the plain list, or copy it as :root CSS custom properties.

Is anything uploaded?

No. It is a local calculation in your browser.