Color wheel & harmony

Pick a main color on the left, then explore harmony palettes on the right—each swatch shows HEX, RGB, HSL, and hue/lightness deltas vs the main color. Copy one swatch or the whole set.

Hue (H)220°

Saturation (S)75%

Lightness (L)50%

Current color previewThis is your full H, S, and L combined. The outer ring only shows a saturated, mid-lightness “pure hue” strip—so it can look different from this preview.

#2060DFrgb(32, 96, 223)hsl(220deg 75% 50%)

HEX

Harmony palettes

Harmony colors are derived from your main color using fixed hue relationships (most rules keep the same saturation and lightness as the main swatch; monochrome steps lightness only). Small dots on the ring mark companion hues; the large dot and sliders still control only the main color.

Choose a harmony rule

Selected: Complementary

Hue roughly opposite on the wheel—strong contrast for accents.

#2060DFMain

#DF9F20

vs main · hue +180°

Export full palette

HEX list is plain text for notes or spreadsheets; the CSS block can go into a stylesheet—rename variables as needed.

How to use

The outer ring is a saturated, mid-lightness hue strip only; “Current color preview” on the left is your full HSL. On the right, switch complementary, split, triadic, tetradic, analogous, or monochrome rules; tap a swatch to copy one HEX, or use “Copy HEX list” / “Copy as CSS variables” for the whole palette. Share the main color with ?hex=RRGGBB (no hash) in the URL.

Free online color wheel & harmony palettes