Basic Introduction to using Color Management

I cut an pasted this from
https://developer.mozilla.org/en/docs/Basic_Introduction_to_using_Color_Management
I wrote this in 2008.  Many of the links are out of date.

How to get more accuracy in presenting color on your computer monitor and printer for consumers

is the article that I wanted to write. These are my notes for that article. If there was a decent test web page and associated printed image, that we could just make a quick check if our equipment was whacked, the need for this would be apparent.

From http://art.ucsc.edu/cave/colormanage.html

A commonly referred to analogy for color management is toasting bread. Imagine you have a loaf of bread. You put one slice in your home toaster and toast it at a setting of "4" and you are happy with the results. You then go to a friend's house and you want to know what setting to use on their toaster. One (admittedly tedious) solution is to take 10 slices of bread and toast each of them at a different setting and then figure out what setting on your friend's toaster matches your setting of 4 at home. Let's say on your friend's toaster you need a setting of "6" in order to get the same results as "4" on your home toaster. What you have just done is created a profile for toasting bread. One basic way to think of profiles is that they are "lookup tables" which are used to convert from one device to another.

After reading a few hundred articles on color in computers, I think that the consumer's best bet on understanding color starts here http://www.calibrize.com/

MozillaZine Knowldege Article on FireFox Color Profile Support

http://kb.mozillazine.org/Gfx.color_...isplay_profile

Understanding

To the uninitiated, the complexities of color can be surprising. This page is geared towards the casual user. The following examples are for Windows. Professional photographers, graphic artists and the printing industry use a suite of software products and hardware that are calibrated to work together using a color management system or workflow. While color managed workflows have been used for a while for print and photography, color management on the web is possible using the right tools.

The price of admission for viewing images created in a color managed system is a color aware application. Firefox 3 can be set to use ICC profiles when viewing images and html colors. Firefox can know be set to be color aware. Printing and Creating images that are color aware is more expensive and complicated. Here is a good example of what Firefox 3.0 can do with color management enabled. http://seanhayes.name

One of the most important things that is frequently overlooked in explaining color management is that when it comes to color, what most of us are looking at on our monitors is inaccurate. This is not so important when color is used to highlight and differentiate elements on the screen, like pie charts and other business graphics; however, if you want to take pictures of a mole on your skin and compare it from year to year, to see if its size, color or shape changes, then it becomes more important.

Look at the following color chart on a number of different, uncalibrated monitors.

These are the RGB * (red, green, blue) and CMYK ~ (cyan, magenta, yellow and key-black) colors. RGB is the color system used on monitors. CMYK and other color systems are used by printers.

This should highlight one of the first problems in working with color. You will probably see differences, yet, how do you know what would be accurate? How accurate does a casual user need to be? We are used to seeing photos that have been enhanced and there is little concern for accuracy of the colors we watch on our TV's. Getting color right is hard, making an image look pleasing is easier. Try printing the section of the page above with the color chart (select it, Ctrl P, hit the selection button). Now compare what you see on the screen with what's on the paper. If your results are really bad try your printers nozzle check and cleaning until you get a fair representation. The colors in the chart above are known not to be easily reproduced on printers. This is a link to a named anchor Walk through an example of colors displayable on the screen versus what can be accurately printed.

I wish I could point you to an inexpensive hardcopy of a widely available example of a color calibration chart and a corresponding image file to which casual users could compare their monitors and printers. Maybe the folks at Crayola could accommodate us?

For a quick introduction to color management, start here:

http://en.wikipedia.org/wiki/Color_Management

For a more in depth understanding of color management see the white papers:

Introduction to Understanding Color

Hardware & Human Factors Influence Color Management

Color Spaces & Color Translation

The Basics on ICC Color Management Systems

at http://www.lacie.com/technologies/te...y.htm?id=10029

LacIe is a manufacturer of computer hardware and has a product line of monitors for creative and graphics professionals.

There is also helpful documentation at the International Color Consortium web site at

