Colour Use In Digital MediaColour Use In Digital Media

Damien MarkeyDamien Markey

ColourColour

All visual media depend on colourAll visual media depend on colour

Black text on a white background is common Black text on a white background is common for printed matter but less so in multimediafor printed matter but less so in multimedia

Correct choice of colour is importantCorrect choice of colour is important

we must considerwe must consider– visual implicationsvisual implications– technological requirementstechnological requirements

To do this well we must understand bothTo do this well we must understand both

Visible SpectrumVisible Spectrum

No matter how the colour is generated we No matter how the colour is generated we depend on the eye and brain to interpret itdepend on the eye and brain to interpret it

Our eyes detect electromagnetic waves in the Our eyes detect electromagnetic waves in the range Violet (400nm) to Red (700nm)range Violet (400nm) to Red (700nm)

We can distinguish about We can distinguish about 17 million 17 million different different colourscolours

colours do not merely mean different colours do not merely mean different wavelengthswavelengths

most sources emit a mixture of wavelengthsmost sources emit a mixture of wavelengths

Language of Language of ColourColour

Dominant wavelength, purity, luminanceDominant wavelength, purity, luminance– dominant wavelengthdominant wavelength is the wavelength of the is the wavelength of the

colour that we see -colour that we see -it corresponds to the concept of it corresponds to the concept of huehue

– puritypurity corresponds roughly to the corresponds roughly to the saturation saturation of of the colourthe colour

i.e., proportion of i.e., proportion of dominant wavelength dominant wavelength in the mix of in the mix of wavelengths making up the colourwavelengths making up the colour

– luminanceluminance is the amount of light – is the amount of light – brightnessbrightness

We can typically distinguishWe can typically distinguish– about about 128128 hues and 20 levels of saturation hues and 20 levels of saturation

PerceptionPerception

People have three types of receptors in the People have three types of receptors in the retina sensitive to red, green and blue lightretina sensitive to red, green and blue light

But the But the blueblue receptors are approximately 40 receptors are approximately 40 times less sensitive to variations than the times less sensitive to variations than the redred and and greengreen ones ones

This means that we perceive equally intense This means that we perceive equally intense amounts of different wavelengths differentlyamounts of different wavelengths differently– the eyes' response can be represented by the the eyes' response can be represented by the

luminosity curveluminosity curve

Mixing Colours: Mixing Colours: LightLight

White light contains all visible White light contains all visible wavelengthswavelengths– additiveadditive colours colours

start from black and add colourstart from black and add colour

– red, green, and blue are called red, green, and blue are called primaryprimary colourscolours

cannot be created by mixing other light cannot be created by mixing other light colourscolours

Secondary Colours Secondary Colours - Light- Light

mixing primary colours produces mixing primary colours produces secondarysecondary colourscolours– red plus green gives yellowred plus green gives yellow– green plus blue gives cyan green plus blue gives cyan – blue plus red gives magentablue plus red gives magenta

Mixing Colours: Mixing Colours: Pigment/PrintPigment/Print

Black pigment absorbs all visible Black pigment absorbs all visible wavelengthswavelengths– subtractive colourssubtractive colours

Start from white and subtract wavelengthsStart from white and subtract wavelengths

– red, blue, and yellow are called primary red, blue, and yellow are called primary colourscolours

They cannot be created by mixing other pigment They cannot be created by mixing other pigment colourscolours

Secondary colours Secondary colours – Pigment/Print– Pigment/Print

Mixing primary colours produces secondary Mixing primary colours produces secondary colourscolours– red plus blue gives red plus blue gives violetviolet– blue plus yellow gives blue plus yellow gives green green – yellow plus red gives yellow plus red gives orangeorange

But with But with pigments…pigments…

It’s an approximation – not accurateIt’s an approximation – not accurate

The theory is weak but in practice it just about The theory is weak but in practice it just about worksworks

Red absorbs green and blue lightRed absorbs green and blue light

Blue absorbs red and green lightBlue absorbs red and green light

Pigments don't mix perfectly and don't Pigments don't mix perfectly and don't produce something with the combined produce something with the combined characteristics just some molecules with characteristics just some molecules with one characteristic and some with anotherone characteristic and some with another

