Color Shades & Harmonies help

Turn a single colour into a usable set: a ramp, tints, shades, tones, or a harmony.

Sets

• Ramp — an 11-step scale from near-white to near-black at the base hue.
• Tints — lighter versions (lightness raised).
• Shades — darker versions (lightness lowered).
• Tones — muted versions (saturation lowered toward grey).
• Harmony — complementary, analogous, triadic, tetradic, split-complementary, or square, by rotating the hue.

Steps

1. Pick a base colour, by the swatch or by typing a hex / rgb() / hsl() value.
2. Choose a set. Click any swatch to copy it, or use "Copy list" / "Copy as CSS variables".

Notes

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

Everything runs in your browser. Nothing you enter or drop is uploaded.