Palette Generator

Color harmony rules use geometric relationships on the color wheel to build palettes that feel balanced out of the box. All of them start from a base hue and rotate it by fixed angles, so the resulting colors share a predictable relationship no matter which starting color you pick.

When to use each scheme

• Complementary (base + 180°): high contrast, high energy. Great for call-to-action accents against a dominant brand color, but can vibrate if used at equal weight.
• Analogous (base ±30°): calm and cohesive. Good for data visualizations, illustrations, and marketing gradients.
• Triadic(three hues 120° apart): balanced and vibrant. Classic children's product look; risky for enterprise UIs unless tuned carefully.
• Tetradic (two complementary pairs): four distinct hues, most room for variety. Use one as dominant and the other three as accents to avoid chaos.
• Split complementary (base + two hues flanking its complement): softer than pure complementary while keeping contrast.
• Monochromatic (same hue, different lightness): the safest option — often what you want for minimalist brand systems.

Why we generate in OKLCH

Hue rotations done in HSL give uneven results — a 30° step in the blues looks much smaller than a 30° step in the greens. OKLCH is a perceptually uniform color space, so a 30° rotation looks like the same distance everywhere on the wheel. We rotate the hue in OKLCH, then convert back to sRGB for display. The OKLCH output is the most accurate; HEX and HSL are provided for compatibility with tooling that doesn't speak modern CSS color yet.