Current Location: Home > Presentation Design > Colour >

# Colour

The RGB system

The RGB System is the main colour definition system. It uses 3 colours in varying Hue's too create a large number of different colours. The primary colours are Red, Green and Blue

Hue with the RGB system

If a colour has a blue Hue it is considered a variant of the primary colour Blue and is distinguished from other colours. Too get specific colours you change the Hue.

Example - Hue

RED + YELLOW = ORANGE

 Red Green Blue RED 255 0 0 YELLOW 255 255 0 Calculations 255 + 255 / 2 = 255 255 + 0 / 2 = 127.5 0 + 0 / 2 = 0 ORANGE 255 127 0

Saturation with the RGB system

Saturation refers to how pure the hue is with respect to a white reference. A de-saturated colour looks more pastel and hence more white looking pink which looks pinkish. Too accomplish this you simply move all the colours closer too white

Example - Saturation

RED -> PINK -> WHITE

 Red Green Blue RED 255 0 0 RED1 255 85 85 RED2 255 153 153 RED3 255 204 204

The Next Step at 255,255,255 will make the colour white
RED3 is less saturated than RED1

Making a colour darker with the RGB system

To make a colour Darker you simply adjust the RGB values towards black

Example - Darkness

RED -> DARK RED -> BLACK

 Red Green Blue RED 255 0 0 RED1 204 0 0 RED2 153 0 0 RED3 102 0 0 RED4 51 0 0 RED5 0 0 0

The Colour Square(Wheel)

Base System

The System works in 2 different Base Systems. Decimal and Hexadecimal. Decimal is the numbers 0 -> 255, and Hexadecimal ranges from 00 -> FF (F is Decimal 15). So 255 in Decimal is FF in Hexadecimal, 153 in Decimal is 99 in Hexadecimal.

Too convert from HEX -> DEC you multiply the first HEX value by 15 (A=10, B=11, C=12, D=13, E=14, F=15) then add the second HEX value EA = (14*15)+10 = 220.

Websafe Colours

Colours do not look the same from one browser too the next. There are 216 colours that should look the same in every browser. In the HEX scale all colours should be in a 33 Index I.E. 33,66,99,CC,FF.

Colour Schemes

Monochromatic colour schemes use a single Hue with different saturations

• MONOCHROMATIC
• MONOCHROMATIC
• MONOCHROMATIC
• MONOCHROMATIC
• MONOCHROMATIC
• MONOCHROMATIC

Analogous colour schemes use hues that are near each other on a colour wheel

• ANALOGOUS
• ANALOGOUS

Triadic colour schemes use hues at 3 equidistant points on a colour wheel. Triadic colours are easy to pick when looking at the RGB Values as each occurs once in each place I.E. (255,153,51), (153,51,255), (51,255,153)

Complementary colour schemes use hues on opposite sides of a colour wheel. Complementary colours are easy to pick when looking at the RGB values as each value for R, for G, and for B, will add up to 255. (255,153,51), (0,102,204)

• COMPLEMENTARY
• COMPLEMENTARY
 000,255,000 051,255,051 102,255,102 153,255,153 204,255,204 255,255,255 Monochromatic
 102,255,153 102,255,102 000,255,102 Analogous
 102,051,102 051,102,102 102,102,051 153,153,204 Complementary

Sample Colour Scheme

Taking the Monochromatic Green Scheme from above you can use any of those green back colours for the backgrounds. For the foreground colours a simple Black for text and maybe a Deep Blue for some other texts

Background
• 000,255,000 - Green
• 051,255,051
• 102,255,102
• 153,255,153 - Very Light Green (Pastel)
Foreground
• 000,000,000 - Text
• 000,000,255 - Blue Text