PaintPaint

So mixed together equally their molecules So mixed together equally their molecules all absorb the green and half absorb the all absorb the green and half absorb the red and half absorb the blue - result a dark red and half absorb the blue - result a dark purplish colourpurplish colour– Pigments used in paints aren't purePigments used in paints aren't pure– Painters don't just use red, blue and yellowPainters don't just use red, blue and yellow

Print ColoursPrint Colours

Printers, which must use a fixed set of pigments, Printers, which must use a fixed set of pigments, typically use specially prepared pigments called typically use specially prepared pigments called Commercial Primaries.Commercial Primaries.– Cyan, Magenta, Yellow Cyan, Magenta, Yellow

Light colours as opposed to the dark red and blueLight colours as opposed to the dark red and blue

The secondary colour produced by mixing two The secondary colour produced by mixing two primary colours is called the complementary primary colours is called the complementary colour to third primarycolour to third primary– yellow & violet, red & green, blue & orangeyellow & violet, red & green, blue & orange

Complementary Complementary ColoursColours

Complementary colours balance each other giving Complementary colours balance each other giving an exciting contrastan exciting contrast– yellow and violet are an extreme light-dark contrastyellow and violet are an extreme light-dark contrast– red and green at the same saturation have the same red and green at the same saturation have the same

brightnessbrightness

Complementary pigment colours each absorb their Complementary pigment colours each absorb their complement's colourcomplement's colour– yellow absorbs blue; cyan absorbs red; magenta yellow absorbs blue; cyan absorbs red; magenta

absorbs greenabsorbs green

Colour ModelsColour Models

CIE (Commission International L'Eclairage) CIE (Commission International L'Eclairage) colour space -1931 (CIE XYZ)colour space -1931 (CIE XYZ)– based on the tri-stimulus theorybased on the tri-stimulus theory

a relatively complex mathematical model a relatively complex mathematical model includes all visible coloursincludes all visible colours– that includes monitor colours and printer that includes monitor colours and printer

colourscolours

often referred to as LAB which is actually a often referred to as LAB which is actually a derivative created in 1976derivative created in 1976

LAB colourLAB colour

LAB is luminosity, a, bLAB is luminosity, a, b– a is a colour range from deep green to vivid a is a colour range from deep green to vivid

pinkpink– b is a colour range from bright blue to burnt b is a colour range from bright blue to burnt

yellowyellow– they are subtractivethey are subtractive

RGBRGB

RGB - a simple mathematical modelRGB - a simple mathematical model– each colour is represented by three valueseach colour is represented by three values– R, G & B each between 0 and 255, or 0% to R, G & B each between 0 and 255, or 0% to

100% 100% e.g. 100% R, 0% G, 0% B is pure, saturated, e.g. 100% R, 0% G, 0% B is pure, saturated, intense redintense red

– used on computers as monitors use these used on computers as monitors use these three coloursthree colours

CMYKCMYK

CMYK (Cyan, Magenta, Yellow, CMYK (Cyan, Magenta, Yellow, Black)Black)

used in printers - four colour ribbons/inksused in printers - four colour ribbons/inks

commercial subtractive primariescommercial subtractive primaries

each removes each removes complementary complementary colour from colour from the reflected lightthe reflected light– e.g., cyan equals e.g., cyan equals minus minus red, etc.red, etc.

CMYK v RGBCMYK v RGB

so screen image can easily be converted to so screen image can easily be converted to printprint– e.g. 70% R, 10% G, 35% B needs 30% C, e.g. 70% R, 10% G, 35% B needs 30% C,

90% M, 65% Y . 90% M, 65% Y . – 100% C, 100% M, 0% Y is pure Blue - in 100% C, 100% M, 0% Y is pure Blue - in

theory at leasttheory at least

YUVYUV

YUV (luminance, blue and red colour YUV (luminance, blue and red colour difference)difference)

Y is derived from Red, Green & Blue values Y is derived from Red, Green & Blue values in proportion to thein proportion to theeyes' sensitivity to them – complexeyes' sensitivity to them – complex

Y with zero U & zero V gives shades of Y with zero U & zero V gives shades of greygrey– black and white TV pictureblack and white TV picture

