Marilyn’s week 4 lab notes for 2505ICT
Colour
The human eye has three kinds of colour receptors. These cones, as they are known, are sensitive to different, but overlapping wavelengths of light. Some are primarily sensitive to blue, some to green, and some to red. When two or more different types of cones are stimulated to different degrees, we perceive a range of colours.
The RGB system
A 3-valued RGB system is used to identify colours on computers.
You get different colours on the computer depending on the combination of the 3 values as shown below:
R G B
Red (255, 0, 0)
Green ( 0, 255, 0)
Blue ( 0, 0, 255)
Yellow (255, 255, 0)
Magenta(255, 0, 255)
Cyan ( 0, 255, 255)
Black ( 0, 0, 0)
(255, 255, 255) Yep, white!
Getting a different colour with the RGB system:
Hue is what we normally think of as the colour name:for example, if a colour is described as having a blue hue, it is distinguished from yellow, red, green, or other colours. Hues other than those we have already seen are specified by intermediate values; for example, to get orange (which is between red and yellow on the colour spectrum) simple average red and yellow on a component by component basis:
R G B
Red (255, 0, 0)
Yellow (255, 255, 0)
For R, (255 + 255)/2 = 255
For G, (0 + 255)/2 = 127
So, …
Orange (255, 127, 0)
Orange is a different hue from red or yellow.
Changing the saturation with the RGB system:
Saturation refers to how pure the hue is with respect to a white reference. Desaturated colours become more pastel like. Thus, as a red becomes desaturated it is closer to white, becoming pink. You can change the saturation of a colour in an RGB system by moving all of the component colours closer to those of white: for example, if you take red and move the values closer to 255 you’ll get various shades of pink.
R G B
Red (255, 0, 0)
Pink1 (255, 100, 100)
Pink2 (255, 150, 150)
Pink3 (255, 210, 210)
(255, 255, 255) Yep, white again!
Pink3 is less saturated than Pink1
Making a colour darker with the RGB system:
The hue of an object may be blue or red, for example, but these colours can be darker or lighter. You can make a colour darker by taking the values closer to black:
R G B
Cyan ( 0, 255, 255)
Darker Cyan ( 0, 210, 210)
Even Darker Cyan ( 0, 153, 153)
Most computer systems that allow you to choose different colours allow you to vary the R,G and B levels. Some systems also give you another colour picker. A common one is the HSV picker: H for hue, S for saturation and V for value of brightness.
Decimal vs Hexadecimal
Sometimes computer systems let you give the RGB values of a colour in either decimal or hex; for example,
Red (255, 0, 0) dec
Red (FF, 0, 0) hex
Blue ( 0, 0, 255) dec
Blue ( 0, 0, FF) hex
Dark Cyan ( 0, 153, 153) dec
Dark Cyan ( 0, 99, 99) hex
While decimal systems are base 10, hexadecimal systems are base 16.
So, in decimal we count
1 2 3 4 5 6 7 8 9 10 11 12 ...
In hexadecimal we count
1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 ...
Ahex = 10dec, Bhex = 11dec, Chex = 12dec …… 10hex = 16dec
In a decimal system you know what a two digit number is by multiplying the first digit by 10, and then adding the second digit.
In a hexadecimal system you know what a two digit number is by multiplying the first digit by 16 and then adding the second digit.
So, ...
in a decimal system 25 is
2 X 10 + 5 = 25 (decimal)
but,
in a hexadecimal system 25 is
2 X 16 + 5 = 37 (decimal)
Here's another example for you:
in a hexadecimal system FC is
F X 16 + C = 15 X 16 + 12 = 252
“Web safe” colours
Beware! Not all colours look the same on all computers and on all browsers. There are 216, so-called, “web-safe” colours; theoretically, when you use these your user is likely to see the colour you intended. (Notice I said likely). The “web safe” colours are shown on the next page:
Colour schemes
Rather than randomly choosing colours you think go together, you might try to use a colour scheme. Four common types to consider are Monochromatic, Analogous, Triadic, and Complementary.
Monochromatic colour schemes use one hue but with different saturation or darkness; for example, the first word here is written in three successively less saturated shades of red (they’re getting closer to white)
Monochrome1
(255, 0, 0)
(255, 90, 90)
(255, 150, 150)
and this second word is written with successively darker shades of blue (they’re getting closer to black)
Monochrome2
(0, 160, 255)
(0, 80, 175)
(0, 10, 105)
Analogous colour schemes use hues that are quite near each other on a colour wheelsuch as that shown here:
Analogous colours are colours that you can tell are different hues from each other but they are still quite similar. The following 2 words were each made up of colours next to each other on the colour wheel offered by “Word”.
Analogous1
(153, 102, 255)
(204, 102, 255) the colour is getting a bit more red
(204, 0, 255) the colour is getting less green
Analogous2
( 0, 204, 153)
( 0, 204, 102) the colour is getting less blue
(51, 153, 51) the colour is getting more red, less green, and less blue
Triadic colour schemes use hues at 3 equidistant points on a colour wheel; for example,
Triadic1
(122, 40, 204)
( 40, 204, 122)
(204, 122, 40)
Triadic2
(244, 62, 92)
( 62, 92, 244)
( 92, 244, 62)
Notice that triadic colours are easy to pick with RGB: each number appears once in each place.
Complementary colour schemes use hues on opposite sides of a colour wheel.
Complementary1
( 20, 100, 255)
(235, 155, 0)
Complementary2
(102, 204, 153)
(153, 51, 102)
Notice that complementary colours are easy to pick with RGB: the two values for R, for G, and for B, will each add up to 255.