I built a TypeScript library for generating color harmonies that prioritise human perception over simple math.
Most color libraries generate harmonies using simple hue rotations in HSL or HSV (e.g., Complementary = Hue + 180°). While mathematically "correct," this often produces unbalanced results—yellows become muddy browns, and perceived lightness varies wildly between hues.
Pro Color Harmonies works entirely in the OKLCH color space. Instead of rigid formulas, it uses perceptual "styles" and "magic numbers" (heavily inspired by Ryan Feigenbaum's research) to generate palettes that feel naturally balanced.
Key Features:
- Muddy Zone Avoidance: The algorithm actively steers hues away from unappealing areas (like dark, desaturated yellows).
- 4 Harmony Styles: Instead of just one "Triadic" formula, you can choose between Square (geometric), Triangle (balanced), Circle (expressive), and Diamond (luminosity-aware for UIs).
- Modifiers: Includes post-processing algorithms (Sine, Wave, Zap, Block) to add organic variation and texture to the generated scales.
It's written in TypeScript, has zero dependencies for the core logic, and is MIT licensed.
The demo lets you tune explore the capabilities of the lib and shows you how to call the function if you scroll down.
https://github.com/meodai/pro-color-harmonies
I'd like to hear your feedback on the generated palettes and especially the API.
patte•2mo ago
One bit of UX feedback: I just found a palette I liked and assumed there was no easy way to copy it from the page. Turns out it is there, but only in console.log. Exposing the palette directly in the UI (e.g. show the result of the code example) would make the demo much more useful.
Edit: putting the selected config into the URL so it becomes shareable/bookmarkable would be great.