Why Extended RGB Gamuts Are Changing Web Design

Illustration. This colorful parrot photo might have many extended RGB colors.
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

Traditionally, web designers and web developers prefer working with hexadecimal colors, or HEX codes, in web design. HEX short codes are easy to write and scan. However, extended RGB gamuts are challenging the hexadecimal color gamut. Designing with HEX may reduce the color experience for users with the hardware and apps that do support extended RGB gamuts.

RGB Web Colors & Transparency

The RGB color system uses the additive color mixtures of red, green, and blue to define a color. Additive mixtures combine to form pure, white light. (How does RGB compare to CMYK? Read “Basic Color Theory for Printing.”)

Specifically, the CSS3 rgb() function sets a value for each hue—red, green, and blue in that order—between 0 and 255. Values closer to 0 reduce the presence of that hue, while values closer to 255 increase it.

For example, black has no color anywhere, so its RGB color is rgb(0, 0 , 0). On the other hand, white maxes out all the colors, so its RGB color is rgb(255, 255, 255).

The graphics processors in computers store the total RGB color as an 8-bit number in what’s called the standard RGB gamut, or sRGB. In color theory, a gamut represents a range of colors. The size of these gamuts and the number of visible colors change depending on the technology. sRGB is the oldest and most widely supported RGB color system. The World Wide Web Consortium (W3C) specifies that any colors unsupported by the RGB gamut rounds to the next closet value.

W3C’s update to CSS3 expanded the color levels supported by the CSS language around 2007, including RGBA. The rgba() function allows web developers to define a fourth value, an alpha channel transparency value in a range from 0 (100% transparent) to 1 (100% opaque). Values in between, such as .5, display a translucent color in which some of the background shows through it.

HEX Web Colors & Transparency

The hexadecimal (hex) color system is another additive color mixture of red, green, and blue values. HEX codes also defines the level of red, green, and blue in that order, this time on a range from 00 to ff. 00 decreases the amount of that hue, whereas ff increases it.

Interestingly, CSS3 has also introduced transparency to hexadecimal web colors with new 8-digit HEX codes. (So octadecimal values, then?)

Chris Coyier at CSS-Tricks explains how to use this new hexadecimal notation. Basically, the additional last two digits define the transparency/opacity in a range from 00 to ff the same way the “a” does in the rgba() function. The updated notation looks like #rrggbbaa, where the two a’s stand for alpha channel transparency values. However, 8-digit HEX codes are currently less supported than rgba(), according to Can I Use?.

Support for #rrggbbaa

Screenshot. Support shown for 8-digit hexadecimal codes on Can I Use?
Credit: Can I Use?. As of March 29, 2019.

Support for rgba()

Screenshot. Support shown for the CSS3 rgba() function on Can I Use?
Credit: Can I Use?. As of March 29, 2019.

Comparing Gamuts

Visible Light Found in Nature

Illustration. Color swatches from a photo that might display an extended RGB gamut.

We know that the gamut of human vision includes “visible light.” The wavelengths appear as hues from violet to red using—you guessed it—an additive mixture of light. We tend to rely on RGB additive mixtures because that’s what most humans see. Most people have three color cones: one for red, one for green, and one for blue.

However, other animals might have more color cones that allow their eyes to process more colors beyond the gamut of our human visible light spectrum. For example, birds possess a fourth color cone that captures ultraviolet (UV) light. The mantis shrimp has sixteen (16!) color cones.

Yet even some humans can see more colors than RGB. Some women are born with a mutated X-chromosome that gives them four color cones, a condition called tetrachromacy. Tetrachromatics can see 100 times the colors the average person can and can be as much as 12% of the female population. Comparatively, color deficiency or “color blindness” runs in about 8% of the male population and 1% female.

Extended RGB Gamuts

Visible Light vs. Pantone (PMS), sRGB, & CMYK Color Gamuts

The visible light spectrum represents the largest color gamut of all. The next largest gamut is RGB. (Both the visible spectrum and RGB work with additive light mixtures, so it makes sense.) The next two smaller gamuts use subtractive mixtures: Pantone (PMS) followed by the smallest range of color, 4-color process (CMYK).

sRGB vs. Adobe RGB Gamuts

The Adobe RGB extended RGB gamut supports all the sRGB colors plus a wider range of greens.

Illustration. Comparison of sRGB and extended RGB gamuts, Adobe RGB. Credit: Fstoppers.
Credit: Fstoppers

sRGB vs. Adobe RGB and Apple P3 Gamuts

Both of the extended RGB gamuts Adobe RGB and Apple P3 display a wider range of colors than sRGB. However, Adobe RGB supports more greens, while Apple P3 supports more yellows.

Hexadecimal Gamut

The hexadecimal color system is designed according to the sRGB gamut. Therefore, HEX is simply sRGB better formatted for use in web development. Like sRGB, colors outside HEX-supported values are converted to the next closest matching color.

Is RGB the Same as Hexadecimal? Do All RGB Colors Have Matching HEX Codes?

So, if both RGB color gamuts and the hexadecimal color gamut are both based in RGB, do all RGB colors have matching hex codes?

Perhaps not. Extended RGB gamuts support more colors than the sRGB color system on which hexadecimal is based.

Theoretically, since extended RGB gamuts have more colors than sRGB, and since HEX uses sRGB, then some extended RGB colors won’t have exact HEX matches.

The reason for this, however, is often color profiles. Different computer monitors, hardware, and apps can apply different color profiles that render color differently. A mismatch in colors can be the simple result of a different conversion. To avoid this confusion, web designers can embed color profiles within images. In Adobe applications, just check the box “ICC Profile” in the Save for Web menu.

Yet another reason might be that the monitor, web browser, or app simply don’t support the extended RGB colors. Both the computer hardware (the monitor) and software (such as a web browser) should support the extended gamut to render colors correctly.

Basically, everything supports sRGB. The extended RGB colors support varies. Software must enable color management in order to properly display extended gamuts. ICC Profiles v2 and v4 help provide that color management for non-sRGB graphics.

This color profile test shows current support for extended RGB across web browsers and monitor capabilities. Indeed, support is growing! Here’s the current scoop:

Designing between Extended RGB Gamuts & Web Accessibility

Color deficiency is an increasing concern of web accessibility standards established by the W3C. The W3C Web Content Accessibility Guidelines (WCAG) requires distinguishable use of color.

There’s a lot of focus on improving web experiences and making content readable those with visual disabilities. As stated earlier, people with color deficiencies occupy at least 8% of the population. Color deficiencies, or color blindness, includes the most common form, deuteranopia (red-green color blindness).

Online color picker tools like Paletton allow web designers to test color palettes against forms of color blindness to select accessible color schemes.

Credit: Paletton.

Yet it’s also interesting to consider how web experiences for those with color proficiencies. Similar to the color-blind population, tetrachromatics represent 6% of the population. Would extended RGB gamuts appeal to this population? What’s the common ground between the average, color-deficient, and tetrachromatic populations for selecting web colors?

Final Thoughts:

So when should you use RGB over HEX? There’s no hard and fast rule for choosing one color system over another yet in web design.

Both RGB and its extended RGB gamuts and hexadecimal create additive mixtures using red, green, and blue light from the visible spectrum. Both RGB and HEX can also use alpha channels to define transparent web colors. Finally, both capture at least all the sRGB gamut and offer transparency. However, RGB’s rgba() is better supported than HEX’s #rrggbbaa right now. Additionally, rgba() takes advantage of displaying extended RGB gamuts. Therefore, RGB is better over HEX when used in web to:

  • Display transparent colors
  • Display extended RGB colors