Account Log In - Home/Outlines - Books - Contact Us - Support - Employment -

Photoshop

Digital Graphics

Colour Space

A colour space is a model for representing intensity values in colour. In other words, a colour space defines a colour model with a specific range of colour (also known as gamut *) that can be expressed in different ways, depending on how the colour is to be used. For example, the RGB * colour space is used for monitors, while the CMYK * colour space is used for printing. You can have the exact same colour of green for a monitor and for a printing press, but they will be described in different ways.

Within a colour model, there can be differently defined colour spaces. The RGB colour model, for example, can have several different colour spaces within it: Apple RGB, Adobe RGB, or sRGB. They all describe colour by the same method (Red, Green, and Blue axis), but they each have a different range (gamut) of colour that they can describe, depending on what they are being used with or for.

Distinctive colour spaces will have different methods of representing the same colour, providing inconsistent visual results. That is why it is very important to identify and distinguish the colour space that applies to digital graphics on the Web. For the purposes of digital graphics for the Web, we will concentrate on how Photoshop uses the RGB colour space.

The RGB Colour Space

The RGB (Red, Green, Blue) space is a three-dimensional colour space whose components are the red, green and blue intensities that make up a given colour. RGB-based colour spaces are the most commonly used colour spaces in digital graphics, because the majority of colour displays directly support them. The colours produced by an RGB colour space vary from device to device. They are referred to as device-dependent colour spaces.

Device-Dependent Colour Spaces

RGB Colour panel Device-dependent colour spaces enable the specification of colour values that are directly related to their representation on a particular device. In other words, a monitor can understand a certain gamut of colours, while a different device, say a scanner, can understand a different range of colours. Each has a colour space that it can work with, and that specific colour space is dependent on that specific device. This image shows Photoshop's RGB Colour panel.

Device-Independent Colour Spaces

A device-independent colour space is a colour model that does not depend on any specific device, but rather what the human eye (on average) can see.

How Colours are Displayed

RGB phosphors and pixels We work in the RGB colour space daily when using computer displays, scanners and some printers. Here again we show a close-up of a monitor's phosphors. A pixel consists of a red, green and blue phosphor. The computer varies the intensity of light striking each of the three phosphors to produce different colours.

Each phosphor can emit 256 individual values or shades (measured from 0-255). For example, a red phosphor emitting no light (0) will be black, at full intensity (255) it will be white, and all the shades in between (1-254) will be various shades of red. The phosphors are so small that the human eye perceives a phosphor triad (pixel) as a single colour. The number of possible colours that can be generated by the three phosphors in combination can be calculated as follows: 256 x 256 x 256 = 16, 777,216.

components of the colour tangerine For example, by mixing the brightness (or intensity) of the colours like this: 204 Red, 153 Green, and 102 Blue, we produce a tangerine colour (shown). If we were to mix the three colours together at a value of 255 each, it would produce white (all colours on). Red, Green and Blue all set to a value of 0 produce black (all colours off).

Examples of RGB Colours

Here are a few common colour combinations you will see over and over again.

0
red
+ 0
green
+ 0
blue
= black If there is no red, no green, and no blue, that gives us black.
255
red
+ 255
green
+ 255
blue
= white If there is all red, all green, and all blue, that gives us white.
255
red
+ 0
green
+ 0
blue
= red If there is all red, no green, and no blue, that gives us red.
0
red
+ 255
green
+ 0
blue
= green If there is no red, all green, and no blue, that gives us green.
0
red
+ 0
green
+ 255
blue
= blue If there is no red, no green, and all blue, that gives us blue.
255
red
+ 0
green
+ 255
blue
= magenta If there is all red, no green, and all blue, that gives us magenta.
255
red
+ 255
green
+ 0
blue
= yellow If there is all red, all green, and no blue, that gives us yellow.
0
red
+ 255
green
+ 255
blue
= cyan If there is no red, all green, and all blue, that gives us cyan.

Colour Space Summary

Coming Soon:

Feb 13
ISSD 24 - XML
Feb 14
Web Design Level 4: XHTML Advanced
Feb 21
ISSD 23 - Web 2.0 Technology
Feb 23
Facebook for Business
Hours: 2
Cost: Free!
Feb 25
Search Engine Optimization (SEO)
Hours: 2
Cost: Free!
Feb 25
Search Engine Marketing (SEM)
Hours: 2
Cost: Free!
Feb 27
ISSD 24 - OLDB (Online Databases with MySQL and PHP)
Mar 05
ISSD 23 - Ajax
Mar 20
Web Design Level 5: DHTML Introduction


Photoshop - TOC - Introduction - Books -
Digital Graphics - Links - Questions -
1 - 2 - 3 - 4 - [ 5 ] - 6 - 7 - 8 - 9 - A -

Photoshop - TOC - Introduction - Books -
Digital Graphics - Links - Questions -
1 - 2 - 3 - 4 - [ 5 ] - 6 - 7 - 8 - 9 - A -