Granger Rainbow for Web Color Management

Web Color Management for Images and CSS Colors

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.

sRGB Color Space + Rec. 709 - Web Color Management

The sRGB Color Space was created by HP and Microsoft as a standard RGB color space for the World Wide Web. It is a lowest common denominator color space supported by most displays and printers. It has been adopted as the default color space for the web. It's also very close to the Rec. 709 color space for HDTV.

sRGB Color Space

SWOP/CMYK Color Space - Web Color Management

The SWOP/CMYK color spaces like Adobe's U.S. Web Coated (SWOP) v2 are designed for CMYK printing on standard web offset printers. Such color spaces are best used for four color printing.

SWOP/CMYK

DCI-P3 Color Space - Web Color Management

The DCI-P3 Color Space was created by the Digital Cinema Initiatives (DCI) organization for use in digital movie projection. It's best used for projects intended for digital projection on monitors and devices capable of displaying its wider gamut than sRGB.

DCI-P3 Color Space

Adobe RGB Color Space - Web Color Management

The Adobe RGB 1998 Color Space was created for use in Adobe software. Its larger color gamut encompasses most of the sRGB, SWOP/CMYK and Rec. 709 gamuts. This makes it a good color space to work in on monitors that are capable of displaying its wider color gamut.

Adobe RGB Color Space

Rec. 2020 Color Space - Web Color Management

The Rec. 2020 Color Space was created for Ultra-High-Definition TV (UHDTV). It uses a wide color gamut for standard dynamic range (SDR) UHDTV and is expanded to high dynamic range (HDR) in Rec. 2100. It is best used for UHDTV applications on wide-gamut monitors capable of displaying its wide color gamut.

Rec. 2020 Color Space

Adobe Wide-Gamut RGB Color Space - Web Color Management

The Adobe Wide-Gamut RGB Color Space was created for use in Adobe's professional applications suite. Its wide color gamut encompasses most other color spaces and is a good general working color space for pro applications on wide-gamut monitors.

Adobe Wide-Gamut RGB

ROMM/ProPhoto RGB Color Space - Web Color Management

The ROMM/ProPhoto RGB Color Space was created by Kodak for photographic output. Its gamut is so wide in fact that the blue and green primaries are beyond the range of real colors. It's best used for photographic output on devices capable of reproducing the visible portion of its wide color gamut.

ROMM/ProPhoto RGB

previous arrow
next arrow
Slider
[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.]

ssRGB - Default Standard RGB for Web Color ManagementRGB – 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.

Slider

 

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.

CSS Colors

#FF0000
#FFFF00
#00FF00
#00FFFF
#0000FF
#FF00FF

sRGB Color Primaries Test for Web Color Management
Image with sRGB Color Profile


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.

Firefox advanced manual cofiguration for web color management

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

Firefox gfx.color_management for web color management

  • 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
        Apple ColorSync Utility for Color Profile Path
    • 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 RGBAdobe 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.

Slider

DreamLight Can Design a Custom WordPress Web Site for You

New WordPress Website SampleDreamLight can develop a custom WordPress website for you. We can work closely with your marketing team to update your existing Web site that may be outdated or to design a brand new custom WordPress website. In addition to leveraging web color management as discussed above, we design all our custom WordPress websites to be fully responsive. As a result the overall design layout automatically re-flows on-the-fly to take best advantage of all modern mobile devices and displays. As multimedia experts we can also create a wide range of integrated branded marketing content for your website to help it really stand out, including: 2D/3D digital design, illustration, animation, interactive multimedia or even web application development.

Contact us for more information about designing a custom WordPress website or to explore your specific needs.


Request a Free Quote Today!

DreamLight brings your dreams to light – digitally.


If you enjoyed this tutorial please consider making a donation to fund more!


DreamLight wrote the book: Creating a 3D Animated CGI Short. See what we can do for you.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.