Tutorials

Introduction

One of the big problems in computer displays is a lack of consistent response between different monitors, as well as other input and output devices (such as scanners, printers, digital cameras, etc.). A result of this lack of standardization is that colors which look fine on one device might look totally different on another device.

Because of this problem, a number of imaging manufacturers, such as Epson and Hewlett-Packard, got together and defined a single standard, sRGB, for computer-based devices to conform to. The standard is pretty comprehensive, and involves calibrating every device to what can be summarized as an RGB-based colorspace with a white-point of 6500K with gamma of 2.2.

Of course, that description totally flies over most peoples' heads, and some of the other factors (such as ambient and direct room lighting, phosphor response, and so on) make the standard extremely difficult for casual end-users to stick to.

Fortunately, the most important part of the standard — a gamma of 2.2 — is fairly easy for even a casual end-user to calibrate their monitors to, and by performing that part of the calibration, users can at least be sure that colors will look more or less consistent across different displays, in terms of brightness and overall coloration.

What this page does

This page guides you through the steps to calibrate your monitor for γ=2.2 (or the less-common γ=1.8) on systems which allow you to modify your gamma correction factors. It will help you to see web content with the same brightness and color reproduction that other people see it as, assuming they have performed a similar calibration.

It will also help with reproduction issues, such as printing out images you have created on your computer onto a calibrated printer. Although the colors will not match perfectly, they will still be much closer than with an uncalibrated display.

Although gamma is the most important factor for color reproduction, it is not the only factor. This page includes optional instructions to help you to calibrate your whitepoint (i.e. the color tone which white corresponds to, as "white" is not absolute), though that's still fairly sensitive to room lighting and so on. It is not intended to bring your display up to spec for colormatch-intensive environments such as professional print shops and so on, since that requires major environmental overhauls as well.

A special note to Mac users

The latest versions of Mac OS X (notably 10.3, aka Panther, and later) come with pretty good color-correction software built-in, which corrects nearly all of the issues involved in color management (including white point). Additionally, Quartz, the OS X display model, applies consistent color correction across the entire operating system, including the web browser — which means that this page won't actually display properly on Quartz-enabled web browsers (such as Safari) because it will be "corrected" into whatever color model your display is currently using! So, if you calibrate your monitor to γ=1.8 and then point Safari at this page, don't be surprised if it appears that your monitor is calibrated for γ=2.2 — that means it's working correctly.

However, even better than the OSX Display Calibrator is a very nice shareware application called SuperCal. If you're serious about your colorspace, definitely check it out.

What you need

In order to calibrate your screen, you need some way of determining whether two colors are the same brightness (your eyes are probably good enough, even if you're colorblind). A way of blurring your perception of the colors helps, too, if you're like me and have such good eyesight that you can make out the individual pixels on your display. Cheap tracing paper pressed against the screen or wearing your resident nerd's Coke-bottle glasses are good choices (though the second one will probably give you a headache pretty quickly).

Additionally, you need a way of adjusting the display gamma. The operating systems I know about are as follows:

• Windows: Gamma controls are usually stored on a tab on the Display control panel, but this is driver-dependent
• MacOS previous to 10.3: In System Preferences (or Control Panel, for OS 9.x and earlier), there should be a Displays (or Monitors) control panel, which should have a "calibrate" option. Select it, and turn on Expert mode.
• XFree86 (Linux, FreeBSD, etc.): download tkgamma, but ignore its brightness display (it's calibrated for a linear response, not sRGB, and linear response is totally incorrect)
• Other operating systems: I don't know. Feel free to let me know if you do.

In some rare cases, a monitor may have gamma-correction controls of its own. If this is the case, set your computer to output its default gamma curve (which is probably 2.2 already) and use the monitor's controls instead, and only use the computer's controls if the monitor's controls don't have enough range for the calibration tests (but do use your monitor's whitepoint controls if available).

Whitepoint (optional)

For this part you need some actual physical materials, namely a sheet of paper, an opaque backing for the paper (such as black posterboard or construction paper), and a light. Preferrably both of these will be 6500K (also sometimes referred to as D65); typically you can find calibrated paper and lighting at your local art supply store. If not, get the whitest paper you can find (usually your typical photocopier paper will be fine) and the whitest light (such as a halogen or a compact fluorescent). Be sure to have an opaque backing behind the paper; otherwise the monitor's color will affect the paper's color. (The backing isn't necessary if the paper is opaque, but most papers aren't.)

Place the paper next to the white box in the next section, and shine the light on the paper (but not on the screen); it may help to use something opaque to block out the light which hits the screen. Turn out all the lights, close all the windows, and so on — try to get it so that the only light shining on the paper is your calibration reference light.

Then, adjust the brightness and color temperature of the monitor until the paper and monitor's white are the same (it usually works best to start with brightness).

Brightness and Contrast

If your monitor has brightness and contrast controls (aside from the backlight on an LCD), adjust them until the above squares are just barely solid black and solid white, respectively.

Gamma

Bring up your gamma correction controls. Adjust the overall gamma until the middle and top sections of the grey square on the right (the one labelled "W") are the same brightness. (Or, if you'd rather calibrate to a gamma of 1.8 which is the Apple standard, match the middle with the bottom.) It helps if you defocus your eyes a little bit.

Then adjust the individual red, green, and blue gamma values until the respective sections of the red, green, and blue rectangles match up. (If you have difficulty with the blue one, get red and green correct and then work on blue using the magenta swatch instead.)

If all went well, the region corresponding to your calibration target should all be of a consistent brightness when viewed at a distance (or with your eyes defocused, or wax paper in front of it, or whatever). If so, congratulations, your monitor is calibrated. If not, oh well; you tried your best. Such is life.

Printing and scanning

The above images are not terribly suitable for calibrating printers or scanners; printers work in CMYK (subtractive, rather than additive), and even though scanners work in RGB, you need to generate something for it to scan in. Chances are, your printer works in CMYK. So,

Print that image out and adjust your printer until the appropriate part of each color swatch is the same brightness as the center, stippled part. This can get very expensive if your ink of choice doesn't have a similar gamut to your monitor. (Of course, the less expensive the ink, the more likely this is.) Eventually I'll write a separate tutorial on how to do the ink calibration, but this requires first figuring out how exactly to do this effectively! It also involves a lot of linear algebra and compromises.

Once you have the printer calibrated, scan it in, and adjust the scanner until the colors on the scanned swatches are as close to the non-stippled parts of the original file as you can get them. (This is assuming you feel it necessary to have a perfectly-calibrated scanner. Personally, I don't, since I care more about the output looking good than it looking like the original, but I mostly use my scanner to scan in rough sketches which I then complete in Photoshop anyway.)

Final notes

Keep in mind that different monitors still have different color characteristics. Even after doing this, you will probably still see a difference between different monitors which have been calibrated to the same gamma, but not to the same whitepoint.

If done correctly, this process should at least give all monitors a consistent dynamic range, brightness, and relative color matching. Extremely old/messed-up/crappy monitors will probably still look horrible, but at least it'll be less horrible and closer to what the artist originally intended (and, should you be the artist, others will see the colors as close to how you intended as possible).

Unfortunately, a lot of input devices (scanners, digital cameras, etc.) provide their data in linear RGB, rather than sRGB, and a lot of programs seem to assume that they're working in linear RGB even though they're working in sRGB, and so on. So, if you have an image where the colors look really damn weird (especially purples and oranges coming out as blue and red instead), try applying a gamma correction of 0.454 to it (or 0.555 if your target gamma is 1.8).