Complementary Colors Generator

Main Color Picker

Main Color

Complementary Color

Tip: You can edit the color in any box above.
Press enter or click outside after changing any value.


What is a Complementary Color?

Complementary colors are pairs of colors that, when combined or mixed, cancel each other out by producing a grayscale color like white or black. This means that the light waves they produce together comprise all of the visible wavelengths of light. On the color wheel, complementary colors are located directly opposite each other.

The specific pairs of complementary colors can vary depending on the color model being used (for example, RGB versus RYB).

In the traditional RYB (Red, Yellow, Blue) color model, which is a subtractive color model typically used in painting and older color theory, the complementary color pairs are:

  • Red and Green
  • Yellow and Purple
  • Blue and Orange

In the RGB (Red, Green, Blue) color model, which is an additive color model used in screen displays, the complementary color pairs are:

  • Red and Cyan
  • Green and Magenta
  • Blue and Yellow

The complementary color generator we have above uses the RGB color model and generates the complementary color by inverting the RGB values of the main color.

How are Complementary Colors Generated?

The simplest way to generate the complementary color of a given color in the RGB color model is to subtract each of the red, green, and blue values from the maximum value the channel can have (the value of the channel for pure black color).

In RGB 0-255, the maximum value is 255, so the complementary color is calculated by subtracting the red, green, and blue values from 255, while in RGB 0-1, the values are subtracted from 1.

Here's how the calculations can be done in Python 3:

def complementary_rgb_255(r, g, b):
    cr = 255 - r
    cg = 255 - g
    cb = 255 - b
    return cr, cg, cb

def complementary_rgb_0_1(r, g, b):
    cr = 1 - r
    cg = 1 - g
    cb = 1 - b
    return cr, cg, cb

print(complementary_rgb_255(255, 127, 63))  # => (0, 128, 192)
print(complementary_rgb_0_1(1, 0.5, 0.25))  # => (0.0, 0.5, 0.75)