Complementary Color Calculator
Find the complementary (opposite) color on the color wheel for any hex color.
How to use this tool
- Enter a hex color.
- The tool inverts each RGB channel (255 − channel) to find the complement.
- Use complementary colors for high-contrast designs or call-to-action buttons.
The complementary color sits directly opposite your color on the color wheel. It creates maximum contrast and vibrant, high-energy combinations.
Formula
For each parsed RGB channel of the input hex color:Cr = 255 − RCg = 255 − GCb = 255 − B
The result is expressed as a hex string and as rgb(Cr, Cg, Cb).
How it works
The complementary color is the color directly opposite on the color wheel, which in additive RGB corresponds to inverting every channel — subtracting each 8-bit value from 255. This works because 255 is the maximum value for an 8-bit channel, so 255 − R gives the channel value that, when added to R, fills that channel completely, producing white when the two colors are mixed as light.
A common mistake is confusing this simple RGB inversion with a true color-wheel complement — for highly saturated hues the two coincide well, but for desaturated or near-gray colors the RGB invert produces a color that is geometrically opposite in RGB space but may not look meaningfully complementary perceptually. For precise artistic complementary pairs, designers typically work in HSL space and rotate the hue by 180° while keeping saturation and lightness unchanged.
Worked example
Complementary color of #ff0000 (pure red)
- Parse hex: R = 255, G = 0, B = 0.
- Invert each channel: C_r = 255 − 255 = 0; C_g = 255 − 0 = 255; C_b = 255 − 0 = 255.
- Format as hex: #00ffff; as RGB: rgb(0, 255, 255).
#00ffff — rgb(0, 255, 255)
Common mistakes to avoid
- Using the RGB complement (255 minus R, 255 minus G, 255 minus B) and expecting it to match what a physical color wheel shows -- the RGB complement differs slightly from the RYB-wheel complement artists use.
- Assuming the complementary color always creates a high-contrast pair -- low-saturation or near-gray colors have complements that are nearly identical in perceived brightness.
- Applying complementary colors in large equal areas without testing -- full-saturation complements can cause visual vibration when placed side-by-side at equal proportions.
Key terms
- Complementary color
- The color located directly opposite a given color on the color wheel; the two colors provide maximum chromatic contrast and are used together in split-complementary and complementary color schemes.
- Color wheel
- A circular arrangement of hues based on the relationships between primary, secondary, and tertiary colors; complementary pairs sit at 180° from each other.
- RGB inversion
- Replacing each channel value with 255 minus itself, equivalent to computing the bitwise NOT of an 8-bit value; produces the RGB complement of a color.
- Cyan
- The color with R=0, G=255, B=255 in sRGB; the complementary color of pure red, and a primary ink color in the CMYK subtractive model.
Frequently asked questions
- How is the complementary color calculated?
- By subtracting each RGB channel from 255. This rotates the hue by 180° on the color wheel.
- Are complementary colors the same in all color models?
- In RGB, the complement is the bitwise inverse. In RYB (traditional art), complementary pairs differ slightly (e.g., orange complements blue-violet).