School of Computer Science & Information Technology

School of Computer Science & Information Technology

G6DPMM - Lecture 6G6DPMM - Lecture 6

Colour Science & Colour ModelsColour Science & Colour Models

Colour RepresentationColour Representation Colour is represented as a numberColour is represented as a number Indexed Colour (<24 bit)Indexed Colour (<24 bit)

Each number is an index into a lookup table (palette)Each number is an index into a lookup table (palette)For example (a 2-bit palette):For example (a 2-bit palette):

0 – black0 – black 1 – white1 – white 2 – red2 – red 3 – green3 – green

Implemented in hardware (obsolete)Implemented in hardware (obsolete) True colour definitionTrue colour definition ColourmappingColourmapping

True Colour (25 bit)True Colour (25 bit) Each number represents a colour using a mathematical model Each number represents a colour using a mathematical model

known as a “colour model”known as a “colour model”

The Physics of ColourThe Physics of Colour

Light is an EM wave in the “visible” part of the Light is an EM wave in the “visible” part of the spectrum (400-700nm)spectrum (400-700nm)

Frequency represents colourFrequency represents colour Amplitude represents brightnessAmplitude represents brightness

CosmicRays

GammaRays

X-Rays UV Visible Light

IR Microwaves TV Radio Electricity

0.00001nm 0.001nm 1nm 10nm 0.00003m 0.03m 0.3m 30m 5,500km

400nm 700nm

The Biology of ColourThe Biology of Colour The human eyeThe human eye

Light is focused onto the retinaLight is focused onto the retina The retina contains rods and conesThe retina contains rods and cones

RodsRods Very sensitive – can detect amplitude of lightVery sensitive – can detect amplitude of light No mechanism for colour detectionNo mechanism for colour detection

ConesCones Less sensitiveLess sensitive Three types – Red, Green & BlueThree types – Red, Green & Blue Each can detect the amplitude of one “primary” colourEach can detect the amplitude of one “primary” colour

Additive coloursAdditive colours Cognition not physics!Cognition not physics! Approximately 10-20 million additive colours can be distinguishedApproximately 10-20 million additive colours can be distinguished

Primary / Additive ColoursPrimary / Additive Colours

Red Green Blue

Red & GreenRed & BlueGreen & BlueRed, Green & BlueNone

Red Green Blue

Yellow Purple Cyan White Black

Primary

Additive

RGB Colour Model 3 Colour Channels3 Colour Channels

RGB - 1 byte each - 0-255RGB - 1 byte each - 0-255

Encodes 256 x 256 x 256 = 16,777,216 ColoursEncodes 256 x 256 x 256 = 16,777,216 Colours True colour (24 bit colour)True colour (24 bit colour) Notation is 3 integers (often written as hex)Notation is 3 integers (often written as hex) ExamplesExamples

255, 255, 255 (FF FF FF) - White255, 255, 255 (FF FF FF) - White 255, 0, 0 (FF 00 00) - Red255, 0, 0 (FF 00 00) - Red 255, 0, 255 (FF 00 FF) - Magena255, 0, 255 (FF 00 FF) - Magena 100, 100, 50 (64 64 32) - Olive100, 100, 50 (64 64 32) - Olive

HSB Colour Model Hue, Saturation & BrightnessHue, Saturation & Brightness

Hue is an angle (0-360)Hue is an angle (0-360)specifying the position on a specifying the position on a colour wheel.colour wheel.

Saturation is a percentage representing Saturation is a percentage representing the difference from a neutral grey.the difference from a neutral grey.

Brightness is a Brightness is a percentage representing percentage representing the continuum from the continuum from black to white.black to white.

0% 100%

0% 100%

Other Colour Models CMYK CMYK

Used mostly for printing, based on cyan, magenta, Used mostly for printing, based on cyan, magenta, yellow and black inks used for colour separation.yellow and black inks used for colour separation.

YIQ & YUV YIQ & YUV Used for broadcast TV, an analogue system based upon Used for broadcast TV, an analogue system based upon

luminance, chrominance of wave phases.luminance, chrominance of wave phases. YCCYCC

