CMPT165-Colour.docx

44 views5 pages
Colour
•The HTML 4.01 standard specifies 147 different colour names however; modern computers
can represent, at minimum, over 16 million different colours
Color Physics
•Intuitively, we think that something with no colour is white
•We can then add colours like red, yellow, and blue to white
•Combining these three primary colours gives us different colours:
-Red + Yellow = Orange
-Yellow + Blue = Green
-Blue + Red = Purple
•This intuitive way of thinking about colour applies to things like paint and paper however; it
does not apply to colour that is created by computer screens
-Computer screens work with light and light combines differently than paint colours
•With light, something with no colour is black, not white
•We can shine lights on the black surface to create different colours however; the three
primary colours of light are not red, yellow and blue
•The primary colours of light are red, green and blue
-This is because we have three types of colour receptors in our eyes, which are stimulated by
red, green and blue light
•If the red, green, and blue receptors in our eyes are stimulated equally, we see white
•If none of the receptors are stimulated, we see black
-We can think of white as full colour, and black as no colour
•Light combines differently than paint
-Red + Green = Yellow
-Green + Blue = Cyan (light blue)
-Blue + Red = Magenta (bright purple)
-Red + Green + Blue = White
RGB Colour
•A computer screen is divided into pixels
•Each pixel has a red (R), green (G) and blue (B) component, each of which can be lit at
different levels of intensity
•If all three components are at 0% intensity (that is, fully off), the pixel will be black
•If all three components are at 100% intensity (that is, fully on), the pixel will be white
•If we change the intensities of the colour components, we can get different colours
E.g. If we have a 50% intensity of red, with no green and no blue, we'll get dark red
•Even less red 25%, will result in an even darker red
•Similarly, more red 75%, will get a brighter red
•If we have no green and no blue, then:
-0% Red = Black
-100% Red = Full red
-A percentage between 0 and 100 will give you something between black and full red
•This also applies to green and blue
Unlock document

This preview shows pages 1-2 of the document.
Unlock all 5 pages and 3 million more documents.

Already have an account? Log in
•We can combine different intensities of colours to make new colours
E.g. red and green
100% Red + 50% Green = Orange
100% Red + 100% Green = Yellow
50% Red + 50% Green = Dark yellow
E.g. green and blue
100% Green + 50% Blue = Blue-green
100% Green + 100% Blue = Cyan
50% Green + 50% Blue = Dark cyan
E.g. blue and red
100% Blue + 50% Red = Purple
100% Blue + 100% Red = Magenta
50% Blue + 50% Red = Dark magenta
•White is made by combining 100% red, 100% green and 100% blue
•Conversely, black is made by combining 0% red, 0% green and 0% blue
•If we keep the red, green and blue intensities equal, then any level between 0% and 100% will
give us gray
•With shades of gray, we can make lighter colours
E.g. Pink
Full red is 100% red, 0% green, 0% blue
Full white is 100% red, 100% green, 100% blue
If we want to go halfway between red and white (to get pink), we need to go halfway between
the intensities of each colour component: 100% red, 50% green, 50% blue
Hexidecimal Numbers
•How can we use any of the 16 million colours available to us on our web pages?
•The simple answer is that we specify the intensity level of each colour component
-That is, how much red, green, and blue we want to combine for our font colours, our
background colours, etc.
•Each colour component has 256 intensity levels
-0 is the lowest intensity
-255 is the highest intensity
•(By combining 256 levels of red, green, and blue, we get 256 * 256 * 256 = 16,777,216 possible
colour combinations)
E.g. A full red with 100% red, 0% green, and 0% blue would have
255 red
0 green
0 blue
E.g. A full purple with 50% red, 0% green, and 100% blue would have:
128 red (255 * 50%)
0 green
255 blue
•A number system called hexadecimal is used for specifying colours
E.g. #C15AFB
Unlock document

This preview shows pages 1-2 of the document.
Unlock all 5 pages and 3 million more documents.

Already have an account? Log in

Get OneClass Notes+

Unlimited access to class notes and textbook notes.

YearlyBest Value
75% OFF
$8 USD/m
Monthly
$30 USD/m
You will be charged $96 USD upfront and auto renewed at the end of each cycle. You may cancel anytime under Payment Settings. For more information, see our Terms and Privacy.
Payments are encrypted using 256-bit SSL. Powered by Stripe.