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.
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
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.
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
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
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
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
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.
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.
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.
- 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.
- 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.
DreamLight Can Design a Custom WordPress Web Site for You
DreamLight 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.