Palettes

by Joe Gillespie — Apr 1, 2000

The next couple of pages are about palettes. Colour palettes were very important in the early days of the Web when most people used monitors that could only display 256 colours or less. These systems are now becoming increasingly rare and the dithering problems associated with restricted palettes are gradually disappearing. Popular statistics sites now show that the instance of 8-bit monitors has dropped below 10% of total Web users. So, you only need to be concerned with palettes if you suspect that your readership, for some reason, is still using older systems.

Having said that, having thousands of colours to choose from can be very confusing. When a painter starts to create a painting, he or she will only have a few tubes of paint. If you mention vermilion or cadmium red, they will know exactly what you are talking about, but how many people can picture #EC0109? Having a restricted palette is like juggling with less balls, it's easier.

If you don't really care about the ins and outs of 8-bit palettes, you can skip this section and go to a page about the more practical aspects of colour theory.

What you see on this page depends on which colour depth your monitor is set to.

In 16-bit or 24-bit, all the images will look about right with only subtle differences.

If your monitor is set to 8-bits (256 colours), the results will vary from 'slightly dithered' to 'totally wrong'.

Macintosh System Palette

This is the standard Macintosh System Palette saved as an 8-bit GIF file with its own palette.

Only two slots are reserved for the Macintosh interface - the White and Black. All the other colours are 're-mappable'.

How this palette looks on your screen will give an idea of how well your browser re-maps the colours. If you can see any dithering it is because you are running in 8-bit mode and the colour does not have a close equivalent in the 6x6x6 web palette.

Windows 95 Default Palette

This typical Windows 95 Palette starts with Black and ends with White. Again, this is saved as an 8-bit GIF file with its own palette.

The first and last ten colours in the palette are reserved by Windows and include the standard 16 VGA colours plus four extra SVGA colours, light yellow, light green, light blue and a mid grey. The other 236 colours are normally 're-mappable' to any colours you like.

This palette is not 'set in stone' like the Macintosh palette and is the default, out-of-the-box,Windows 95 palette. The default system palette may change if the user introduces a pictorial backdrop or opens any program or picture file that uses a different palette.

How this palette looks on your screen will give a good indication of how well your browser re-maps the colours.

I have chosen three images with completely different colour biases. The first set is saved in JPEG format so they are essentially 24-bit images.

These three images were saved in 24-bit JPEG format

Autumn Leaves - JPEGGreen Leaf - JPEGWinter Trees - JPEG

If you are viewing them on an 8-bit display, your browser should make a fairly good job of dithering them down to 256 colours.

On a 16-bit or 24-bit monitor, they will look photographic.

They have been saved at 'Medium' compression and are slightly smaller in file size than the following GIFs.

JPEG is the correct format to use for such photographic images as they will look better and have a smaller file size. The only reasons to use GIFs for such images are if you need transparency (for irregular shapes) or if they are animated.

This set of images has been saved as GIFs using the '6x6x6' Web-safe palette. If you are using 8-bit GIFs and map them all to this palette, there will be no surprises on Mac or PC screens running in 8-bit mode.

These images are mapped to the 6x6x6 web palette

images/Autumn Leaves -.GIFimages/Green Leaf -.GIFimages/Winter Trees -.GIF

The results should be virtually indistinguishable from the JPEG images above in 8-bits except for a slight 'blocking-in' on the red leaves - and the larger file size.

In 16-bit or 24-bit colour, they will look almost exactly the same as they do in 8-bits!

Each of these images has been saved with its own 'adaptive' palette

On a 16-bit or 24-bit screen, these 'adaptive palette' images will look better than their 6x6x6 palette counterparts but they may look worse in 8-bits because of 'double-dithering' or video card problems

images/Autumn Leaves Adaptive -.GIFimages/Green Leaf Adaptive -.GIFimages/Winter Trees Adaptive -.GIF

Normally, these three images would not co-exist on the same 8-bit screen. If each was in a separate window, the one in the foreground would be very close to a 24-bit version of the same image whilst the two behind would be severely compromised.

