Color Calibration for your Monitor with Color Calibration Images

Post date: Jun 7, 2010 5:22:04 PM

If you're a graphic designer, a web designer, or just someone who appreciates your photos looking as good as possible on your screen, color calibration of your display is very important. This is something I ran in to just recently. I love my monitor, but colors were just not looking right. For example, here's a color palette.

Unfortunately, by comparison, what I saw on my screen was something like this:

The colors looked too cool, too washed out, and I could hardly tell the neutral beige from the background. I decided to look online for some good color calibration images, and I eventually found one, and attempted to calibrate my monitor. Unfortunately, the image was difficult to use, and yielded poor results. I instead decided to roll up my sleeves and make a good, high resolution, monitor color calibration image for personal use. I don't have the money to pay for such a solution, so this would allow me to calibrate my monitor for free, and with good results, if I did it right. The result came out well, and I decided to share it. Here, I'll present my color calibration chart, and help walk you through how to correctly calibrate your monitor. By the end of this little tutorial, you should have your window to the world brighter and more balanced than before.

First of all, you need to know a little about the way that monitors handle color. "Brightness" and "Contrast" don't usually mean what you'd like them to mean, with manufacturers today competing to add more "features" and provide "enhanced" image quality. We're not concerned with "pop" here, we're concerned with making things look right. First, let's take a look at my color calibration image. For those interested, I created it on the Open Source image manipulation program The GIMP (website). What you see here is a scaled down, target image. The full downloadable chart is twice the size, and there's a link just below the image.

Download the Color Calibration Chart

Before I continue with the instructions, let's take a quick look at the calibration chart, and I'll explain how it works. The half-size version is a target. Don't use it to try to calibrate your monitor! Rather, this is what the full size version should look like when everything is done correctly. When you download the full size, you'll instead see that each square looks like this:

The square has two regions. The outside is a solid color, and the inside is a set of pixels that are a full-on full-off pattern designed to simulate the same color level as the outside region. For example, for 50% red, the outside is a darkish red that has each pixel half-on with the red channel. The pixels in the middle alternate between full-on red, and black. Sit back, blur your eyes, a bit, and the two squares will fade together, or at least they should. When the squares on the full-size color chart appear to be solid, your monitor is calibrated. Remember, though. Each monitor is a bit different, so for example, my Acer monitor is weighted towards lighter colors. Even when calibrated, colors appear a little lighter than they should be, but at least they are balanced, and I can tell the differences between similar colors.

The second area of the chart is a color tone check. It's done in a similar way.

This yellow matcher is designed with alternating red and green pixels in the middle. When viewed further away, and slightly burred, they form a solid 50% yellow which matches the outer square. Keep min mind, these two sample squares were designed for black backgrounds, so they won't look right outside of the downloadable calibration chart.

Now, back to what I was saying about the monitors. This is the trickiest part of the process, because all monitors act a bit differently. Ideally, I could tell you "just set your monitors brightness and contrast to 50%" and we could go from there. As it stands, though, this is not always the case. For example, on my Acer, "Contrast" actually dims the back light under about 70%. Set both channels to 50%, and then slowly increase either brightness or contrast (just one, not the other) until your monitor displays your whites as bright as possible while your blacks still appear to be completely black. If you are changing both black and white when you adjust the slider, you're adjusting the wrong one. For my monitor, I found that the way to do this was to set brightness to 50% and adjust contrast to 70%.

The color chart provides a white square and a black background. (download) Check your color by looking at this part straight on. If you look from a slightly up or down angle, you will shift the colors. For this reason, many graphic designers still use tube-based monitors which do not have a color shift and have better contrast.

Aside: Two similar technologies exist to help with this color shift. Original LCD screens were TN-LCD or "twisted nematic", which is pretty much the same as TFT or "thin film transistor" LCD screens. Hitachi later developed a derivative screen called IPS or "in-plane switching" LCD which can improve the viewing angle significantly. A similar tact was taken by Olympus who designed an ultra-wide-angle LCD screen for their digital cameras called "HyperCrystal". Of the two, IPS has made an appearance on a few select monitors and on Apple's iPad. Both are likely to be replaced in the near future with superior OLED technology, but for now, we'll have to deal with what we have.

Once your brightness and contrast are adjusted, it's time to move on to the trickier part of the process. Gamma.

Gamma allows you to get the distribution of color correct. This step will remove color caste, and make sure that grey is actually neutral.

Pull up the Gamma adjustment tool that comes with your system. Windows users should find this under the display properties for their graphics card, or on the software included with the graphics card. Mac OSX users should find this in their system control panel. Linux users should be able to search for "Gamma" in their system settings and find a tool there.

As a KDE user on Linux, the tool is imaginatively called "Gamma".

It has some built in test images of its own, but they're not adequate for what we are doing here. There are Red, Green, and Blue channels.

Start at the top of the calibration chart. (download)

Looking straight on, adjust the blue slider until with your eyes slightly out of focus, the inside square fades in to the outside square. Once all three squares (25%, 50%, and 75%) appear to be the same lightness, move on the the next color.

When your red, green, and blue channels are all adjusted, double-check on the composite channel, and the white/grey squares should meld into one another.

To double-check your color tone, use the bottom part of the chart. Your yellow, cyan, and magenta boxes should each blend in to one another, and the color-shift boxes should appear neutral gray in the center of the cross hairs. Don't be surprised at how this may work out. This was my final setup:

Aside: If you're a Linux user, each user has the option to set their own Gamma. You may want to check the "save settings system wide" box to apply a good default to everyone's profile.

Once you're done adjusting your monitor, you may be surprised at how far off the color was of what you were looking at.

Good luck, and enjoy your now color calibrated screen.