1. Colour Use In Digital Media Damien Markey

2. Colour All visual media depend on colour Black text on a white background is common for printed matter but less so in multimedia Correct choice of colour is important we must consider –visual implications –technological requirements To do this well we must understand both

3. Visible Spectrum No matter how the colour is generated we depend on the eye and brain to interpret it Our eyes detect electromagnetic waves in the range Violet (400nm) to Red (700nm) We can distinguish about 17 million different colours colours do not merely mean different wavelengths most sources emit a mixture of wavelengths

4. Language of Colour Dominant wavelength, purity, luminance –dominant wavelength is the wavelength of the colour that we see - it corresponds to the concept of hue –purity corresponds roughly to the saturation of the colour i.e., proportion of dominant wavelength in the mix of wavelengths making up the colour –luminance is the amount of light – brightness We can typically distinguish –about 128 hues and 20 levels of saturation

5. Perception People have three types of receptors in the retina sensitive to red, green and blue light But the blue receptors are approximately 40 times less sensitive to variations than the red and green ones This means that we perceive equally intense amounts of different wavelengths differently –the eyes' response can be represented by the luminosity curve

6. Mixing Colours: Light White light contains all visible wavelengths –additive colours start from black and add colour –red, green, and blue are called primary colours cannot be created by mixing other light colours

7. Secondary Colours - Light mixing primary colours produces secondary colours –red plus green gives yellow –green plus blue gives cyan –blue plus red gives magenta

8. Mixing Colours: Pigment/Print Black pigment absorbs all visible wavelengths –subtractive colours Start from white and subtract wavelengths –red, blue, and yellow are called primary colours They cannot be created by mixing other pigment colours

9. Secondary colours – Pigment/Print Mixing primary colours produces secondary colours –red plus blue gives violet –blue plus yellow gives green –yellow plus red gives orange

10. But with pigments… It’s an approximation – not accurate The theory is weak but in practice it just about works Red absorbs green and blue light Blue absorbs red and green light Pigments don't mix perfectly and don't produce something with the combined characteristics just some molecules with one characteristic and some with another

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

12. Print Colours Printers, which must use a fixed set of pigments, typically use specially prepared pigments called Commercial Primaries. –Cyan, Magenta, Yellow Light colours as opposed to the dark red and blue The secondary colour produced by mixing two primary colours is called the complementary colour to third primary –yellow & violet, red & green, blue & orange

13. Complementary Colours Complementary colours balance each other giving an exciting contrast –yellow and violet are an extreme light-dark contrast –red and green at the same saturation have the same brightness Complementary pigment colours each absorb their complement's colour –yellow absorbs blue; cyan absorbs red; magenta absorbs green

