Colour Modes

Colour modes are the colour spaces you can work in when using Photoshop. Since you'll be working primarily with the RGB colour mode when producing Web graphics, we won't delve too deeply into the other colour modes. In this lecture an overview of the more common ones will be presented. You will eventually encounter situations where you open an image in Photoshop that is in a colour mode other than RGB so it will be good to know a bit about them and how to convert from one mode to another. Another reason is that the Adobe Colour Picker lets you mix colours based on four colour models: RGB, CMYK, L*a*b and HSB.

RGB Mode

RGB additive colours RGB mode is based on the RGB colour model. It is called an additive colour model because adding all the colours together produces white which reflects all light back to the eye. The diagram illustrates this concept.

As mentioned in previous lectures, RGB colours are created by setting red, green and blue to values between 0-255. When all three values are 0, black is produced. When all three values are 255, white is produced.


CMYK subtractive colours The CMYK colour model is used in images that will be output to a print medium using ink. The base colours of CMYK are cyan (C), magenta (M), yellow (Y) and black (K is used to distinguish it from B/blue). Theoretically, when combined, C, M, and Y should produce pure black. With black, all light is absorbed and thus this colour model is called a subtractive colour model. In reality, pure black is not produced with this combination of inks so black is included in the CMYK colours for this purpose.

In Photoshop, CMYK colours are mixed according to percentage values. Lighter colours contain lower percentage values and white is produced when all values are set to 0%. Black is produced when all values are set to 100%.

L*a*b Mode

The L*a*b colour model was designed to be device-independent. It should produce consistent colour regardless whether the output is viewed on a monitor screen or printed. L*a*b consists of three colour components. L (luminance) is the brightness value and ranges from 0-100. The a and b components are chromatic values. The a component consists of a green-red axis while the b component consists of a blue-yellow axis.

In Photoshop, the luminance values can range from 0-100. Both a and b chromatic values can range from +120 to -120. L*a*b is used internally by Photoshop in converting from one colour mode to another.

HSB Colour Model

There isn't an HSB mode that you can work with in Photoshop; however, the Adobe Colour Picker offers HSB as one method of mixing colours and it can be a useful way to do so. HSB stands for Hue, Saturation, and Brightness. A hue is a shade of colour; e.g., orange, blue, purple. Saturation determines the strength of the hue. Brightness is the lightness/darkness of a colour.

For example, let's say you add red food colouring to a glass of water. The red dye in the food colouring is the hue. One drop will result in a weak colour that is equivalent to a low saturation value. If you add six drops of food colouring, the result will be highly saturated. If you shine a light on your tinted glass of water, the colour will appear very bright but if you view it in a darkened room, the effect will be much darker.

Hue values range from 0-360 degrees, representing a location on a colour wheel. Saturation and brightness values are expressed as percentages. The image below shows two different interfaces for creating HSB colours. Both have a separate control for brightness values. The hue and saturation areas are combined, one in a circular fashion and one in a linear style. We added arrows to the drawings to indicate how different hue (H) and saturation (S) values are chosen. Brightness controls are designated with a red B.

HSB colour mixers

HSB colours can be tweaked in a more intuitive way than RGB. Let's say you've mixed a colour that looks just right except that it is a little lighter or darker than you'd like it to be. Changing the brightness value will correct it and it won't disturb the hue or saturation of the colour. Likewise with saturation values. If you just need to fade or strengthen a colour's saturation without altering its hue or brightness, using HSB can be very useful for that.

Greyscale Mode

greyscale image Greyscale images can contain up to 256 colours consisting of black, white and 254 shades of grey. This is a versatile mode to work in because most of the filters are available, you can work in layers, and files can be directly saved as Web images from Greyscale mode.

Bitmap Mode

Bitmap image using diffusion dither Images in Bitmap mode can contain only two colours: black and white. Colour images can't be converted directly to Bitmap mode. They must first be changed to Greyscale mode. During the conversion from Greyscale to Bitmap, the pixels can be arranged in various patterns to give a more realistic look to the image. In this example, diffusion dithering was used.

Images in Bitmap mode can't contain layers (the image must be flattened). The Filter menu is dimmed meaning that filters can't be used on bitmapped images. They can't be saved as Web images using the Save for Web command unless they are first converted to a mode that supports that option.

Duotone Mode

