Color palette & shades generator

Free · no sign-up

Generate tints, shades and harmonies (complementary, analogous, triad) from any base color.

Not a recognizable color.

Runs entirely in your browser — your data never leaves your device and nothing is stored. No sign-up.

Generate a color palette from any base color — tints (lighter), shades (darker), plus complementary, analogous and triad harmonies. Click any swatch to copy its hex. Pure HSL math in your browser; nothing is uploaded. Built for “color palette generator”, “color shades” and “tints and shades” searches alongside our color converter. Free, no sign-up.

✓Tints and shades in stepped scales
✓Complementary, analogous and triad harmonies
✓Hex on every swatch — click to copy
✓Accepts hex, rgb, hsl or CSS color names
✓Color picker plus text input
✓Local HSL math — no dependencies

Who it's for

UI theme starter palettes
Brand tint/shade scales
Quick harmony exploration
Copying hex into design tokens

How it works

1Enter or pick a base color.
2Browse tints, shades and harmony rows.
3Click a swatch to copy its hex.
4Paste into CSS, Figma or design tokens.

Frequently asked questions

What is a tint vs a shade?+

A tint mixes the color toward white (higher lightness); a shade mixes toward black (lower lightness). Both keep the same hue and saturation in this tool.

How is complementary calculated?+

Complementary is the hue 180° opposite on the HSL wheel; analogous uses ±30°; triad uses 0° / 120° / 240°.

How is this different from the color converter?+

The converter shows HEX/RGB/HSL for one color. This page builds a palette of related colors for design systems and UI themes.

Are the results accessible contrast pairs?+

No — this generates related hues and lightness steps. Check contrast separately for text on backgrounds.

Is my color uploaded?+

No. All conversions run in your browser.