14. Colour Models CIE (Commission International L'Eclairage) colour space -1931 (CIE XYZ) –based on the tri-stimulus theory a relatively complex mathematical model includes all visible colours –that includes monitor colours and printer colours often referred to as LAB which is actually a derivative created in 1976

15. LAB colour LAB is luminosity, a, b –a is a colour range from deep green to vivid pink –b is a colour range from bright blue to burnt yellow –they are subtractive

16. RGB RGB - a simple mathematical model –each colour is represented by three values –R, G & B each between 0 and 255, or 0% to 100% e.g. 100% R, 0% G, 0% B is pure, saturated, intense red –used on computers as monitors use these three colours

17. CMYK CMYK (Cyan, Magenta, Yellow, Black) used in printers - four colour ribbons/inks commercial subtractive primaries each removes complementary colour from the reflected light –e.g., cyan equals minus red, etc.

18. CMYK v RGB so screen image can easily be converted to print –e.g. 70% R, 10% G, 35% B needs 30% C, 90% M, 65% Y. –100% C, 100% M, 0% Y is pure Blue - in theory at least

19. YUV YUV (luminance, blue and red colour difference) Y is derived from Red, Green & Blue values in proportion to the eyes' sensitivity to them – complex Y with zero U & zero V gives shades of grey –black and white TV picture U and V are differences between Blue and Y, & Red and Y

20. YUV component video For PAL,Y = 0.30R + 0.59G + 0.11B –and U = 0.493(B-Y), V = 0.877(R-Y) e.g., Y =.11, U = 0.43877, V = -0.09647 means 100% Blue and 0% Red,0% Green, i.e., pure Blue U and V combined together provide chrominance or chroma – C –less accurate means of recording colour values RGB, CMYK and YUV are hardware based

21. HSB (hue, saturation, brightness) HSB (hue, saturation, brightness) is user oriented: –based on artist's tint, shade and tone –360 hues: red at 0, yellow at 60, green at 120, cyan at 180, blue at 240, magenta at 300 –saturation and brightness between 0 & 1 –brightness of 0 is always black –saturation of 0 is always grey: from black to white

22. HSL –saturation and brightness of 1 is a pure shade e.g. H=0, S=l, B=l is pure Red –also HSL (hue, saturation, luminance) and HLS (hue, lightness, saturation)

23. Colour Monitors Three electron guns exciting red, green and blue phosphors painted on reverse of screen Phosphors arranged in trios –sets of three closely positioned dots forming a single spot - a triad commonly called a pixel (picture element) Number of triads varies with size of screen and quality –dot pitch is spacing between triads -.30mm to.23mm Additive mixing process

24. Colour Monitors 2 Variation in strength of electron beam gives various intensities of colour –cannot display all colours visible to human eye Maximum intensity of each gun produces white; minimum produces black the white point is a measure of the colour produced when all three guns are at full power - i.e. the monitors idea of white –in fact, this is normally some what blue –the white point is normally specified as a colour temperature

25. Colour Temperature The normal colour temperature for a computer monitor is 9300°K –This a high-intensity white for viewing under normal office lighting conditions –10,000°K is the temperature of open shade in clear skylight –7500°K is normally called "daylight" –6500°K is a value typically for televisions - somewhat red

26. Gamma Correction modern quality monitors permit the user to choose the value to match their actual situation and adjust the relative values of red, green and blue Gamma correction: a gamma correction value adjusts for the non-linearity of phosphor excitation effectively changing gamma has a similar effect to shifting the mid-point in Photoshop's Curves dialogue Gamut –Range of colours representable within a colour model –Profiles

27. Colour Profiles The ICC (International Colour Consortium) has defined a standard form of profile Modern software can read these profiles and apply them and most devices now come supplied with ICC profile(s) gamma-correction can be applied to each gun independently to alter the colour values sent to a computer monitor to match up to the theoretical values

28. Colour Profiles - 2 software that uses gamma correction applies it to the values sent to the graphics card in order to better reproduce the range of colours on the particular monitor Standard values are 1.8 on Macs and 2.2 in Windows

29. LCD Screens Similar arrangement using active LCDs (TFTs) rather than passive phosphers –Dot pitch typically 0.27mm

30. sRGB Colour Space The default working-space Photoshop has opted for is sRGB (standardised RGB) and the most important change in colour space it involves is the move from the previous 1.8 gamma used by Photoshop to a new 2.2 gamma The difference this causes can be seen if you swap between default sRGB space and the previous space - now called "Apple RGB" - with the RGB Setup dialogue

31. Palettes Mac and Windows systems are designed around a 24-bit RGB colour model Even if the graphics mode in use isn't 24-bit the system derives the colours used from the 16.7M available in the 24-bit system If the graphics mode uses a smaller range some method of identifying which colours are within the smaller range must be used One method is to use a CLUT (colour look -up table)

32. Palettes - 2 Called a palette on a Windows system Images stored using palette information are called palettised or indexed Palettes are most commonly 8-bit The bits that specify the colours actually specify a palette value The palette holds the actual 24-bit colour value

33. WWW Palette Issues There are default 256 colour palettes for Macs and Windows Statistically selected as the most frequently needed colours But these are not identical Only 216 of the colours are the same - the "Web safe" palette –Netscape Navigator uses a 216 colour palette

34. WWW Palette Issues 2 Internet Explorer uses the Windows' 256 colour palette –The Windows' 256 colour palette includes 20 "system" colours Any other palette used under Windows must include these 20 basic colours These are used by Windows for its own components

35. Preparation of Media All media must be prepared for the appropriate colour depth –this affects images, graphics, animation and video For MM it depends on the colour depth chosen for the project –This may be 256 colours may be more for known purpose/specialist audience –For WWW it can be as low as 256 colours as a general rule

36. Preparation of Media - 2 however, many users have more colours available and browsers will automatically re-map high colour images to 256 colours so the trade-off is between colour fidelity and download time if supplying 16- or 24-bit images test view them in all common browsers at 256 colours if not reduce them to 256 colours remember the 216 "web-safe" colours - use web palette if appropriate warn viewers before they access large images

37. Identification of colours Use hexadecimal RGB to identify colours, FFOOOO is pure red Use the colour picker (available in most programs to identify an existing colour that you wish to identify

38. Flash import Flash will import: –Images - Bitmapped: BMP, GIF, JPEG, PICT, PNG, TIFF, PSD, TGA –Images - Vector: Encapsulated Postscript (EPS), Adobe Illustrator (AI), AutoCAD Drawing Exchange Format (DXF), Freehand (FH7 - FH10), Windows Metafile (WMF), Enhanced Windows Metafile (EMF) and Shockwave Flash (SWF)

39. Flash 2 Flash uses 24-bit colour depth Animation: Animated GIF Video: QuickTime (.MOV), Video for Windows (.AVI), Digital Video, MPEG, Window Media Video (.MVA or.ASF). Flash Video (.FLV) Flash will create and colour: –Text –Images –Vectors –Animation

40. WWW Pages Images are restricted to: GIF, JPEG and PNG GIF are 256 colours JPEG are 16.7 million colours PNG are usually 16.7 million colours

41. Colour Values for Television Digital Video Unlike computers the range of colour (extreme black to extreme white) used on TVs does not correspond to the range used on computers So while we use: –0,0,0 for the RGB values for black and 255,255,255 for the RGB values for white on computers for still images and video –for video intended for TV use the values 16,16,16 and 235,235,235