What is the difference between complementary, analogous and triadic colors?

Complementary colors sit opposite each other on the wheel and give the strongest contrast. Analogous colors are neighbors, so they look calm and natural. Triadic colors are spaced evenly in a triangle, which is lively but still balanced. Split complementary, tetradic and monochromatic are variations on the same idea.

What does the Spread setting do?

Spread sets how far apart the harmony colors sit on the wheel. A small spread on Analogous gives a subtle, tone-on-tone palette; a wide one adds more variety. On Tetradic it turns the square into a rectangle, and on Monochromatic it sets how much lighter and darker the variations are.

Can I keep one color and shuffle the rest?

Yes. Click the lock on any swatch, then press Shuffle or the R key. Locked colors stay exactly as they are and the others are regenerated. Lock the base color to keep it and try different spreads instead.

Color Wheel - Color Harmony & Palette Generator, Free Export

H S L

Paste any color

RGB

HEX, rgb(), hsl(), oklch() or a name like tomato - it applies as you type.

Harmony wheel

H 0° · S 100%

Drag on the wheel to change hue and saturation. The small rings are your harmony colors.

Quick start

Complementary palette

click a swatch to copy

Include shades and tintsOff - exports the palette colors only OFF

Shades & tints of the base color

click any step to copy

Color values

Indian Red

Export

CSS custom properties - paste into your stylesheet.

palette.cssMeasuring the file size...

Send this color to the Contrast Checker, Gradient Generator, CSS Color Editor or Image Color Replacer.

How to make a color palette

Pick a base color. Drag in the color square and on the hue rail, paste any color code, or start from a quick color.

Choose a harmony. Pick Complementary, Analogous, Triadic, Tetradic, Split or Monochromatic - the matching colors appear instantly.

Fine-tune the palette. Adjust the spread, lock the colors you like and press Shuffle to explore the rest. Check contrast and color-blind views as you go.

Copy or export. Click any swatch to copy it, or export the whole palette as CSS, SCSS, Tailwind, JSON, SVG or PNG.

Happy with the palette? Turn two of the colors into a background with the Gradient Generator, or recolor your logo with the SVG Icon Editor.

The six color harmonies

Complementary

Two colors opposite each other. Maximum contrast - great for call-to-action buttons and highlights.

Analogous

Three neighbors on the wheel. Calm and cohesive, like a sunset or a forest.

Triadic

Three colors 120° apart. Playful and vivid - let one lead and use the others as accents.

Split complementary

A base plus the two colors beside its opposite. Strong contrast with less tension.

Tetradic

Two complementary pairs, as a square or a rectangle. Rich - works best when one color dominates.

Monochromatic

Lighter, darker and muted versions of one hue. Elegant and very hard to get wrong.

Tips for palettes that work

Use the 60-30-10 rule. One color for most of the page, a second for about a third, and the third only for accents.

Check text early. The badge on each swatch shows the best text color. Test exact pairs with the Contrast Checker.

Don't rely on hue alone. Turn on Color-blind preview - if two swatches merge, make one lighter or darker.

Lock and explore. Lock your brand color and press R a few times. You will be surprised.

Make it an icon. Put the palette to work in the Icon Maker for a matching favicon or app icon.

Frequently Asked Questions

Pick a base color in the square, or paste a code you already use. Then choose a harmony such as Complementary or Analogous - the matching colors appear right away.

Every harmony is a fixed pattern on the color wheel, so the colors are balanced by design. Want a palette from a photo instead? Grab its colors with the Image Color Picker.

Complementary colors sit opposite each other and give the strongest contrast. Analogous colors are neighbors, so they look calm and natural.

Triadic colors form an even triangle - lively but balanced. Split complementary, tetradic and monochromatic are variations on the same idea.

Spread sets how far apart the harmony colors sit on the wheel. A small spread on Analogous gives a subtle, tone-on-tone palette; a wide one adds variety.

On Tetradic it turns the square into a rectangle, and on Monochromatic it sets how much lighter and darker the variations are.

Yes. Click the lock on any swatch, then press Shuffle or the R key. Locked colors stay exactly as they are and the rest are regenerated.

Lock the base color to keep it and try different spreads instead.

Choose CSS, SCSS, Tailwind, JSON, SVG or PNG under Export, then copy the code or download the file. The real file size is shown before you download.

Turn on Include shades and tints to add a full 50 to 950 scale for every color. SVG and PNG swatch sheets drop straight into Figma, Canva or a slide deck.

Open Color-blind preview and choose a type to see the palette the way those visitors see it. The tool warns you when two swatches become hard to tell apart.

Each swatch also shows its best text color and contrast ratio. For a full WCAG check of a text and background pair, use the Contrast Checker.

They are different ways to write the same color. HEX and RGB describe the red, green and blue light a screen mixes. HSL uses hue, saturation and lightness, which is easier to adjust by hand.

OKLCH is a modern CSS format where equal steps look equally different to the eye. Convert and tweak any value in the CSS Color Editor.

Yes. It is free, needs no account, and every palette you make is yours to use in personal and commercial projects.

Everything runs in your browser and nothing is uploaded - see our Privacy Policy.