Complementary Colours
A colour is complementary to a given colour if when they are “added” together they make white.
What does “added” mean in this context?
The colours on your screen are made up of Red, Green and Blue points of light. In the RGB representation each individual colour can have a brightness value from 0 to 255. When all three colours have a brightness of 255 the colour is white. So if we have a given colour that is say Red=200, Green=55 and Blue=0 the complementary colour is Red =55, Green=200 and Blue=255. Add together the separate values of brightness and we get Red=255, Green=255 and Blue=255 which is of course white.
Although we call “Red=255, Green=255 and Blue=255” white it is more likely the case that when we look at extended areas of an image the colours we accept as white rarely have these colour RGB values. The area would be considered to be completely burnt out if it did. We accept that shades of grey are perceived as white. For a given colour it is possible to find a colour that is complementary to a particular brightness of grey providing that the grey is at least as bright as the original colour.
Besides the straight forward RGB representation Adobe uses
Red, Green and Blue (RGB)
It can help to try to imagine the relationship between different colours.
In the RGB representation a colour is represented by three numbers defining the amount of each component in the required colour.
These are in effect three independent numbers and it is convenient to think of all possible colour arranged in the form of a cube.
The picture on the left is a colour cube looking up at the black corner. Red increases from left to right, green increases from bottom to top and blue increases as it is represented going into the screen. The picture on the right is a view looking down on the white corner from the other side. Red is still left to right and green bottom to top but blue now decreases as it moves “into” the screen.
How does this help us to think about complementary colours? If you look at opposite corners it is soon clear that they are coloured with complementary colours. Red is opposite Cyan, Green opposite Magenta, Blue opposite Yellow and not surprisingly White is opposite Black. All four pairings are complementary colours.
What about other colours? Say the colour half way between blue and cyan. This colour is going to be RGB(0,127,255) its complement will be RGB(255,128,0) this colour is half way between red and yellow. (Note 255 divided by 2 is 127.5. As only whole numbers can be used it is arguable whether 127 or 128 is the best representation of half of 255 as it is nigh on impossible to tell the difference either will do.)
The complement of any colour can be visualised as the colour on the opposite side of the centre point of the cube and the same distance from it. It is the colour that is half way between the corners of the cube. It is the colour RGB(127.5,127.5,127.5) i.e. it is a colour that cannot be represented!
With the RGB representation there are
possible colours.
Brightness
Note I have been using “brightness” to refer to the RGB values. In this section I will only use “Brightness” to refer to the brightness in HSB and refer to the numbers representing RGB as values or RGB values where the context is not clear.
Brightness is simply the largest value of the three primary colours expressed as a percentage of 255. RGB(201,204,12) therefore has a Brightness of 100x204/255= 80. It just so happens that a value of 204 for the RGB corresponds to exactly 80 in the HSB Brightness but for most RGB values the corresponding HSB Brightness is not a whole number so some rounding occurs. There are only 101 (including 0) Brightness numbers but there are 256 possible values of RGB.
Saturation
Saturation as represented by RGB values is slightly more complicated. All fully saturated colours have one of their RGB values equal to 0.
Colours that are not fully saturated have no zero values for any of the RGB values. Each colour that is not fully saturated can be considered as a mixture of grey and a fully saturated colour. E.g. RGB(100, 50, 200) can be considered as the grey RGB(50,50,50) plus the fully saturated colour RGB (50,0,150). Saturation is the Brightness of the fully saturated colour (150) expressed as a percentage of the Brightness of the original colour (200) giving a saturation of 75%.
If L is the largest value of the three RGB colours and s is the smallest value of the RGB colours then the saturation Sat is given by
In the above picture the colours that have 100% Brightness and are fully saturated are represented in a circle. Taking red at the top as 0 the angle that the hand of a clock would sweep through to reach any colour is the hue of that colour.
How do the RGB values relate to the colours in this circle?
Starting at the top on the rim of the circle with red, that red has RGB values (255,0,0). Moving clockwise round the circle green is added one unit at a time. The first step has RGB values of (255,1,0).
This process is continued until the green value reaches 255. This gives a colour RGB(255,255,0) which is pure yellow. As we move on the red is reduced until it reaches 0 and we arrive at green RGB(0,255,0).
Then blue is added until we reach cyan RGB(0,255,255). The green is removed until we reach blue RGB(0,0,255). Red is added until we reach RGB(255,0,255), magenta. Finally blue is removed until we arrive back at red RGB(255,0,0).
Starting at red 255 steps takes us to yellow, another 255 to green, 255 more to cyan 255 to blue the next 255 takes us to magenta and the final 255 steps takes us to red. Altogether there are 1530 steps representing 1530 colours in fact all of the colours that are 100% bright and 100% saturated.
If you really want to find out how hue is calculated from RGB values read on but it does get a bit messy.
My advice is to skip the section italics below.
If we want to find the
hue then we count the number of steps round from red divide by 1530 and
multiply by 360. This is the same as
dividing by 255 and multiplying by 60.
So for every 255 steps
round the rim of this circle the hue increases by 60 degrees. From red to yellow is 255 steps so pure
yellow RGB(255,255) has a hue of 60 degrees. To green RGB(0,255,0) is a total
of 510 steps so the hue of green is 120 degrees since 
.
Cyan is 180 degrees,
blue is 240 degrees, magenta is 300 degrees and red of course is 0 degrees.
What about the colours
in between? It could get a bit tedious
counting up steps each time.
Let’s look at the
first bit from red to yellow. The number
of steps round is the same as the green value. Take the green value divide by
255 and multiply by 60 to get the hue.
That gets us as for as yellow but what about from then on? Well the red starts to decrease from its
initial value of 255. To stop the red
having an effect for the first bit we can subtract it from 255 if the red value
is “r” and the green value is “g” we can get the number of steps from (g+255-r).
This works all the way round to green but when we start adding blue to move
towards the cyan we need to take the blue into account.
Well green stays at
255 at least until we get to cyan and 255-r also stays at 255 since red is zero
between green and cyan, so we can just add in the blue as it is increasing by 1
per step.
This gives (g+b+255-r)
as the number of steps and
as our hue for a 100% saturated 100% bright colour between
red and cyan.
So far so good but
what about the hues from cyan through blue and magenta to red?
Well the same argument
can be used to move anticlockwise from the red. In the first part as far as
magenta the number of steps is simply the RGB value of the blue but it is
counting the wrong way so the angle we calculate has to be subtracted from 360
to convert it to the hue.
The formula for
calculating hue of 100% bright and 100% saturated colours is in two parts.
First calculate 
to get an angle A
If g is bigger than or
equal to b then the angle is the hue.
If b is bigger than g
then subtract the A from 360 to get the hue.
So far so good this
allows us to convert the 1530 RGB colours round the rim of the colour circle to
HSB but what about the other 16,775,686 RGB colours?
Before we push on lets
rearrange the formula from
to
.
Suppose that we have a
fully saturated colour i.e. one of the colour values is 0 but the brightness is
less than 100%. Say we had the colour
RGB(100,90,0). We could construct a new
colour circle with100 instead of 255 steps from red to yellow. The same arguments about this circle would
lead to a new formula with 100 instead of 255.
When the largest RGB
value is 100.
The only change is
that we are dividing by 100 rather than 255.
100 is the brightness, i.e. the largest value among the three RGB
colours.
So for any saturated
colour we can use the formula
Where L is the
largest RGB value (i.e. the brightness)
Consider the colour
RGB(100,100,0) as it has equal amounts of red and green we would expect it to
be yellow with a hue of 60 degrees
The formula gives
As green’s value is
bigger than blue’s the
We now have a formula
for 100% saturated colours which at least gives the expected result for equal
amounts of red and green.
One last step! What
about those colours which are not fully saturated.
Earlier we considered
an unsaturated colour as the sum of a grey and a fully saturated colour. We know how to calculate the angle for a
fully saturated colour so we just need to determine the fully saturated colour
and find its hue.
e.g. RGB(230,123,45)
is a combination of RGB(185,78,0) and RGB(45,45,45) so we get the fully
saturated colour by subtracting the smallest number from the rest in turn and
putting the result into the formula.
(Note that this is an
arbitrary decision that in effect ensures that adding or subtracting grey will
have no effect on the hue)
Let s represent the
smallest value i.e. the amount of grey.
The resulting formula
is
Two of the s values
cancel so it reduces to
Formula for
First calculate the
angle A
s is the smallest
value
L is the largest value
If g is bigger than or
equal to b then the
If b is bigger than g
then subtract the
Note This is the same as we started with so
subtracting (or adding) grey does not change the hue.
Note
There are other
definitions of
It must be remembered that hue is a mathematically defined property. Different colours with the same hue will not necessarily be described as having the same subjective hue. E.g. dark yellow is usually described as brown.
The formulas above for hue are such that adding or subtracting grey or multiplying the RGB values by some factor does not alter the calculated hue.
The HSB Colour Space
I suggested above that I considered the RGB colour space to be a cube. What about the HSB colour space?
The 100% saturated colours with 100% brightness fit into a circle because hue is measured as an angle.
We can arrange that this circle contains all the colours
with 100% brightness simply by de-saturating towards white in the centre of the
circle. The whole space of HSB colours
can be considered as a stack of circles of decreasing brightness as we move
into the screen. The diameter of the
circles decreases as we move to circles of decreasing brightness. As discussed above although there are 1,530
different colours round the rim of a circle with100% brightness if the
brightness were 80% then the largest RGB value would be204 since 
The rim of the colour circle with that brightness would only
contain 1,224 different hues this implies that the radius of the circle would
be less than the circle for 100% brightness.
In the limit there is only one black.
So the natural shape for the colour space is a cone.
Above is a picture of the top of the cone and a slice through the cone from red to cyan and through to the black.
In the RGB cubic space it is easy to see that pairs of complementary colours are symmetrically placed about the centre of the cube. It is not so easy to spot the complementary colours in the cone representing the HSB space. Clearly colours on the rim of the top surface have their complements directly opposite on the top surface. It is also true that for any colour its complement lies somewhere in the triangle formed by slicing through the centre of the cone and that colour. In the slice shown above as a colour is selected from the edge joining red to black so the complement lies a proportionate distance along the line from cyan to white. After that it gets more and more difficult to imagine where the complementary colours lie.
In the triangle shown above there is a central grey line that runs from black to white. Above that line the hue is 0 degrees and below it in the diagram the hue is 180 degrees. The difference is 180 degrees. I think of these as complementary hues not because they add to white but because for every colour in one half its complement lies in the other. This is true for any slice through the centre of the cone.
In calculating the complement of a given colour the hue of the complement is simply 180 degrees displaced from the given colour. A hue of 73 degrees has a complement with a hue of 253 degrees.
Calculating the saturation and brightness of the complement from the saturation and brightness of a given colour is rather complicated and unlike hue does not help in visualising the complement of a colour.
However, just for completeness and for the masochists among us (I suppose that includes me) here are the formulas.
B stands for brightness and S for saturation the suffix c indicates the values for the complementary colours the other letters refer to the given colour.
