Determine Complementary Color

How to determine complementary colors?

Using the HSL color model to get the complementary color

First, the base color is converted to the HSL model. Then, to determine the complementary color of a color based on the HSL (Hue, Saturation, Lightness) model, you need to follow these steps:

• Determine the hue value of the base color. This value ranges from 0 to 360 degrees and indicates what the hue of the color is. For example, red has a hue of 0 degrees, while green has a hue of 120 degrees.
• Add 180 to the Hue value. If the resulting value is over 360, subtract 360. The result is the hue value of the complementary color.
• Preservation of the saturation (saturation) and lightness (lightness) of the original color.

Example

Suppose the source color has a hue of 50 degrees, saturation of 80% and lightness of 60%. The complementary color would be determined as follows:

• The hue value of the base color is 50 degrees.
• Add 180 to get the hue value of the complementary color: 50 + 180 = 230.
• Preserves the saturation (80%) and lightness (60%) of the original color.

Using the RGB color model to get the complementary color

In the RGB color model, the complementary colors are generated by inverting the color channels.

The complementary color of a given color is found by subtracting each color channel of that color from 255. For example, the complement of red (255, 0, 0) is green (0, 255, 0) and vice versa.

Mathematically, the complementary color C of a color with the RGB values (R, G, B) is calculated as follows:

C = (255 - R, 255 - G, 255 - B)

Inverting the color channels in the RGB model does not always result in a perceived complementary color, especially when dealing with colors outside the sRGB color space. In such cases, other color models such as the L*a*b* color model or the HSL color model can be used to achieve better results.

In our tool, we usually use the HSL color model to determine the complementary color. For grays, black and white respectively, whenever the complementary color in the HSL model is identical to the original color, we use the RGB color model.