Which harmony is safest for a chart palette?

Triadic or split-complementary — three or so well-spaced hues that stay distinguishable for most viewers. Avoid pure complementary (only two colors) for anything beyond an accent pair.

Why does monochromatic give five colors?

Monochromatic is a lightness scale, not a hue rotation. Five steps (−30%, −15%, base, +15%, +30%) is the common compromise — enough variation without losing the base color.

Color Palette Generator

Rotates hues around the HSL color wheel to produce the seven palettes painters and UI designers reach for. Drop a hex, get matching tones — useful when you have a brand color and need a chart palette, an accent for a CTA, or a calm analogous strip for backgrounds. The math stays in HSL so every harmony preserves the same saturation and lightness as your base, except monochromatic which deliberately shifts lightness up and down.

—

Base color

Harmony

Hue: 217°Sat: 91%Light: 60%

Swatches

#3B82F6

#F6AF3B

Hue rotation is done in HSL, which is fast but uneven perceptually. For perceptual palettes try the OKLCH picker.

How to use

Paste your brand or anchor hex into the base field (or use the color picker).
Pick the harmony that fits the use case — analogous for calm backgrounds, triadic for vivid contrast.
Copy individual hex codes or the whole comma-separated list.

Frequently asked questions

Which harmony is safest for a chart palette?: Triadic or split-complementary — three or so well-spaced hues that stay distinguishable for most viewers. Avoid pure complementary (only two colors) for anything beyond an accent pair.
Why does monochromatic give five colors?: Monochromatic is a lightness scale, not a hue rotation. Five steps (−30%, −15%, base, +15%, +30%) is the common compromise — enough variation without losing the base color.

Guides on this topic

Colour Contrast and Accessible Palettes What the WCAG contrast ratios actually measure, why a colour that looks fine can still fail, how colour blindness changes the picture, and how to build a palette that holds up.

Related tools

Color Shades & Tints Generator

Generate tints (lighter), shades (darker), and tones (with gray) from any base color — 2 to 20 stops, in HEX, RGB, or HSL.

Color 0 0

Color Palette from Image

Drop an image and the tool extracts a dominant-color palette via Canvas — copy HEX or grab the whole set.

Color 0 0

Tailwind Color Palette

The full Tailwind CSS default palette — 22 hues × 11 shades, 50 through 950 — with click-to-copy as Tailwind class, HEX, or rgb().

Color 0 0

Color Sort

Paste a list of hex colors and sort them by hue, saturation, lightness, or perceived brightness — useful for tidying a design-token palette.

Color 0 0

Conic Gradient Generator

Visual builder for CSS `conic-gradient()` — rotate angle, center position, color stops, shape preview. Useful for pie charts, ring charts, checkered patterns, color wheels.

Color 0 0

Color Blindness Simulator

See how your image looks to people with each of 8 types of color vision deficiency (CVD).

Color 0 0