U and V are differences between Blue and Y, U and V are differences between Blue and Y, & Red and Y& Red and Y

YUV YUV componentcomponent videovideo

For PAL,Y = 0.30R + 0.59G + 0.11B For PAL,Y = 0.30R + 0.59G + 0.11B – and U = 0.493(B-Y), V = 0.877(R-Y)and U = 0.493(B-Y), V = 0.877(R-Y)

e.g., Y = .11, U = 0.43877, V = -0.09647 means e.g., Y = .11, U = 0.43877, V = -0.09647 means 100% Blue and 0% Red,0% Green, i.e., pure Blue100% Blue and 0% Red,0% Green, i.e., pure Blue

U and V combined together provide U and V combined together provide chrominancechrominance or or chromachroma – – CC– less accurate means of recording colour less accurate means of recording colour

valuesvalues

RGB, CMYK and YUV are hardware basedRGB, CMYK and YUV are hardware based

HSB (hue, saturation, HSB (hue, saturation, brightness)brightness)

HSB (hue, saturation, brightness) is user HSB (hue, saturation, brightness) is user oriented:oriented:– based on artist's tint, shade and tonebased on artist's tint, shade and tone– 360 hues: red at 0, yellow at 60, green at 120, 360 hues: red at 0, yellow at 60, green at 120,

cyan at 180, blue at 240, magenta at 300cyan at 180, blue at 240, magenta at 300– saturation and brightness between 0 & 1saturation and brightness between 0 & 1– brightness of 0 is always brightness of 0 is always blackblack– saturation of 0 is always saturation of 0 is always greygrey: from black to : from black to

whitewhite

HSLHSL

– saturation and brightness of 1 is a pure shadesaturation and brightness of 1 is a pure shadee.g. H=0, S=l, B=l is pure e.g. H=0, S=l, B=l is pure RedRed

– also HSL (hue, saturation, luminance) and also HSL (hue, saturation, luminance) and HLS (hue, lightness, saturation)HLS (hue, lightness, saturation)

Colour MonitorsColour Monitors

Three electron guns exciting red, green and blue Three electron guns exciting red, green and blue phosphors painted on reverse of screenphosphors painted on reverse of screen

Phosphors arranged in triosPhosphors arranged in trios– sets of three closely positioned dots forming a single sets of three closely positioned dots forming a single

spot - a spot - a triad ctriad commonly called a ommonly called a pixelpixel (picture (picture element)element)

Number of triads varies with size of screen and Number of triads varies with size of screen and quality quality – dot pitch is spacing between triads - .30mm to .23mmdot pitch is spacing between triads - .30mm to .23mm

Additive mixing processAdditive mixing process

Colour Monitors 2Colour Monitors 2

Variation in strength of electron beam gives various Variation in strength of electron beam gives various intensities of colourintensities of colour– cannot display all colours visible to human eyecannot display all colours visible to human eye

Maximum intensity of each gun produces white; Maximum intensity of each gun produces white; minimum produces blackminimum produces black

the the white point white point is a measure of the colour produced is a measure of the colour produced when all three guns are at full power - i.e. the when all three guns are at full power - i.e. the monitors idea of whitemonitors idea of white– in fact, this is normally some what bluein fact, this is normally some what blue– the the white point white point is normally specified as a is normally specified as a colour colour

temperaturetemperature

Colour Colour TemperatureTemperature

The normal colour temperature for a The normal colour temperature for a computer monitor is 9300°Kcomputer monitor is 9300°K– This a high-intensity white for viewing This a high-intensity white for viewing

under normal office lighting conditionsunder normal office lighting conditions– 10,000°K is the temperature of open shade 10,000°K is the temperature of open shade

in clear skylightin clear skylight– 7500°K is normally called "daylight"7500°K is normally called "daylight"– 6500°K is a value typically for televisions - 6500°K is a value typically for televisions -

somewhat redsomewhat red

Gamma Gamma CorrectionCorrection

modern quality monitors permit the user to choose the modern quality monitors permit the user to choose the value to match their actual situation and adjust the value to match their actual situation and adjust the relative values of red, green and bluerelative values of red, green and blue

