Browsers & Color Management I – Sending Color Patches through the Web Browser

While writing my previous posts on color management and web browsers [1, 2], I realized that instead of guessing as to whether a browser understands how to manage colors, a few measurements of color patches would go a long way. Questions, such as, what will happen with untagged images in Chrome 11 or is it safe to use sRGB profile for photos displayed on a wide-gamut monitor would then be easier to answer. By all means, these questions are not trivial and would deserve an in-depth study of the browser documentation and perhaps many hours spent on Google. Unfortunately, with many browsers one would still be unclear on the exact way by which are the (un)tagged images processed.

To address browser color capabilities in the most straightforward way, we would just send images of RGB primaries through the browser and record their colorimetric values. In order to do that, we would need a set of images that are either untagged (no color space information is associated with them) or images that carry color space information in the form of icc/icm profile. After the measurement is done, a quick comparison with known CIE 1931 chromaticity coordinates of RGB primaries of standard color spaces (sRGB, Adobe98 RGB, Pro Photo RGB) would reveal any color processing done by the browser. To measure the radiometric output, we can use the same device that we use to calibrate our display.

To make measurement of colors from within a browser easier, I provide jQuery script that displays different color patches and allows measurement in a semi-manual manner. The script runs in any browser that has JavaScript enabled. Included are gray and RGB ramps in four different variants; untagged and tagged with sRGB, Adobe98 RGB, and ProPhoto RGB icc profiles. After measuring these patches directly from the browser, we can both judge its color management capabilities and also obtain display characteristics, such as, display gamma, color temperature and gamma values for each RGB channel. On that later (link).

The Upshot of the Script:

  • Inter-browser compatibility (IE, Chrome, Firefox, Safari, Opera, …)
  • No installation (all necessary files are included)
  • No need to be connected to the Internet
  • Simple navigation (NEXT, PREVIOUS, RESET)
  • Customizable (supply your own images)
  • Free

How to prepare the script:

To begin, first download the necessary files (the latest version): v 1.01 | Complete set of files. Fixed a minor error in the index increment and displaying full set of images. – [downloaded 1222 times]

  1. Unzip the zip file into a folder (it self-extracts into folder “patches”) and place the folder structure anywhere on your computer (e.g. in c:/ ).
  2. Double-click on the index.html file in the main folder. Alternatively, drag the index.html file to the browser window.
  3. Depending on the Security policy settings of your computer,  you will want to confirm (OK, Agree, …) the message saying something about the JavaScript, Active-X to be allowed.
  4. The following page will appear in the browser window.

How to run the patch animation:

  1. To make sure that everything is in the initial state, press RESET.
  2. If you wish to run Untagged series first, just check which set to run (All or Gray & Primaries) [2] and proceed by clicking  NEXT.
  3. For other color spaces, choose the color profile (icc profile) associated with the image set by clicking the corresponding red tab at the top [1] (Untagged is the default).
  4. Select the set of images to run (All or Gray & Primaries) [2]. “Gray ramp and Primaries” has 12 images (default); 7 gray ramps, 3 RGB patches and the black and white patches. “All available patches” include the gray ramp from the above, 7 patches each of the red, green, and blue ramps and the black and white patches  (total of 36).
  5. Read steps in the note [3] to calibrate the measuring device and acquire reading of the white patch.
  6. Use the NEXT, PREVIOUS buttons to advance or step back.  At the end of the cycle, script resets into the default state.
If something goes wrong, press RESET. 

How to measure patches:

Unfortunately, there are limited options when it comes to manual measurements off the screen that are not driven by a specific display calibration package. The good news is there are still a few free software applications. These include Argyll CMS and homecinema-fr colormeter at HCFR. On the commercial side, I prefer using the BabelColor CT&A.

I described setup and use of all of the mentioned applications on my Techpages, specifically at: Argyll CMS – examples of useHCFR Colorimetere, and BabelColor CT&A.

I will go into measurements and results in more details later. At this point, I will continue with discussion of the code used in this project.

No Responses — Written on November 27, 2011 — Filed in: Code, Color management, Software

Leave a Reply

Your address will not be published.