http://www.color.org.

I would add these helpful links from the ICC home page and Adobe online documentation. ICC www.color.org It may be handy to mention that colors drawn in Firefox 3 will match colors shown in color management applications like Photoshop. / Searching for "Color Management" in Adobe online help system also produces helpful information. http://livedocs.adobe.com/en_US/Photoshop/10.0/

To view images in Firefox using gfx.color_management.enabled

See Deb Richardson's description of how to turn on Firefox color management. Make sure your monitor / video card supports ICC profiles. The older your machine, the lower end it is, like no frills laptops and desktops with video chips on the motherboard, the more likely it is that profiling and calibrating will not be supported.

Calibrate and profile your monitor

I suggest adding a section called something like "Color Management and your Monitor". This would show that 1) colors are defined using an ICC profile. and 2) colors are transformed so that originally specified color is created on your monitor. Also mention that Firefox uses sRGB for colors unless there is a specific profile associated with images. Int hat case, that profile is used to define colors. 6500 K is closer to outdoor skylight. 5000K is a standard viewing condition due to the uniform spectral energy across the visible spectrum.

Calibrating means adjusting your monitor's settings (for your viewing environment) as close as possible, to a standard.

Two key concepts to understand are color temperature and gamma correction. A simple way to think about color temperature is that it descries the white you see on your screen. 9300°K gives your monitor a more bluish tint, 5000°K approximates sunlight and 6500°K is good for indoor use.

Its easy to get lost in the definition of what gamma correction does. One way of thinking about it is that when you are adjusting gamma, you are making sure all the shades of gray and other colors are visible.

I would add here that this is achieved by adjusting the relative lightness or darkness of mid-tone colors.

Profiling is the part where a color profile is saved that represents your monitor's color appearance based on the previously applied calibration. The color profile is saved in a format (ICC) that allows your software to color match between systems and also a way for your monitor to use these saved settings.

Check your system for display and calibration options

Some video card and monitor manufacturers have "Display Optimization" or Monitor adjustment routines. For example, if you have Nvidia card with their software, Click Desktop > Right Click > Nview Desktop Manager > Tools > Calibration. This step will at least help you calibrate your monitor.

A simple approach to Calibration and Profiling

This page talks about some simple steps you can take to http://www.wikihow.com/Calibrate-Your-Monitor

The above page has a link to Quick Gamma http://www.quickgamma.de/indexen.html a very nice calibration utility.

Three easy steps to calibrate your monitor is at http://www.calibrize.com/ another very nice calibration utility

A review of Quick Gamma and Calibrize is underway!

Quick Gamma is not as appealing to the eye as Calibrize, however, its a standalone utility and it has an excellent help system with links to in depth articles. Calibrize has very concise and easy to understand instructions and descriptions. It requires you to be connected to the internet while using it.

Before the review can be completed, a review of the differences of where color calibration and profiling information is stored needs to be completed. See the troubleshooting sections in this articles Discussion for more background.

Quick Gamma and Calibrize are the closest thing I have seen to the Easy, Reader's Digest Version of Color Calibrating Your Monitor for Accuracy.

This pages has some nice images and simple instructions which show the gradients of grey. http://www.photofriday.com/calibrate.php

This page has some nice images which show the gradients of grey and colors. http://www.oceanlight.com/html/about_color.html

A simple approach if you have programs that support it

PhotoShop, PaintShop Pro and other image editing software have basic monitor profiling options.

More advanced options

This page details some very useful guidelines and windows specific steps for the calibration process http://www.adorama.com/catalog.tpl?a...op=academy_new

This page has some additional MAC and Photoshop information. http://www.gballard.net/nca.html#getagoodscreen

It would be helpful to include major calibration/profiling applications that are currently not for free. Notable examples are from: X-Rite http://www.xrite.com DataColor Spyder http://spyder.datacolor.com/ ColorEyes http://www.integrated-color.com/cedp...esdisplay.html

