Generator Tools

Color Harmony Generator

Generate complementary, split complementary, triadic, tetradic, square, analogous, and monochromatic color schemes from any hex color.

Pick a scheme

Color harmony schemes

Each scheme rotates the base hue around the color wheel by a different angle. Cards below show every scheme at once; use the pills to focus the output panels.

Complementary

2 colors

The base color paired with the hue directly opposite it on the color wheel (+180 degrees). High contrast and energetic.

BaseBase

#6366F1

rgb(99, 102, 241)

hsl(239, 84%, 67%)

Complement

#F1EE63

rgb(241, 238, 99)

hsl(59, 84%, 67%)

Split Complementary

3 colors

The base color and the two hues flanking its complement (+150 and +210). Strong contrast with less tension than a pure complement.

BaseBase

#6366F1

rgb(99, 102, 241)

hsl(239, 84%, 67%)

Split A (+150)

#F1A763

rgb(241, 167, 99)

hsl(29, 84%, 67%)

Split B (+210)

#ADF163

rgb(173, 241, 99)

hsl(89, 84%, 67%)

Triadic

3 colors

Three hues evenly spaced 120 degrees apart on the wheel. Vibrant, balanced, and a favorite for playful brand palettes.

BaseBase

#6366F1

rgb(99, 102, 241)

hsl(239, 84%, 67%)

Triad B (+120)

#F16366

rgb(241, 99, 102)

hsl(359, 84%, 67%)

Triad C (+240)

#66F163

rgb(102, 241, 99)

hsl(119, 84%, 67%)

Tetradic (Rectangle)

4 colors

Four hues forming a rectangle on the wheel: the base, +60, +180, and +240. Two pairs of complements with built-in warm and cool balance.

BaseBase

#6366F1

rgb(99, 102, 241)

hsl(239, 84%, 67%)

Tetrad B (+60)

#EE63F1

rgb(238, 99, 241)

hsl(299, 84%, 67%)

Tetrad C (+180)

#F1EE63

rgb(241, 238, 99)

hsl(59, 84%, 67%)

Tetrad D (+240)

#66F163

rgb(102, 241, 99)

hsl(119, 84%, 67%)

Square

4 colors

Four hues evenly spaced 90 degrees apart. A balanced four-color palette where every color is equally distant from the others.

BaseBase

#6366F1

rgb(99, 102, 241)

hsl(239, 84%, 67%)

Square B (+90)

#F163AD

rgb(241, 99, 173)

hsl(329, 84%, 67%)

Square C (+180)

#F1EE63

rgb(241, 238, 99)

hsl(59, 84%, 67%)

Square D (+270)

#63F1A7

rgb(99, 241, 167)

hsl(149, 84%, 67%)

Analogous

3 colors

The base color with its two nearest neighbors on the wheel (+/- 30 degrees). Low contrast and naturally harmonious, ideal for backgrounds and gradients.

Analog A (-30)

#63ADF1

rgb(99, 173, 241)

hsl(209, 84%, 67%)

BaseBase

#6366F1

rgb(99, 102, 241)

hsl(239, 84%, 67%)

Analog B (+30)

#A763F1

rgb(167, 99, 241)

hsl(269, 84%, 67%)

Monochromatic

5 colors

A single hue at five lightness levels. Quiet and cohesive, useful for tonal UI surfaces and one-color brand systems.

Mono 1 (dark)

#0F12A2

rgb(15, 18, 162)

hsl(239, 84%, 35%)

Mono 2

#181DEA

rgb(24, 29, 234)

hsl(239, 84%, 51%)

BaseBase

#6366F1

rgb(99, 102, 241)

hsl(239, 84%, 67%)

Mono 4

#AEAFF8

rgb(174, 175, 248)

hsl(239, 84%, 83%)

Mono 5 (light)

#DADAFC

rgb(218, 218, 252)

hsl(239, 84%, 92%)

Export Complementary

Drop straight into your project. The CSS prefix follows the one you set on the left.

Inline hex list

#6366f1, #f1ee63

CSS custom properties

:root {
  --brand-base: #6366f1;
  --brand-comp-2: #f1ee63;
}

JSON array

[
  {
    "label": "Base",
    "hex": "#6366f1",
    "rgb": "rgb(99, 102, 241)",
    "hsl": "hsl(239, 84%, 67%)"
  },
  {
    "label": "Complement",
    "hex": "#f1ee63",
    "rgb": "rgb(241, 238, 99)",
    "hsl": "hsl(59, 84%, 67%)"
  }
]

All harmony schemes are computed from your base color using HSL hue rotation. The color you pick stays on your device and is never uploaded.

How to use

Type or paste a hex color on the left, or click the color picker to choose visually. Three and six digit hex codes both work.
Try a preset color, or set your own brand color to see every scheme update at once.
Scroll through the seven harmony panels (complementary, split complementary, triadic, tetradic, square, analogous, monochromatic) to compare them.
Click any swatch's Copy button to grab its hex code, or use Copy hex list on a scheme to copy the whole palette in one go.
Use the scheme pills near the top to choose which palette appears in the export panel.
Set a CSS variable prefix (like brand or accent), then click Copy CSS to export the active scheme as a :root block, or Copy JSON to grab a JSON array.
Click Reset to return to the default base color and scheme.

About this tool

Color Harmony Generator turns any base hex color into the seven classical color-theory schemes at once: complementary (the hue 180 degrees away), split complementary (the two hues flanking the complement at +150 and +210), triadic (three hues spaced 120 degrees apart), tetradic rectangle (four hues at +60, +180, and +240), square (four hues spaced 90 degrees apart), analogous (the base plus its neighbors at +/- 30 degrees), and monochromatic (a single hue at five lightness levels). Every scheme is built by rotating the base hue around the color wheel in HSL, which is the standard model used by designers and CSS. Each palette is rendered as labeled swatches with hex, RGB, and HSL values, a live preview bar, and per-swatch copy buttons. You can also export the active scheme as a CSS custom-properties block with your own variable prefix, a JSON array for use in scripts, or a plain inline hex list for chat and design docs. Useful for building brand palettes, choosing complementary accent colors, picking a calm analogous background set, designing data-visualization color ramps, or just exploring what colors go well with a brand color you already have. Everything runs in your browser; the color you pick is never uploaded.

Free to use. Works in your browser. No signup, no login.

Related tools

Color Harmony Generator

Color harmony schemes

Complementary

Split Complementary

Triadic

Tetradic (Rectangle)

Square

Analogous

Monochromatic

Export Complementary

How to use

About this tool

You may also like

Color Palette Generator

Color Mixer

Color Shades and Tints Generator

Color Contrast Checker

HEX to RGB Converter