Developed by Kodak for Photo CDDeveloped by Kodak for Photo CD PantonePantone

Colour “catalogue” used by printing industry.Colour “catalogue” used by printing industry.

Colour Management

““Perceived” colour is hard to keep exactly constant.Perceived” colour is hard to keep exactly constant. Many factors affect thisMany factors affect this

Colour modelColour model MonitorMonitor Ambient lightingAmbient lighting Platform (eg Macintosh is typically “brighter” than Windows)Platform (eg Macintosh is typically “brighter” than Windows)

Major problem in multimediaMajor problem in multimedia

Image Processing

Processing techniques can create an illusion of Processing techniques can create an illusion of colour and detail that is not really present.colour and detail that is not really present.

DitheringDithering When reducing colour depth each pixel must be When reducing colour depth each pixel must be

replaced with a corresponding pixel in the target replaced with a corresponding pixel in the target palette.palette.

AntialiasingAntialiasing When resizing each pixel may be replaced by When resizing each pixel may be replaced by

intermediate colours to avoid “pixelation”intermediate colours to avoid “pixelation”

Dithering

Each pixel must be replaced with a corresponding Each pixel must be replaced with a corresponding pixel in the target palette.pixel in the target palette.

Adjacent pixels are examined and intermediate Adjacent pixels are examined and intermediate colours may be usedcolours may be used

Dithering software is built into most bitmap Dithering software is built into most bitmap editing/processing softwareediting/processing software

Algorithms:Algorithms: RandomRandom AverageAverage OrderedOrdered Floyd-SteinbergFloyd-Steinberg

Random Dither

Generate a random (0-255) number Generate a random (0-255) number for each pixelfor each pixel

If greater than the number If greater than the number pixel=white otherwise blackpixel=white otherwise black

Crude and “noisy”.Crude and “noisy”.Almost never usedAlmost never used

Random DitherRandom Dither

Average Dither

Calculate an average pixel valueCalculate an average pixel valueIf each pixel is above this then white, If each pixel is above this then white,

else black.else black.Crude and “contrasty”.Crude and “contrasty”.Almost never used.Almost never used.

Average DitherAverage Dither

Ordered Dither (pattern)

Divide the image into ordered cells - ie Divide the image into ordered cells - ie matrices.matrices.

Uses matrix arithmetic to compare each pixel Uses matrix arithmetic to compare each pixel with the average “threshold”.with the average “threshold”.

Generate a block of pixels to represent each Generate a block of pixels to represent each cell.cell.

Widely used by the printing industry - rare in Widely used by the printing industry - rare in multimedia.multimedia.

Ordered DitherOrdered Dither

Floyd-Steinberg Dither

Error diffusion, diffusion, dispersion.Error diffusion, diffusion, dispersion. For each pixel the closest colour is found For each pixel the closest colour is found The difference between this and the original is the error for The difference between this and the original is the error for

that pixel.that pixel. The error is then “diffused” over adjacent pixels that have not The error is then “diffused” over adjacent pixels that have not

yet been processed.yet been processed. When these pixels are processed, the error is added to the When these pixels are processed, the error is added to the

newly calculated colour.newly calculated colour. Widely used in multimedia.Widely used in multimedia. Many minor variants.Many minor variants.

Floyd-Steinberg DitherFloyd-Steinberg Dither

Original (24-bit) ImageOriginal (24-bit) Image

8 Colour - No Dither8 Colour - No Dither

8 Colour - Ordered Dither8 Colour - Ordered Dither

8 Colour - Diffusion Dither8 Colour - Diffusion Dither

Antialiasing

ResamplingResampling Avoids pixellation (“jaggies”) on resizing.Avoids pixellation (“jaggies”) on resizing. Creates intermediate colour pixels around Creates intermediate colour pixels around

edges.edges.

Original ImageOriginal Image

Scaled ImageScaled Image

Scaled Image (detail)Scaled Image (detail)

Scaled Image (antialiased)Scaled Image (antialiased)

Antialiased image - detailAntialiased image - detail