Duotone image Duotone is an interesting mode from an artistic and creative standpoint. Images must be in Greyscale mode before converting them to Duotone. In Duotone, a colour is selected and applied to image, replacing the grey values with shades of the new colour, as shown in the first example here. Black is retained as the second colour.

In addition to duotone (two-colour), you can also create tritone (three-colour) and quadtone (four-colour) images while in this mode. The second example shown here is a tritone image. Shades of orange and gold are combined with black to create more subtle colour variations.

Tritone image While the intent of Duotone mode is to extend the tonal range of greyscale images for print, you can create interesting effects for the Web as well. Most of the Photoshop filters are available in Duotone mode, you can work in layers, and files can be directly saved as Web images from Duotone mode.

Indexed Colour Mode

We already discussed this mode back in the Digital Graphics module. An image in indexed colour can contain a maximum of 256 colours and the colours are stored in a palette. If changes are made to the image resulting in colours not in the palette, Photoshop will assign the nearest palette colour to the new pixels.

Images in Indexed Colour mode cannot contain layers and filters can't be applied to them. They can be saved as Web images directly from this mode.

Converting From One Mode to Another

To convert from one mode to another, go to Image > Mode and select a mode from the submenu. Sometimes you can't convert directly from one mode to another. In such cases, the modes will be dimmed in the Image menu. You will have to convert to an intermediate mode before converting to the desired mode. We won't cover every permutation of conversions. Many mode conversions can be made without any decisions required on your part and there will be little, if any, visible difference in your image. We'll discuss the conversions that require actions on your part to complete them.

RGB to Greyscale

RGB to Greyscale This applies when converting from any colour mode. When you select the Greyscale option from the Image Mode submenu, you will be prompted with, "Discard colour information?" Choose Yes to complete the conversion to greyscale.

RGB to Bitmap

You can't convert directly from RGB (or any other colour mode) directly to Bitmap mode. The Bitmap option will be greyed out. An image must be in Greyscale mode before it can be converted to Bitmap mode.

Greyscale to Bitmap

If your image has any alpha channels, you will be prompted to discard them. (We cover alpha channels later in the course). Then the Bitmap dialog will open, presenting you with some choices.

The image's current resolution will be displayed as the Input value. Set the desired resolution as a value in the Output text field, either in pixels/inch or pixels/cm.
The method option determines how the black and white pixels will be distributed in the bitmapped image. The choices are described and illustrated below.
50% Threshold
Determines whether pixels will become black or white based on their greyscale value. Anything above a grey level of 128 (middle grey) will be rendered as white pixels and anything below that value will be black. This results in a stark, contrasty image.
Pattern Dither
Pixels will be arranged in a geometric pattern of black and white dots.
Diffusion Dither
Results in an even, grainy pattern.
Halftone Screen
When this option is selected, the Halftone Screen dialog appears. You can choose a line frequency and angle (print terms) and determine the pattern of halftone dots. The dot pattern can consist of round, diamond, ellipse, line, square or dots.
Custom Pattern
When this option is chosen, the Pattern picker becomes available, letting you choose a preset pattern that will determine the placement of the black and white pixels. In our example below, we used the Optical Checkerboard pattern.
Bitmap Conversion Options
original greyscale image 50% threshold option Pattern Dither option
greyscale image
50% Threshold Pattern Dither
Diffusion Dither option Halftone Screen option Custom Pattern option
Diffusion Dither Halftone Screen Custom Pattern

Bitmap to Greyscale

greyscale dialog The only mode that a bitmapped image can be converted to is Greyscale. When you select it, the Greyscale dialog will appear. A size ratio between 1 and 16 can be entered. This determines the final size of the image as well as how the black and white pixels will be rendered as greyscale. If you enter a value of 1 (largest size), an image of the same size will be produced with no visible change in the image's colour distribution. A value of two will scale the image to 50%. With values greater than 1, the black and white pixels will be combined to create grey values in the final image.

Greyscale to Duotone

An image must be in Greyscale mode before it can be converted to Duotone.

Colour Modes Summary

Photoshop - TOC - Introduction - Books -
Colour - Links - Questions - Quiz -
[ 1 ] - 2 - 3 - 4 - 5 - 6 -

My Account - Logout - Home/Outlines - Blogs - Books - Contact Us - Support -
Photoshop - TOC - Introduction - Books -
Colour - Links - Questions - Quiz -
[ 1 ] - 2 - 3 - 4 - 5 - 6 -