Find Color Codes

Color Wheel

Explore harmonies by rotating around the hue wheel.

Three steps

How to use it

  1. 1

    Set your base color

    Drag the handle around the wheel, or type a hex code to place it exactly.

  2. 2

    Pick a harmony

    Switch between the five schemes. The wheel redraws to show where each partner color sits relative to your base.

  3. 3

    Take the codes

    Each color in the scheme is copy-ready, and the whole palette exports as CSS custom properties.

About this tool

Color harmony is geometry applied to the hue wheel. Complementary is a 180° rotation, triadic is two rotations of 120°, tetradic is a rectangle. That is the entire theory. The rest is judgement about which of the resulting colors leads and which support.

The one thing the wheel does not tell you is whether a pairing is usable. Two colors 180° apart have maximum hue separation but can have almost identical lightness, in which case text in one on a background of the other is unreadable. Harmony and contrast are different questions; check the second one separately.