Harmony color palette

Client

Start from a single CSS color and explore classic harmony relationships on the HSL wheel—plus a five-step monochromatic ramp. Click any swatch to copy HEX, or copy a :root block for design tokens. Processing stays in your tab.

Harmony palettes

?
Enter one CSS color (HEX, rgb(), hsl(), or a keyword). We derive complementary, split, triadic, analogous, tetradic, and monochromatic ramps in your browser—then copy HEX or a :root variable block.

Complementary

Opposite on the hue wheel (~180°).

Split complementary

Base plus hues near the complement (~150° and ~210°).

Triadic

Three hues ~120° apart (base + two partners).

Analogous

Neighboring hues (~±30°).

Tetradic (square)

Four hues ~90° apart on the wheel.

Monochromatic

Same hue; lightness steps (not for near-grays—saturation may look subtle).

CSS custom properties

:root {
  /* Harmony palette — harmony */
  --harmony-complementary-0-0: #6366F1;
  --harmony-complementary-0-1: #F1EE63;
  --harmony-split-1-0: #6366F1;
  --harmony-split-1-1: #F1A763;
  --harmony-split-1-2: #ADF163;
  --harmony-triadic-2-0: #6366F1;
  --harmony-triadic-2-1: #F16366;
  --harmony-triadic-2-2: #66F163;
  --harmony-analogous-3-0: #6366F1;
  --harmony-analogous-3-1: #63ADF1;
  --harmony-analogous-3-2: #A763F1;
  --harmony-tetradic-4-0: #6366F1;
  --harmony-tetradic-4-1: #F163AD;
  --harmony-tetradic-4-2: #F1EE63;
  --harmony-tetradic-4-3: #63F1A7;
  --harmony-monochromatic-5-0: #050638;
  --harmony-monochromatic-5-1: #0D1096;
  --harmony-monochromatic-5-2: #1E23EB;
  --harmony-monochromatic-5-3: #7C7FF3;
  --harmony-monochromatic-5-4: #DADAFC;
}

Common use cases

  • Pick a brand HEX from a style guide, then grab complementary or triadic accents for buttons, charts, and illustrations without guessing hue angles.
  • Export a :root variable list into a prototype or Storybook so tokens stay aligned across components.
  • Compare analogous vs split-complementary side by side before you commit to a secondary accent in UI chrome.

Common mistakes to avoid

  • Using near-gray bases for monochromatic rows

    Very low saturation makes every step look gray. Raise saturation in the picker or choose a more vivid base if the ramp looks flat.

  • Expecting print or brand-guides to match exactly

    These palettes use the same sRGB math as CSS in the browser. Spot inks and coated paper differ—treat outputs as screen-first references.

FAQ

How is this different from the color converter?

The converter translates one color into many syntaxes. This page focuses on multi-color harmony sets and a ready-made CSS variable sheet from your base.

Does the tetradic row duplicate the complementary color?

The +180° swatch is the complement on the wheel; it appears in both complementary and tetradic groups so each scheme reads as a complete set.

Are my colors uploaded?

No. All math runs locally in your browser; nothing is sent to our servers.

More tools

Related utilities you can open in another tab—mostly client-side.