To print from Firefox

Using a printer for accurate color printing is complicated. Their are different inks and dyes and print heads can clog and become mis-aligned. The application of ink or dye on paper with different properties (density, ink absorption etc.) to reproduce color is a large industry. If you expect to be able to print the same image you can now view accurately in Firefox, you need to see if your printer is up to the job. Chances are that if you bought a printer and it cost less than $300, its not going to support ICC profiling.

For examples of these printers, go here

http://www.adobe.com/products/photos...compatibility/

You need an ICC profile for your printer, paper, driver and ink. Here is an example of where you can purchase custom printer profiles. http://www.inkjetart.com/cgi-bin/profiles.cgi

When you hit print in Firefox, select a printer and then drill down into printer properties to further select options. YMMV

-> If I want to print from Firefox, what happens, when FF is set up for one profile, my printer's default is setup with another?

That is what a color manged system with ICC is all about, "It's used to intelligently-transform, device-unique, color information between devices"

To create images for view in Firefox with embedded ICC information

Get a full featured Graphics Program comparable to Adobe PhotoShop, ACD Systems ACDSee Pro or Corel PaintShop Pro or a full featured design and layout program from a vendor like Quark.

Taking pictures with digital cameras

Many Cameras use exifJPEG (JPEG Encoded File with Exif Metadata) file format, and your camera may not automatically embed ICC_PROFILE data; however, color matching in the Camera makers supplied editing software (or in a program like PhotoShop) may have an option to do this.

Photo image color space

Camera manufacturers do not embed ICC profiles in the images they create. They include EXIF data which has a color space tag which according to the EXIF specification has two settings, sRGB or uncalibrated.

Ask Steve about this http://lists.apple.com/archives/Colo.../msg00001.html Both the JPEG and TIFF image file specification include an option for embedding a profile that describes the color space for the images. Unfortunately, and for reasons still unclear to me, I don't know of any camera manufacturer who chooses to utilize this feature, so there are almost no cameras that will specifically identify the color space of the image by embedding the profile for that color space even though it would require only about 500 bytes in the file header to do so. Instead, most manufacturers include the EXIF "color space" tag in the file header. The EXIF data in your photos includes information such as the shutter speed, aperture, flash status, and other shooting parameters, so it is logical to identify the color space via the EXIF information. Sadly, the EXIF color space tag can only identify the color space if the color space being used is sRGB. There are only two valid settings for the EXIF color space tag and those are sRGB (a standard color space for PC's and the web) and "uncalibrated". Basically this means that if your camera is storing images in the sRGB color space, you should be fine since the EXIF color space tag will specify sRGB and your photo software should be able to identify sRGB as the color space of your images. If your camera is not storing images in the sRGB color space, you really cannot tell what color space is being used by looking at the EXIF information since "uncalibrated" is all the information that will be provided. A color space (profile) must be assumed for the images created by your camera. If you are using a monitor and/or printer profile, some color space is being assumed for your images (out of the camera) whether you realize it or not! Make sure you know the assumptions being made by our camera and our imaging software.

From http://www.steves-digicams.com/techc...june_2006.html

Commercial photo printers

Costco supports ICC profiles. You can go to the following link to learn more about using a printer profile with your software (PhotoShop, PaintShop Pro 12, Quark etc) if it supports it.

http://www.drycreekphoto.com/Learn/profiles.htm http://www.drycreekphoto.com/icc/usi...r_profiles.htm

At this time, the only site I know where you can get printer profiles used by photo printing vendors is Dry Creek Photo

Most other photo print vendors like your local drugstore assume that the color space is Windows Standard sRGB and do not recognize either embedded profiles of the EXIF

For example, by default an Olympus Evolt E500 Digital SLR saves images with an _ in the filename if the Adobe color space is used and a P for sRGB color space, but it does not embed the profile into the file. If you use the Adobe color space in unedited digital print files, you need to make sure your vendor recognizes the EXIF color space tag uncalibrated as using the Adobe color space.

