Complementary Colours Tool

Two colors are considered complimentary (or opposite) if they produce a neutral color — black, white, or grey — when mixed evenly.

When placed next to each other, a colour and its complimentary colour create the strongest contrast that can be created with this initial colour.

RGB colours code consists of 3 values to identify a unique colour:

• Red Value: A number between 0 and 255
• Green Value: A number between 0 and 255
• Blue Value: A number between 0 and 255

For instance:

• (255,0,0) is the colour code for red,
• (255,0,255) is the colour code for magenta,
• (100,0,100) is the colour code for a dark purple colour,
• (255,255,255) is the colour code for white,
• (0,0,0) is the colour code for black,

Let’s consider a colour with a colour code of (Red, Green, Blue).
The colour code for its opposite colour will be (255 – Red, 255 – Green, 255 – Blue)

Your Challenge

Use the above formula to complete this codepen where the user can pick a colour (by inputting the RGB colour code) to preview this colour. The code should calculate the RGB code of the opposite colour and use it to preview this opposite colour code.

See the Pen Opposite Colours Tool by 101 Computing (@101Computing) on CodePen.

Extension Task

Complete this code to also calculate and display the colour codes of both colours using an hexadecimal colour code.