Gamma correction: a gamma correction value adjusts for Gamma correction: a gamma correction value adjusts for the non-linearity of phosphor excitationthe non-linearity of phosphor excitation

effectively changing gamma has a similar effect to effectively changing gamma has a similar effect to shifting the mid-point in Photoshop's Curves dialogueshifting the mid-point in Photoshop's Curves dialogue

GamutGamut

– Range of colours representable within a colour Range of colours representable within a colour modelmodel

– ProfilesProfiles

Colour ProfilesColour Profiles

The The ICC (International Colour Consortium) ICC (International Colour Consortium) has has defined a standard form of profiledefined a standard form of profile

Modern software can read these profiles and apply Modern software can read these profiles and apply them and most devices now come supplied with them and most devices now come supplied with ICC profile(s)ICC profile(s)

gamma-correction can be applied to each gun gamma-correction can be applied to each gun independently to alter the colour values sent to a independently to alter the colour values sent to a computer monitor to match up to the theoretical computer monitor to match up to the theoretical valuesvalues

Colour Profiles - 2Colour Profiles - 2

software that uses gamma correction software that uses gamma correction applies it to the values sent to the graphics applies it to the values sent to the graphics card in order to better reproduce the range card in order to better reproduce the range of colours on the particular monitorof colours on the particular monitor

Standard values are 1.8 on Macs and 2.2 in Standard values are 1.8 on Macs and 2.2 in WindowsWindows

LCD ScreensLCD Screens

Similar arrangement using active LCDs Similar arrangement using active LCDs (TFTs) rather than passive phosphers(TFTs) rather than passive phosphers– Dot pitch typically 0.27mmDot pitch typically 0.27mm

sRGB Colour sRGB Colour SpaceSpace

The default working-space Photoshop has opted The default working-space Photoshop has opted for is sRGB (standardised RGB) and the most for is sRGB (standardised RGB) and the most important change in colour space it involves is important change in colour space it involves is the move from the previous 1.8 gamma used by the move from the previous 1.8 gamma used by Photoshop to a new 2.2 gammaPhotoshop to a new 2.2 gamma

The difference this causes can be seen if you The difference this causes can be seen if you swap between default sRGB space and the swap between default sRGB space and the previous space - now called "Apple RGB" - with previous space - now called "Apple RGB" - with the RGB Setup dialoguethe RGB Setup dialogue

PalettesPalettes

Mac and Windows systems are designed around a Mac and Windows systems are designed around a 24-bit RGB colour model24-bit RGB colour model

Even if the graphics mode in use isn't 24-bit the Even if the graphics mode in use isn't 24-bit the system derives the colours used from the 16.7M system derives the colours used from the 16.7M available in the 24-bit systemavailable in the 24-bit system

If the graphics mode uses a smaller range some If the graphics mode uses a smaller range some method of identifying which colours are within method of identifying which colours are within the smaller range must be usedthe smaller range must be used

One method is to use a CLUT (colour look -up One method is to use a CLUT (colour look -up table)table)

Palettes - 2Palettes - 2

Called a palette on a Windows systemCalled a palette on a Windows system

Images stored using palette information are Images stored using palette information are called called palettised palettised or or indexedindexed

Palettes are most commonly 8-bitPalettes are most commonly 8-bit

The bits that specify the colours actually The bits that specify the colours actually specify a palette valuespecify a palette value

The palette holds the actual 24-bit colour The palette holds the actual 24-bit colour valuevalue

WWW Palette WWW Palette IssuesIssues

There are default 256 colour palettes for Macs and There are default 256 colour palettes for Macs and WindowsWindows

Statistically selected as the most frequently Statistically selected as the most frequently needed coloursneeded colours

But these are not identicalBut these are not identical

Only 216 of the colours are the same - the "Web Only 216 of the colours are the same - the "Web safe" palettesafe" palette– Netscape Navigator uses a 216 colour paletteNetscape Navigator uses a 216 colour palette

WWW Palette WWW Palette Issues 2Issues 2

Internet Explorer uses the Windows' 256 Internet Explorer uses the Windows' 256 colour palettecolour palette– The Windows' 256 colour palette includes 20 The Windows' 256 colour palette includes 20

"system" colours"system" colours

