🎨 Color Tools

Color Palette Generator

Generate beautiful, harmonious color palettes based on color theory. Perfect for web design, branding, and creative projects.

Generated Palette

Color Harmony Guide

Complementary

Two colors opposite each other on the color wheel. Creates high contrast and vibrant look. Best for call-to-action elements.

Analogous

Three colors next to each other on the wheel. Creates serene, comfortable designs. Common in nature.

Triadic

Three colors equally spaced on the wheel (120° apart). Vibrant yet balanced. Use one dominant, two accents.

Split-Complementary

Base color plus two colors adjacent to its complement. High contrast without tension of complementary.

Why Some Palettes Look Off

Harmony rules pick colors by rotating around a hue wheel, which reliably produces combinations that relate to each other. What they don't account for is how bright those colors actually appear, and that gap is behind most palettes that look technically correct and still feel unbalanced.

Equal lightness values don't look equally light

HSL is convenient because it separates hue from saturation and lightness, but it's not perceptually uniform. Set yellow and blue to the same lightness value and the yellow will look considerably brighter, because human vision is far more sensitive to green wavelengths than to blue. A palette built by holding lightness constant and spinning the hue therefore comes out uneven, with the yellows and cyans jumping forward and the blues and violets receding.

Perceptually uniform spaces such as LCH and OKLCH were designed to fix exactly this. In those spaces a fixed lightness value genuinely reads as the same brightness across hues. That is why palettes generated there feel more even without manual tweaking. If a palette looks wrong and you cannot say why, checking the perceived lightness of each swatch is usually more productive than adjusting hues.

Proportion matters more than selection

A common design heuristic allocates roughly sixty percent of a layout to a dominant neutral, thirty percent to a secondary color, and ten percent to an accent. The specific numbers matter less than the principle: palettes fail more often from equal distribution than from bad color choices. Five colors used in equal amounts compete with each other, while the same five in a clear hierarchy read as deliberate.

Check contrast before you commit

Any color pairing intended to carry text needs to clear a contrast threshold, and accessibility guidance sets that at 4.5 to 1 for normal body text and 3 to 1 for large text. Two colors can sit in perfect harmony on the wheel and still be unreadable together, which is common with adjacent hues at similar lightness.

It's also worth remembering that a meaningful share of your audience won't distinguish certain hue pairs at all, red and green being the usual example. Anywhere color communicates meaning rather than mood, pair it with a second signal such as a label, an icon, or a difference in lightness. So the information survives without the hue.