Understanding and Testing Web Color Management for Images and CSS Colors in Web Browsers

Web color management is becoming more important as modern wide-gamut computer monitors become capable of displaying wider color gamuts. For instance, if you are using a newer high resolution monitor such as an Apple Retina display, or similar display, you may notice over-saturated colors. Especially reds and greens may be over-saturated when viewing websites in some web browsers. This is due to different color spaces between the original color and the viewing display. Many newer high resolution LCD/LED displays have a wide-gamut colorspace rather than the web’s more limited default sRGB colorspace. When sRGB colors are mistakenly interpreted as wide-gamut colors they appear overly saturated.

[Note: All the color space images in the interactive slider above are encoded with the ROMM/ProPhoto color profile. As a result the CIE chart will display in as wide a color gamut as your monitor is capable of displaying.]

---

sRGB – The Standard RGB Colorspace for the Web

When the World Wide Web began gaining popularity in the 1990’s Hewlett-Packard and Microsoft proposed a standard RGB colorspace for the Internet named sRGB. The resulting standard colorspace worked well for the vast majority of CRT monitors available at the time. It has since been standardized and adopted as the default colorspace by the W3C for displaying images and CSS colors as defined in the W3C CSS3 Color specification.

---

Web Color Management for Images

Because sRGB is the default colorspace for the web, most modern web browsers assume untagged images are in sRGB colors. The 3D renderings in the following interactive image slider are tagged with Adobe RGB, sRGB and Untagged. The sRGB and Untagged versions should look identical in modern web browsers that default to a managed sRGB color space. The first image has an embedded Adobe RGB 1998 color profile. The second image has an embedded sRGB color profile. The third image has no embedded color profile. Modern web browsers assume any images without an embedded color profile should be rendered in the default sRGB color space and they display it as such. If the colors in the sRGB/Untagged images look different then your web browser may not be displaying the untagged image in the default sRGB color space and may not have web color management enabled.

 

Here is an ICC color profile test page you may use to test how well your web browser handles ICC color profiles.

---

Web Color Management for CSS Colors

When designing websites for clients we often want to match colors of elements on the web page, usually specified in a cascading style sheet (CSS), with colors in a logo or other images. Because the default color space of the web is sRGB most web browsers interpret CSS colors as being in the sRGB color space. So when matching colors in an image, as long as you sample colors in your design program while viewing the source image in the sRGB colorspace, the CSS colors should match the image colors when viewed in a web browser that supports web color management.

The following test strip has two sets of primary and secondary colors. The top of the strip has colors created from CSS color codes. The bottom of the strip has those same colors created in an sRGB tagged image. If your web browser supports web color management and has it enabled then each of the color primary and secondary colors below should match. If you see any differences between the top and bottom of the test strip then your browser either doesn’t support web color management or has it disabled.

---

Enabling Web Color Management in the Firefox Web Browser

Most modern web browsers enable web color management by default. They honor embedded ICC color profiles in images and assume CSS colors are in the web’s default sRGB color space. Firefox also honors embedded ICC v2 color profiles in images by default. But as of Firefox 67.0.0 at least, it doesn’t color manage CSS colors. It just renders CSS colors in the monitor’s color profile. This results in CSS colors blowing out into over-saturated reds and greens when viewed on wide-gamut monitors. Firefox does support full web color management, including rendering CSS colors in sRGB and honoring ICC v4 color profiles, but it must be manually enabled using the following steps. [Use at your own risk.]

• Access advanced manual configuration settings by typing “about:config” in the address bar.

• Filter the config settings by typing “gfx.color” in the Search field.

• Edit the value settings for the following three preferences.
  • gfx.color_management.display_profile: Double click and copy/paste the path to your monitor profile.
    • You can find the path to your color profile on Mac OS X using the Apple ColorSync Utility
      
  • gfx.color_management.enablev4: Double click to change the value from false to true.
    • true: Enables ICC v4 color profile support
    • false: Disables ICC v4 color profile support (Default)
  • gfx.color_management.mode: Double click and change the value from 2 to 1.
    • 0: Disables all color management.
    • 1: Enables color management for all rendered graphics including CSS colors.
    • 2: Enables color management for images tagged with color profiles only. (Default)
• Then restart Firefox for the changes to take effect.

---

Wide-Gamut Color Spaces for Web Color Management

Modern color managed web browsers that honor embedded profiles should display images properly with any embedded color profile (though wide-gamut images may have colors clipped on sRGB displays). So for high end image viewing on wide-gamut displays you can embed a wider gamut color profile (P3, Adobe RGB, Adobe Wide Gamut RGB, ProPhoto RGB/ROMM). However for most web images that will be viewed on the vast majority of displays today you should embed the sRGB color profile. Any untagged images will be displayed as if they were in sRGB colorspace in any fully color managed browser or displayed with the monitor’s color space in any browsers that fail to perform color management.

Wide-Gamut Monitor Test for Web Color Management

A Granger Rainbow is a color management test image that is created with the full spectrum of hues from 0° to 360° from left to right. It is then overlayed with grayscale gradients from top to bottom so that the top to the middle shows a range of saturation from 0% to 100% and the middle to the bottom shows a range of brightness from 100% to 0%. In this case brightness is defined as the range of values of each color in the hue range going from full saturation to 0, rather than actual luminance.

Click the color space links at the bottom of the rainbow image slider below to display the Granger Rainbow in the corresponding color space. On wide-gamut displays you should see quite a bit of difference between all the different color spaces. If you see banding, then some of the colors may be beyond your monitor’s ability to display.