Which colors go well with my main color?
Color harmony generator - classic color-theory rules: complementary, triadic, analogous, split-complementary, tetradic, square, monochromatic.
Pick a base color and a harmony - the tool computes the rest on the OKLCH color wheel (perceptually uniform, unlike a traditional RGB wheel).
Perfect for brand palettes, illustration, icon sets, infographics. All local.
How to use it
- Pick a base color (HEX, native picker, screen eyedropper).
- Pick a harmony type: complementary (2 opposite colors), analogous (3 neighbors), triadic (3 at 120°), split-complementary (1 + 2 neighbors of the complement), tetradic (4 irregular), square (4 evenly spaced), monochromatic (1 hue, 5 lightness levels).
- The wheel on the right shows the OKLCH color wheel with markers at harmony positions.
- "Palette swatches" - click to copy HEX. The "Details" table = HEX + RGB + HSL.
- CSS variables at the bottom - ready to drop in.
When this is useful
Where color harmony shines - typical scenarios:
- Brand palette - start from one brand color, harmonies suggest accents. Complementary = energy (warm + cool). Analogous = calm mood. Triadic = dynamic but balanced.
- Logo design - most logos use 1-3 colors - harmony ensures they sit well together.
- Charts / infographics - triadic or split-complementary gives 3-4 distinct colors for data series.
- Web design - hero + accent (complementary) + neutral text. Verify the text/background pair in the contrast checker before locking it in.
- Education - see the classic color-theory rules on a live example.
Questions and answers
Traditional RGB / HSL color wheels have uneven perceptual spacing. Complementary in HSL (180°) of red gives cyan - but cyan feels "farther" perceptually than HSL predicts. OKLCH has equal perceptual spacing - "180° in OKLCH" really is perceived complementarity. Result: more harmonious palettes.