Managing colours for Web design in Photoshop

Calibrating the display

Using a colorimeter

Some affordable solutions include: Monaco Optix, LaCie blue eye, and basICColor displaySQUID. A colorimeter should be used after the monitor display has warmed up for at least half an hour and in an environment in which the lighting is soft and evenly distributed. There should be no light shines directly on the monitor.

Gamma correction

Gamma is basically a value that represents the relationship between luminance values of the monitor. For general web users, a gamma of 2.2 is the most common setting, and the most common white point is D65.

ICC profiles

International Color Consortium (ICC) has specified vendor-neutral colour specifications for devices to interpret and display colours as intended. In order for ICC to work, however, both device and file need to embed the same ICC profile. To best represent the Web environment, the ICC profile sRGB IEC 61966-2.1 is used on the Internet as the standard, and therefore this profile should be used to maintain maximum consistency on the web.

Converting between colour profiles

Photoshop works with a Color Management Module (CMM) that employs the Profile Connection Space (PCS) engine to convert between ICC profiles. For a colour to display, Photoshop needs to convert the raw data into the assigned working space ICC profile and then tells the computer to display the colour using the monitor’s embedded ICC profile. Whenever there is a conversion, the colour goes astray from the raw data, which makes the final result sometimes way different from the raw. To avoid this double conversion, you can set Photoshop’s working space ICC profile to the same as your monitor’s by going Edit > Assign Profile.

Although setting Photoshop’s working space ICC profile the same as your monitor’s makes it easier to achieve WYSIWYG, the actual Photoshop file becomes less flexible because the colours will only be true to your monitor’s ICC profile (i.e. taking the file to another computer would doom all the colours).

To maintain consistency across platforms, Photoshop working space is best suited with sRGB ICC profile. If you would like to preview the image in any other profiles, you can set up proof colours by going View > Proof Setup. Remember to tick View > Proof Colors after choosing the proof profile.

Further readings

Tips for Managing Web Color in Photoshop

Advertisement