Tool · Harmonizer

Harmonizer.

Generate UI color palettes harmonized in OKLCH space. Shared lightness + chroma across hues, with live APCA / WCAG contrast and P3 gamut checks. Inspired by Evil Martians' Harmonizer.

Hues

H 20°
H 90°
H 180°
H 250°
H 320°

Levels - target contrast vs background

Lc 100
Lc 90
Lc 77
Lc 65
Lc 51
Lc 65
Lc 77
Lc 90
Lc 100
Level
Red
Yellow
Green
Blue
Purple
100Lc 100
#4A1D1F
Lc 100
#392A00
Lc 100P3
#003129
Lc 101P3
#0C2D4C
Lc 100
#3C2243
Lc 100
200Lc 90
#763336
Lc 91
#5D4500
Lc 91P3
#005345
Lc 90P3
#184B79
Lc 90
#623A6C
Lc 90
300Lc 77
#A74B4E
Lc 77
#836300
Lc 78P3
#007663
Lc 77P3
#266BAA
Lc 78
#8B5398
Lc 77
400Lc 65
#CF5F63
Lc 65
#A37D00
Lc 66P3
#00927C
Lc 66P3
#3286D2
Lc 65
#AD68BC
Lc 66
500Lc 51
#F97479
Lc 52
#C69800
Lc 51P3
#00B298
Lc 51P3
#3FA2FF
Lc 52
#D17FE4
Lc 52
600Lc 65
#FFA0A1
Lc 65P3
#D9B758
Lc 66
#47CEB8
Lc 65
#7CC0FF
Lc 65P3
#E1A5EF
Lc 65
700Lc 77
#FFC0BE
Lc 78P3
#E4CD90
Lc 77
#8DDECD
Lc 78
#A6D4FF
Lc 78P3
#EBC1F4
Lc 77
800Lc 90
#FFDDDB
Lc 91P3
#EFE4C3
Lc 91
#C4ECE3
Lc 90
#CFE8FF
Lc 91P3
#F4DDF9
Lc 91
900Lc 100
#FFF1F0
Lc 101P3
#F8F4E7
Lc 101
#E7F7F4
Lc 100
#EBF5FF
Lc 100P3
#FAF1FC
Lc 100
:root {
  --red-100: #4a1d1f;
  --yellow-100: #392a00;
  --green-100: #003129;
  --blue-100: #0c2d4c;
  --purple-100: #3c2243;
  --red-200: #763336;
  --yellow-200: #5d4500;
  --green-200: #005345;
  --blue-200: #184b79;
  --purple-200: #623a6c;
  --red-300: #a74b4e;
  --yellow-300: #836300;
  --green-300: #007663;
  --blue-300: #266baa;
  --purple-300: #8b5398;
  --red-400: #cf5f63;
  --yellow-400: #a37d00;
  --green-400: #00927c;
  --blue-400: #3286d2;
  --purple-400: #ad68bc;
  --red-500: #f97479;
  --yellow-500: #c69800;
  --green-500: #00b298;
  --blue-500: #3fa2ff;
  --purple-500: #d17fe4;
  --red-600: #ffa0a1;
  --yellow-600: #d9b758;
  --green-600: #47ceb8;
  --blue-600: #7cc0ff;
  --purple-600: #e1a5ef;
  --red-700: #ffc0be;
  --yellow-700: #e4cd90;
  --green-700: #8ddecd;
  --blue-700: #a6d4ff;
  --purple-700: #ebc1f4;
  --red-800: #ffdddb;
  --yellow-800: #efe4c3;
  --green-800: #c4ece3;
  --blue-800: #cfe8ff;
  --purple-800: #f4ddf9;
  --red-900: #fff1f0;
  --yellow-900: #f8f4e7;
  --green-900: #e7f7f4;
  --blue-900: #ebf5ff;
  --purple-900: #faf1fc;
}

Inspired by Evil Martians' open-source Harmonizer. Same OKLCH + APCA model, no apcach runtime dependency.

What is the color harmony generator?

Color harmony is a combination of colors that is pleasing because of a defined relationship on the color wheel. The harmonizer takes one color and returns its complementary, analogous, triadic, split complementary, tetradic and monochromatic schemes with HEX codes.

Choosing a color scheme

Start from your brand or base color. A complementary scheme gives the strongest contrast and works for a call to action against a background. An analogous scheme keeps a page calm and is common in nature-led brands. A triadic scheme is lively and balanced, good for illustration and children's products. Split complementary is the safe way to get contrast without the vibration of a pure complement. Monochromatic schemes are the easiest to make accessible because only lightness changes.

Every scheme can be pushed to the palette generator, checked in the contrast matrix, or exported directly.

Color Harmony Generator FAQ

What is an analogous color scheme?

Three or more colors next to each other on the wheel, such as blue, blue-green and green. Low contrast, harmonious, often used for calm interfaces and nature themes.

What is a triadic color scheme?

Three colors spaced evenly around the wheel, 120 degrees apart, such as red, yellow and blue. Vivid and balanced; let one color dominate and use the others as accents.

What is a split complementary color scheme?

A base color plus the two colors on either side of its complement. It keeps strong contrast but is easier to balance than a straight complementary pair.

What is a monochromatic color scheme?

One hue used at several lightness and saturation levels. It is the simplest scheme to keep consistent and accessible.

Related color tools

Browse shades by color

Learn more