Both Netscape and Internet Explorer re-map these conflicting paletted images to their own palettes and, whilst they lose some subtlety of shading, are reasonably acceptable because of their undemanding subject nature.

More critical images with solid logo colours or flesh tones would be more noticeably wrong or severely dithered.

For some images, the use of adaptive palettes will give better results in 8-bits than if the 6x6x6 palette is used. Some people suggest the use of GIF images using adaptive palettes with LESS than 8-bits to reduce files size - and in most cases this trick works very well.

As time goes on, more people are upgrading to better than 8-bit systems. The necessity for strict 6x6x6 palette compliance is gradually diminishing.

The best advice that I can give is to try all the different methods and use the one which works best and gives the smallest file size for your set of images.

My Mac with its 17" colour-corrected display is very forgiving and, apart from a slight dithering of the Windows palette image, everything else looks acceptable in 8-Bits in Netscape 3.01 and excellent in Microsoft Internet Explorer 3.01 with hardly a hint of dithering.

Version 4 and above of both Netscape Navigator and Communicator render 8-bit colours less well than their older counterparts, but considering their sizes, are less likely to be running on low-end 8-bit machines.

Beyond 8-bits

24-bit systems will usually not pose any great problems with Web pages. There are 256 levels each for Red, Green and Blue giving a total of over 16 million colours and flat colours and photographic images will reproduce accurately.

16-bit systems are a compromise between colour fidelity and cost - they require less memory on the video card but give fewer step of Red, Green and Blue. Three doesn't divide evenly into 16 so you get 5-bits of Red (32 steps), 5-bits of Blue (32 steps) and 6-bits of Green (64 steps).

16-bit video systems approximate the colours of a 24-bit system. Where an indexed 8-bit or 24-bit system will give exact colour values for any given colour, discrepencies can creep-in on 16-bit systems and two colours that you think are identical can look different - even on the same page -depending on the colours, how they were produced and the model of the video card. For photographic images, this doesn't matter so much but flat colours vary with colour depth.

To be sure that your images don't dither on Mac and PC systems running 8-bit colour, you need to use colours from the 6x6x6 'Web-safe' palette for graphic images.

This includes GIFs used for background images as well, although these are handled slightly differently - the same GIF file used as a foreground or background image can look quite different.

Some UNIX systems use a more restricted 5x5x5 palette using 25% steps instead of 20% and the so-called 'web-safe' palette will dither on those, but they are comparatively rare.

This page is about getting the best out of what is available for the majority of people using PCs and Macs.

Note: As these pages are about producing graphics that will work on 8-bit systems, some of the examples only make their point if viewed in 8-bits (256 colours).

The 6x6x6 'Web-safe' palette has 216 colours corresponding to 20% steps of R, G and B.

If you subtract 216 from the 256 colours possible on an 8-bit system, that leaves 40 slots. These 40 colours do not vanish into the ether, but how they are used by different computers and browsers, or even versions of the same browser, is not consistent.

On a Windows 95 computer, 20 of the spare slots are 'grabbed' by the operating system. They are 'reserved' for displaying interface items.

01

20 colours are reserved by Windows.

The 20 remaining slots can be forced into picking-up additional 'non-safe' colours that might be contained in a GIF saved with an ADAPTIVE palette for instance. Doing so doesn't magically make them 'safe', but it can make them usable.

But beware! Windows palettes are always changing depending on what else is on the screen. Often, a graphic with non-safe colours will look OK on one page and not on another. Test it!

With pre-4.x versions of Netscape, you could impose colours on most of the spare slots on a Mac to the same end, just two slots were reserved for black and white.

Now, Netscape forces all colours into the 6x6x6 palette when running in 8-bit mode much to the detriment of many GIF images which looked fine previously.

Using the extra slots has never been predictable, but reasonably acceptable before Netscape 4. Is this progress?

Greyscale Graphics on Web Page

The 6x6x6 web-safe palette has only 4 neutral greys (plus black and white) which can make the display of black and white pictures tricky.

There are extra greys made available by the computer's System Palette, it's just that they aren't the same greys on Mac and PC.

