What is Color Wheel?

Pick a base color and see complementary, analogous, triadic, split-complementary, tetradic, and monochromatic schemes on an interactive wheel. Each swatch shows its WCAG contrast against white and black, and you can export the palette as plain text or a shareable PNG.

The wheel runs on HSL so you can drag a base hue or type any HEX value and watch the matching swatches rotate into place. Saturation and lightness sliders let you tune the whole scheme in real time. Each generated colour can be copied as HEX, RGB, HSL, CMYK, or OKLCH with one click, and the wheel marks every harmony point with a labelled dot so you can see why the colours relate.

How to use

1. Click or drag on the color wheel to pick your base hue, or enter a specific HEX value in the input field.
2. Choose a harmony type (complementary, analogous, triadic, split-complementary, or tetradic) to see matching colors highlighted on the wheel.
3. Copy any generated color as HEX, RGB, HSL, CMYK, or OKLCH by clicking the swatch. Export the full palette to use in your design tools.

When to use

• Picking three or four accent colours for a brand kit once you have the primary hue locked in.
• Choosing a button colour that visually opposes the background to maximise contrast.
• Building a UI palette where related shades should feel calm rather than clashing.

Result

A web designer picks #E87040 as a brand color, switches to triadic harmony, and gets three balanced accent colors for their landing page — all with one click.

FAQ

What's the difference between analogous and triadic harmonies?

Analogous picks colours next to each other on the wheel (within roughly 30 degrees) and reads as calm and unified. Triadic spaces three colours 120 degrees apart for high-contrast, balanced schemes that energise a design.

When should I pick complementary instead of split-complementary?

Complementary uses two opposite hues for maximum punch but can clash if both run at full saturation. Split-complementary pairs your base with the two neighbours of its opposite — same tension, gentler clash, easier to balance.

Why do the harmony colours change when I move the lightness slider?

The wheel keeps the relative hue offsets but applies your saturation and lightness to every result. That way analogous greens at 40% lightness all look like dark forest tones, instead of mixing dark green with neon green.

Can I get the palette as CSS variables or design-tool format?

Click any swatch to copy HEX, RGB, HSL, CMYK, or OKLCH to the clipboard. From there it goes straight into a CSS file (--brand-primary: #E87040), Figma's hex input, or Tailwind's custom colour config — whichever you're working in.

Is tetradic the same as a rectangular harmony?

Yes. Tetradic (also called rectangular) picks four colours forming a rectangle on the wheel — two complementary pairs. It gives you a richer palette but needs one dominant hue or the design ends up looking too busy.

Related Tools