Any other palette used under Windows must Any other palette used under Windows must include these 20include these 20basic colours basic colours

These are used by Windows for its own These are used by Windows for its own componentscomponents

Preparation of Preparation of MediaMedia

All media must be prepared for the All media must be prepared for the appropriate colour depthappropriate colour depth– this affects images, graphics, animation this affects images, graphics, animation

and videoand videoFor MM it depends on the colour depth For MM it depends on the colour depth

chosen for the projectchosen for the project– This may be 256 coloursThis may be 256 colours

may be more for known purpose/specialist may be more for known purpose/specialist audienceaudience– For WWW it can be as low as 256 colours For WWW it can be as low as 256 colours

as a general ruleas a general rule

Preparation of Preparation of Media - 2Media - 2

however, many users have more colours available however, many users have more colours available and browsers will automatically re-map high and browsers will automatically re-map high colour images to 256 colourscolour images to 256 colours

so the trade-off is between colour fidelity and so the trade-off is between colour fidelity and download timedownload time

if supplying 16- or 24-bit images test view them in all if supplying 16- or 24-bit images test view them in all common browsers at 256 colourscommon browsers at 256 colours

if not reduce them to 256 coloursif not reduce them to 256 coloursremember the 216 "web-safe" colours - use web remember the 216 "web-safe" colours - use web

palette if appropriatepalette if appropriatewarn viewers before they access large imageswarn viewers before they access large images

Identification of Identification of colourscolours

Use hexadecimal RGB to identify colours,Use hexadecimal RGB to identify colours,

FFOOOO is pure redFFOOOO is pure red

Use the colour picker (available in most Use the colour picker (available in most programs to identify an existing colour that programs to identify an existing colour that you wish to identifyyou wish to identify

Flash importFlash import

Flash will import:Flash will import:– Images - Bitmapped: BMP, GIF, JPEG, PICT, Images - Bitmapped: BMP, GIF, JPEG, PICT,

PNG, TIFF, PSD, TGAPNG, TIFF, PSD, TGA– Images - Vector: Encapsulated Postscript Images - Vector: Encapsulated Postscript

(EPS), Adobe Illustrator (AI), AutoCAD (EPS), Adobe Illustrator (AI), AutoCAD Drawing Exchange Format (DXF),Drawing Exchange Format (DXF),Freehand (FH7 - FH10), Windows Metafile Freehand (FH7 - FH10), Windows Metafile (WMF), Enhanced Windows Metafile (EMF) (WMF), Enhanced Windows Metafile (EMF) and Shockwave Flash (SWF)and Shockwave Flash (SWF)

Flash 2Flash 2

Flash uses 24-bit colour depthFlash uses 24-bit colour depthAnimation: Animated GIFAnimation: Animated GIFVideo: QuickTime (.MOV), Video for Windows Video: QuickTime (.MOV), Video for Windows

(.AVI), Digital Video, MPEG, Window Media (.AVI), Digital Video, MPEG, Window Media Video (.MVA or .ASF). Flash Video (.FLV)Video (.MVA or .ASF). Flash Video (.FLV)

Flash will create and colour:Flash will create and colour:– TextText– ImagesImages– VectorsVectors– AnimationAnimation

WWW PagesWWW Pages

Images are restricted to: GIF, JPEG and PNGImages are restricted to: GIF, JPEG and PNG

GIF are 256 coloursGIF are 256 colours

JPEG are 16.7 million coloursJPEG are 16.7 million colours

PNG are usually 16.7 million coloursPNG are usually 16.7 million colours

Colour Values for Colour Values for Television Digital VideoTelevision Digital Video

Unlike computers the range of colour (extreme Unlike computers the range of colour (extreme black to extreme white) used on TVs does black to extreme white) used on TVs does not correspond to the range used on not correspond to the range used on computerscomputers

So while we use:So while we use:– 0,0,0 for the RGB values for black and 0,0,0 for the RGB values for black and

255,255,255 for the RGB values for white on 255,255,255 for the RGB values for white on computers for still images and videocomputers for still images and video

– for video intended for TV use the values 16,16,16 for video intended for TV use the values 16,16,16 and 235,235,235and 235,235,235