These diagrams show the extra greys added into the free palette slots, (but don't take the positions literally). There are 12 equal steps in the Mac palette and 18 in the Windows one so, apart from black and white, the RGB values are different.

Mac Greys

If you are looking at this run of greys on a Mac in 8-bits, they probably won't be dithered even though they are not in the web-safe palette, they are from the Mac System palette. In Windows, they will looked dithered.

Windows Greys

This run of greys comes from the Windows 95 default palette. In the context of this page, it will looked dithered, but isolated on a page by itself, will look correct.

In an image where any of these greys are used as large blocks of solid colour, there will be an obvious dithering for somebody.

In an photographic image where everything is dithered anyway, it doesn't matter.

If you MUST use a large solid area of grey, use the web-safe greys. Intermediate grey tones can be produced using a pattern - which is really just a non-random dither - but be aware that it will not compress efficiently.

The 'current' palette changes according to what else is on the screen at any time, only the Web-safe palette is locked.

Grey Patterns

By using this dither pattern, you can simulate intermediate greys, or colours, but at a price. These patterns might not compress as well as flat colours.

The LZW compression algorithm used in GIF files works by counting the number of same-coloured pixels or patterns of pixels in a horizontal line and inserting a reference to the colour and the pixel count instead of mapping all the individual pixels.

In the 'dither pattern' diagram, the row of six squares shows the web palettes 'neutrals' where the RG and B values are the same.

Below it, intermediate squares are produced using the dither pattern but it is only noticable on low resolution monitors.

The same technique can be used with any colour combination although the colours need to be fairly close to one another to avoid an obvious pattern.

Here, patterns of web-safe red, oranges and yellow give a useful range of intermediate hues with no noticable dithering.

Orange Patterns

To use such a pattern with Photoshop, draw a small area with the Pencil Tool, select it and use Define Pattern in the Edit Menu to capture it. When you fill an area with the Fill Menu Command or Paint Bucket, choose the Pattern Option.

There are a number of programs and plug-ins that will help you produce such patterns including BoxTop's ColorSafe, AutoF/X WebVise Totality and Ignite.

Here is the same photograph of a cat saved in two formats.

JPEG Cat

JPEG Cat - 18.3K

GIF Cat

4-Bit GIF Cat - 8.5K

Top Cat is saved in JPEG format from a greyscale Photoshop file and weighs in at around 30K in file size.

It will look fine on a 16 or 24-bit system but will be dithered by the browser on an 8-bit system.

In the Mac version of Netscape 4 however, yellows and blues are introduced, which look pretty awful and I wish they would hurry up and fix it!

Notice how the white area between the ears has stray dots.

The lower cat is saved using an Adaptive palette with the bit-depth set to 4 and Diffusion dithering.

This time the cat looks identical at any bit depth and BETTER than the JPEG at 8-bits and with only half the file size.

WHY?

A greyscale image has 256 steps of grey. This is gross overkill as the steps are too subtle. Reducing the bit-depth to 5 (32 greys) or 4 (16 greys) gives virtually the same result, but a much smaller file size.

For this particular image, there is little difference in file size between saving with dither ON or dither OFF in Photoshop. Dither ON gives less posterisation.

This logo uses the same technique. The soft shadow is rendered quite nicely - except in Netscape 4 on Mac.

umbra

The extra greys have been supplied by the appropriate System Palette. Had the logo been mapped to the 216 colour web palette, it would have looked coarser.

Although the image is not identical across platforms, it will generally look better than one that is!

Reduced Bit-Depths

Reducing the bit depth of any GIF file will reduce file size and make it load quicker.

Bit Depths Chart

Note. One 'colour' at each bit-depth is always BLACK

One thing to watch is that the Adaptive method of saving index files in Photoshop (earlier than v5) often gives subtle, but undesirable, colour changes.

You can be painting away quite happily using web-safe colours from the 6x6x6 swatch and when you change them to Indexed, the colours have drifted off by a few digits and appear dithered.

You should check this with the Eye-dropper tool and the Info palette. Colours should only contain RGB values of 0, 51, 102, 153, 204, 255 to be safe. (You can memorise these numbers easily if you think of 0, 5, 10, 15, 20, 25 and simply tag on the number of 5s in each!)

Values of 0 and 255 always stay constant after adaptive indexing, but 51 shifts to 49, 102 to 99, 153 to 156 and 204 to 206.

To fix them, choose the Color Table menu item in Photoshop. This lets you click on individual colours and tweak them back to web-safe values. Don't forget to resave the fixed file.

In is unnecessary and even undesirable to fix ALL the colours that have gone off being web safe. Generally, this should only be done with the main foreground and background colours in a GIF. Pay special attention to large flat areas of colour where dithering will be most objectionable.

For most people, colour is something taken for granted. It is all around us. Yet, when we come to use colour, in paintings, in design, in our furnishings and clothes we often make mistakes because we don't understand what is going on.

Some people will say that this colour goes with that colour and that "blue and green should never be seen." They will even try to make up complex tables and formulae for combining colours in pleasing ways. I'm not going to do that!

The Power of Colour

We perceive colour through receptors at the back of our eyes. They translate the different wavelengths of light reflected from surfaces into distinctive stimuli that our brain converts into red, green and blue and other colours. So, the eye sees the light and the brain interprets it and identifies the colours.

But it does more than just identify. It makes certain judgements based upon basic human instincts, and on other learned information.

The 'hue' is what we call colour in its purest form. A 'shade' of a colour is what that colour would look like if the light were shaded from it, or black added to it, and a 'tint' is what we get when a colour is diluted with white.

hues, tints and shades

Very few physiological aspects of colour are of any interest to us. The eyes are most sensitive to green in low light conditions - but so what!

What is more interesting to a designer, is the emotive power of colour.

Colour communicates!

We all know that red is a warm colour, because it is associated with fire. Blue is a cool colour, because that is the colour of the sky, and water. Green is a fresh colour, we associate it with grass and lush foliage. All these associations are programmed into the human ROM.

fire ice leaf pasture flesh trees

When someone tells you that their favourite colour is blue, as seven out of ten people probably will, it's because they've had a pleasant encounter with that colour in their formative years - sunny days, blue skies. Red is the colour of danger - fire - and rage - the face. In yellow, we see spring flowers and sunlight. All colours have mnemonic associations that trigger memories or feelings.

These built-in, instinctive responses to colour are fairly universal, but there will be regional variations. People from a predominantly desert environment will have a slightly different aesthetic from those more used to green pastures or purple plains.

Colour plays tricks on us

In each case, the central square is exactly the same colour but, because of its surroundings, seems to change.

It's all very well discussing individual colours, but we very rarely see colours in isolation. We see them juxtaposed with other colours and colours change according to their environment.

Take the word "lead". In the sentence, "I lead the race", it has one meaning. In, "The idea went down like a lead balloon", it not only means something else, but sounds different too. So the meaning of "lead" depends on its context - and so does a colour.

Colours and words have a lot in common. They are both used to communicate and have great power, but if you use the wrong ones, you may be saying something other than what you intended.

We all learn how to use words at an early age but unfortunately, few learn how to use colour effectively. Unless you spend many hours mixing paints and trying out their various effects and nuances, speaking with colours can be like talking in a foreign language.

Yet, walk in a garden and look around you. Nature doesn't make mistakes with colour. No matter how vivid or subtle, they always seem to work together - lime greens, blues, violent pinks and yellows. Why?

Again, the answer is because of association. The garden is pleasant, the colours look better bright because they are in warm sunlight. Life! The most powerful human instinct!

It is not surprising that, in looking for colour schemes that work, painters and designers look to nature for inspiration. Whether it is an impressionist masterpiece, or just wallpaper, if you take the colour juxtapositions and their proportions from nature, you won't go far wrong. The golden browns, bright and pastel greens of an onion are conservatively safe but the magenta, vermilion and greens of a dragon fruit are positively psychedelic.

In nature, some colours are there to attract insects and assist procreation and others are there to camouflage, and dissuade predators. Sometimes bright colours are used to attract, at other times they are meant to warn!

Colour and life go together!

butterfly
leopard
shrimp

What we are talking about here is visibility. The bright pink flowers are highly visible against a dark green background - they attract attention.

Conversely, the leopard has a similar pattern and colour scheme to its surroundings, which helps make it invisible.

The shrimp, and many other creatures, some dangerous and some just pretending, have highly visible colour schemes that say "Keep Off!"

In graphic design, you can use these 'visibility tricks' to make messages stand out. If a whole page is highly visible then it is very difficult to get anything to stand out.

It is unlikely that you will want to camouflage anything on your pages, so avoid using obtrusively, patterned backgrounds or you will just be mimicking the leopard.

So what has all this got to do with web page design?

Colour schemes chosen like this are much more likely to be successful than ones chosen arbitrarily from a palette in a computer program

Early web pages skirted the issue by using black and grey. Then we went through the limitations of the very unsubtle web safe palette. Now, with more people using higher colour depths, it is becoming more acceptable to stray from the 'dreaded 216'.

The trouble with the web safe palette is that it has too many colours - and too few. Restricting a palette is a very good way to make colours work together. Picasso did it most successfully in his colour-economical 'blue period', as have many other great colourists. But, with restrictive palettes it helps be able to mix the colours to produce intermediate hues but that is not so easy with 8-bits.

Some people will suggest that you use colour wheels, and such, to arrive at good colour combinations. I would prefer to look at a tropical sea, an autumnal wood, or a parrot.

On the left, the palettes have been derived from the images above and shifted to the nearest web safe values. You don't want dozens or hundreds of colours, just a main colour with a few lighter and darker variations and a few contrasting colours.

To do this yourself, get hold of a picture of some natural object or scene that you find pleasing and scan it. You can use your eye-dropper tool to select the most prominent colours and create a new file containing just squares of those colours. Save the file as a GIF mapped to the web-safe palette and use that for your swatches.

Any palette produced like this can't help but be harmonious. It can be as bright or as subtle as the subject requires but will virtually guarantee a successful colour scheme. For best results, try to keep close to the original relative proportions of colours too.

Photos - PhotoDisc

It is clear from some of the mail that I get that not everyone is seeing the site as I see it on my monitor. I have had the background, for instance, variously described as 'black', 'purple' and 'maroon'. Recently, someone said that the pages looked very 'washed-out'. Well, I am pretty confident that what I see on my colour-calibrated monitor is accurate and it is borne-out by the RGB colour specs I'ved used - I expect #0000CC to look dark blue!

With the vast combinations of monitors and video cards that are available at a range of different resolutions, sizes and prices, it is not surprising that there is a large degree of variance in the general marketplace but graphic designers needs to work to some reference standards just in the same way that audio engineers work within fairly strict specifications for their recordings.

Apple Macintosh computers have been used within the print industry for many years and they have colour management built-in at system level. At the heart of every Mac is something called 'ColorSync' which allows input from scanners and output to colour printers to be viewable with a high degree of confidence on any attached monitor and, although not 100% foolproof because of the fundamental differences in RGB and CMYK, what you see on the screen is more or less what you get when you go to print.

Windows PCs are primarily designed as office machines for word processing, spreadsheets and database work. They are also very price-sensitive. So, there is very little standardisation of colour on monitors. All the 'off-colour' examples I gave earlier were from unadjusted or maladjusted PC monitors. An office PC is not a suitable tool for graphic design simply because you can't trust what you see on the monitor. That's not to say that you have to use a Mac to get accurate colour, in fact a Mac set up for print work is not really suitable for Web design at all. Properly adjusted, any computer and monitor can be used for Web design and this article will tell you how.

Photographed in artificial light and in natural daylight, this zebra shows that all is not as black and white as it might seem!

Regardless of the screen size or colour depth, a monitor should display a wide range of colours as predictably as possible, but colours are not always as they seem.

If you look at a picture of a zebra in your living room at night and outside your front door at noon, you see the same black and white zebra. If you used a measuring instrument (a colourometer or densitometer) to read absolute values of black and white in these two situations they would be vastly different in colour value and intensity. In the indoor light, the white would warm because it is being illuminated by an incandescent tungsten lamp. Outside in daylight, the white would be much purer.

If you were to take photographs of the picture of the zebra under both conditions on slide film, the difference would be very apparent. When you look at it with your eyes, your brain compensates for the differences and you are almost unaware of the comparative warmth and coolness - called 'colour temperature'. Think of colour temperature as being the colour of a piece of metal heated in a fire. As the heat increases, it goes from dull red, to bright red, to yellow and finally to 'white hot'.

There is another big difference in the readings taken from the zebra picture indoors and out. Outside the white will be very much brighter than indoors, in fact, the difference in brightness between the black and white will be many times greater. Black, is just the absence of light, it doesn't change as much as the intensity of light. The difference in intensity between white and black in any given situation is called the 'dynamic range'.

Okay, forget about zebras now and let's consider monitors. The black on a monitor can only be as black as the colour of the screen when it is switched off. You can't shine 'negative light' on anything - or bank robbers would have a field day! So, if your monitor is sitting in a brightly lit room, the colour of the screen - your black - will be brighter than if it were in a dark room. Sometimes you have no choice of working environment, but a dimly lit room is better for making colour and tonal judgements.

The brightness of the white on your monitor depends on many factors, the type of tube, the efficiency of the phosphors and the monitors age. A new Sony or Mitsubishi-based tube will be very much brighter than an old shadowmask tube.

So, given that you have a black, of some sort, and a white depending on your monitor quality and working environment, you would expect everything else in-between to neatly fall into place - not so!

Unfortunately, a computer monitor doesn't behave the same way as the human eye when it comes to showing relative tonal values. If you were to display what you knew to be a 50% grey on the monitor, you would expect it to be exactly half way between the black and white in brightness, but it wouldn't be. To get it to appear to be exactly half way between black and white, the monitor has to have something called 'gamma compensation' applied. Instead of a graph plotting brightness between black and white being a straight line, it has to be a curve for all the intermediate tones to have the correct visual relationship. Playing with the 'Curves' in Photoshop will show you what I mean.

Macs come with a default gamma of 1.8, which is ideal for print work. Ordinary office PCs, especially older ones, have no gamma correction and a natural gamma of about 2.5 which is too much contrast for a normal full-tone picture - it's fine for charts and graphs and less demanding graphics which benefit from a contrast boost.

The W3C (World Wide Web Consortium) has decided that, for Web design, an intermediate gamma of 2.2 should be used. It is a good compromise between the 1.8 used in traditional graphics computers and the 2.5 of office machines. It is also the standard used for television production which hit similar problems many years earlier.

To reach some kind of standard for viewing Web graphics on a monitor, we have to consider:

  • The Black - mainly affected by your working environment.
  • The Brightness and Colour Temperature of the White.
  • The inter-relationship of the colours in-between - the Gamma.
  • Another factor to consider is the neutrality of the grey.

Setting up your monitor

Now, the whole purpose of this exercise is not to get some notionally absolute set of colours on your screen, that is asking too much, it is simply to make sure that you are not at some extreme and don't realise it. You don't actually know if your hi-fi is playing with too much bass or treble or if there is some frequency in the middle that is totally missing. You might even like too much bass!

Now, the first thing to do, and this is very important, is to get rid of that brightly coloured desktop. Remember, colours change according to their surrounding! The best way to judge colours on a computer screen is against a neutral mid grey background. Anything else will just 'colour' your judgement.

Below, are some neutral grey tiles that make good desktop patterns. You will need to convert them to PICTs for Mac or BMPs for PCs.

Mac

Note: This calibration wizard is from MacOS 9.0.4 and will look slightly different on other system versions.

I'll start with the Mac adjustments because they are relatively easy.

Go into the Control Panels folder and open the Monitor or Monitors and Sound control panel. Set the highest colour depth that your screen resolution will allow. Don't work with 'Thousands' if you have a 'Millions' option. Buy more VRAM or a video card if you are stuck with '256 Colours'.

Click on the 'Color' icon and then on the 'Calibrate' button.

On the Introduction page, make sure that 'Expert Mode' is checked - we want to get this right!

Click on the right arrow to take you to the Monitor Adjustments page. Here it asks you to turn your contrast control up to maximum and to adjust the brightness so that an oval inside a black square is just visible. This ensures that you have the best brightness and maximum dynamic range.

Click on the right arrow again and you will see Red, Green and Blue apples. Adjust the three sliders so that the apple images blend into the backgrounds. This is best done if you squint to blur the image. This process should make sure you get neutral greys if carried out correctly.

Clicking on the right arrow again takes you to the Target Gamma page. You will see a slider marked from 1.0 (Linear Gamma) through 1.8 (Mac Standard) to 2.2 (called PC Standard, which is, like many PC standards, more wishful thinking than a reality). It is in fact the Web Standard and it is here you should set the slider.

The next page lets you set the White Point (or colour temperature). The numbers represents degrees Kelvin (°K). For Web design, this should be set fairly high, 7500-9300°K. You will have to use you own judgement here because various monitors will give different results, just try to get the white as pure as possible, not too yellow, not too blue. Print work is usually standardised at 5000°K (Called D50) which is very yellow.

Note: Be careful that you don't have multiple calibration utilities running at the same time. Your monitor could be getting conflicting calibration information from hardware or from the Adobe Gamma control panel!

On the last screen, save your new Web design profile as WebGamma or something like that.

Now, having done all this, do it all again. This time you are 'fine tuning'. Watch that neutral grey desktop and make sure it really is neutral.

If you need to change from print to Web design set-ups on a regular basis, get hold of GammaToggle Fkey which lets you cycle through several different gamma settings at the press of a key.

PC

Unfortunately, colour management on the average PC varies between 'none at all' to 'barely adequate'. It depends on the version of Windows and the video card installed.

In Windows 2000, right-click on the desktop and select Properties. Again, make sure you have a neutral, mid grey desktop - not the default Windows colour. Click on the Settings tab and set your monitor to the highest colour depth it will allow for the resolution you want to use.

Click on Advanced... and then the Color Management tab. If you are lucky, you will have a ready-made profile set up for you by Plug and Play with a colour temperature of 9300°K and a gamma of 2.2. If not, click on ADD and see if there is a profile (.icm) that matches your monitor brand - Sony, Mitsubishi, NEC, etc. If not, choose 'sRGB Color Space Profile.icm'. That's as close as you can get.

Older versions of Windows or NT may need some additional software to calibrate the monitor. I used to use Colorific with Windows NT which worked very well but is dependant on the video card supporting gamma adjustment, not all do.

The other option is to use Photoshop's 'Adobe Gamma' (look in the Help Menu under Color Management) and follow the wizard to set-up for optimal Web graphics display. This will ensure that your Web graphics will look right to other people, or at least be in the ball park.

Just remember, that without monitor adjustment on a PC, you could well be seeing an 'extreme' and colours will be quite different from those that others see.

A final check

As a final check that your monitor gamma is correct, here are two grey scale wedges. The upper one contains just the 6 neutrals from the Web safe palette. If you can't distinguish each square clearly, then you have serious problems!

This scale has an intermediate step added between each of the Web safe neutrals, so they increase in 10% steps instead of 20%. You should be able to see each of the greys distinctly and they should be evenly spaced in tone. If the dark greys all look black or the light ones all look the same, your monitor needs to be calibrated because it is lying to you!

On a Mac set to a gamma of 1.8 for print design, there will be a huge step from black to dark grey.

On a PC with no gamma correction, the black an dark grey will run together - and maybe the next grey too!

On LCD screens, all this subtlety goes out the window. LCD screens at the minute, no matter how expensive, are difficult, if not impossible to adjust for accurate colour.

Link to a more stringent screen diagnostic page.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float