Questions

-> The windows control panel color applet lets me associate monitor profiles with printing and scanning devices. In 25 words or less, what happens when you do this?

-> Are both the EXIF color space tag and ICC_PROFILEs recognized?

-> How is color matching supposed to work for elements colored with CSS and SVG and Canvas type drawings?

-> What does Monitor auto adjust do?

Please see the discussion for other questions.

Open Source Color Management and Profiling Solutions

http://lprof.sourceforge.net/ lprof – an ICC profiler

http://littlecms.com/ Color Management System

http://www.argyllcms.com/ Argyll Color Management System

http://www.oyranos.org/ and its authors site http://www.behrmann.name/

Windows XP Microsoft Color Applet

Checking default color profiles in Windows

See the discussion Windows XP Microsoft Color Applet questions?

Control Panel > Color

Color Settings

There are tabs for Color > Profiles > Devices

Color

Image Color Management ICM 2.0 ICC compliant color management

c:\windows\system32\spool\drivers\color\srgb color space profile.icm 

Profiles

Shows all Profiles installed on your system name – filename – class (printer – monitor – scanner) Producer

Devices

Associate a profile with a device

This is an internal Link The following images show you an example of a monitor profile compared with a printer profile. It shows what can be displayed on a monitor versus what can be printed on an example printer. In essence, you cannot print all the colors you can see on the monitor. Their are a lot of reds and yellow and blues etc. that you cannot print. But then again, their are a number of close approximations that you can. I believe the print industry has jumped through a lot of hoops to bring us reasonable skin tones before they took on reproducing every variation of red!

1) Control Panel -> Color -> Devices select monitor and

set sRGB as the default profile. Is it the same for Vista ? 2) Download a printer profile a) here is a sample install it. note ICC profiles can have the extension .icc or .icm 3) go the profiles section of the color applet

Select the sRGB profile. See the small + enlarge button in the lower left hand corner. Click on it.

and this window comes up

select a printer profile to compare it to

Notice the overlap, the printer cannot reproduce the colors that the monitor can't

The graph represents the colour gamut of the device in CIELAB or CIELUV coordinates.

Opacity and zoom are rendering options which control how this plot is presented - by reducing the opacity you can see more easily the gamut of the second profile where it lies inside that of the first.

The gamut projection is the geometric projection of the 3D solid into a plane, which you can see if you toggle the checkbox on and off.

For windows XP, if you do not have the Control Panel color applet

Control Panel -> Color

You can go here and download it http://www.microsoft.com/downloads/d...DisplayLang=en

When you use the Control Panel Color Control to add a ICC profile, it puts an * next to some files and and indicates that they have embedded gamma information.

F1 help gives you a little more description of what these mean; if you happen to already understand color way beyond the scope of this article.

Turn on Firefox Color Profile Support

There are two ways to turn on color profile support in Firefox 3. The easiest is to install the Color Management add-on (which will work with Firefox 3 Beta 5). After you install the add-on and restart Firefox 3, color profile support is enabled, and you can specify a custom color profile by going to the Tools menu, selecting “Add-ons”, and clicking the Color Management add-on “Preferences” button. If you do not specify a color profile, the system default profile will be used, which should be OK for most people.

The second way to turn on color profile support is through the about:config page, which is a special page where a huge number of different (and usually hidden) Firefox options can be tweaked. This is not a recommended method for most people — about:config options should only be edited if you are very aware of what you’re doing. That said, if you do want to edit the options there, they are gfx.color_management.enabled and gfx.color_management.display_profile. For more about editing about:config, see the SUMO knowledgebase article, or the more detailed (if slightly out of date) content over on MozillaZine.

Disclaimer

This is a stub. Please feel free edit this. As of May 2008, a search on color management will turn up some very interesting pages. Many are geared towards graphics designers, professional photographers and folks in the printing business. GMGJ