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
Levels - target contrast vs background
: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.