Complementary Color Wheel
Complementary colors sit 180° apart on the wheel. Drag the marker to any hue and the wheel shows its opposite instantly.
Base and its opposite on the wheel, plus tints and shades — bold contrast in a full palette.
Color tools
More free color tools
Palettes, gradients, accessibility checks, and print-ready conversions — all in one place.
- Color Palette Generator
Generate harmonious palettes from one color — complementary, triadic, analogous, and more. CMYK values and print gamut warnings included.
- CSS Gradient Generator
Build linear, radial, and conic CSS gradients with live preview. Copy production-ready code instantly.
- WCAG Contrast Checker
Check color contrast ratios against WCAG 2.1 AA and AAA. Includes palette matrix mode and auto-fix suggestions.
- Tint & Shade Generator
Turn one brand color into a Tailwind-compatible 50–950 scale with WCAG contrast badges on every swatch.
- Palette from Image
Extract dominant colors from any photo — runs entirely in your browser. Send colors to converters or palette tools.
- Color Blindness Simulator
Preview palettes as seen with protanopia, deuteranopia, or tritanopia. Essential for accessible design.
- Print Gamut Checker
See exactly how a screen color shifts when printed in CMYK. Side-by-side press preview with shift warnings.
- Compare Colors (Delta E)
Measure the perceptual difference between two colors with ΔE2000 — plus HEX, RGB, CMYK, and HSL values for both.
- Random Color Generator
Generate a random HEX color, a lockable five-color palette, or a two-color CSS linear gradient. Copy HEX, RGB, HSL, and CMYK.
How this harmony sits on the wheel
Complementary hues sit opposite each other, 180 degrees apart. The wheel marker for the pair lands straight across from the base hue. That opposition is why the two colors separate so clearly in a layout, and why they can also vibrate when both are fully saturated and placed in equal area.
A practical complementary palette does not use both hues at full strength for text. Keep one as the accent — a button, a chart mark, a headline — and let the other recede as a tint or a darker shade. The generator adds lighter and darker steps for that reason. Lock the brand hue and vary the rest in the palette tool.
Hue is only one of the three channels. Saturation and lightness decide whether the pair is usable for text. Two complementary colors can both fail contrast on white even though they look different from each other. Check each swatch against its actual background.
The relationship is the one described in color theory as a direct complement. It is a layout rule, not a guarantee that the colors will print the same way they look on a bright display. Saturated complements are often the first colors to leave a CMYK gamut.
The relationships are introduced in color theory 101. Explore every rule on the main color wheel, or lock swatches in the complementary palette generator. Named swatches live in the color index.
FAQ
Frequently asked questions
Questions about the complementary color wheel.
- What is a complementary color?
- It is the hue opposite your base color on the wheel, 180 degrees away. The color theory guide explains hue, saturation, and value before you rely on the pair.
- Why do complementary colors sometimes look like they flicker?
- Equal areas of two saturated opposites compete. Reduce the area or the saturation of one hue, or separate them with a neutral. Neutrals are listed on the named colors index.
- Does a complementary pair pass WCAG automatically?
- No. Contrast is a luminance ratio between text and its background, not a hue relationship. Check the pair in the contrast checker.
- Where do I turn the wheel colors into a palette?
- Open the complementary palette generator. It keeps the opposite hue and adds tints and shades you can export.