High Dynamic Range (HDR) allows for a wider range of colours and brightness levels. This technology works on displays that support HDR format. Nowadays web advantage of display gamuts such as Display P3 and Rec. 2020, which can display a much larger color space than traditional sRGB displays. It is 50% more colours.

CSS is ready to fix it (at least for Apple users). Find colour gamuts comparison, code examples and device support overview below.

What is HDR?

Colour coverage for sRGB and Rec. 2020 gamuts.

The color gamut is a numerical value that specifies the visible range of colours on a certain device. The CIE (International Commission on Illumination) 1931 color space is a widely used color model that defines a color space based on human perception of colors. Since 1996 sRGB or safe‑webcolours interpret colours for browser and monitors. Nowadays displays are able to show 50% more colours from sRGB.

You can see live examples of HDR in CSS by visiting websites optimised for HDR displays [1], [2], [3], [4]. These websites shows more vivid colours, brighter highlights, and deeper blacks. Find more examples on GitHub by searching display-p3.

HDR images are often used for photography. They capture more detail than traditional photos do. Meanwhile dynamic-range in CSS checks display settings!

There are two ways to output extra color in css: color() and lch(). First defines colourspace and rgb‑format values. Latter is special notation for its own device independent colourspace. Find rgb, lch, rec.2020 and display‑p3 comparison below.

Device support

HDR displays are becoming more common, and support for HDR in CSS is increasing as well. Currently, Apple’s latest models of iPhone, iPad and MacBooks have HDR displays. Safari on macOS Mojave and iOS 11 support css syntax. Latest Apple Pro display accepts its best rec.2020 color gamut. It means it can work in sRGB mode, so all colours fade like in old magazines.

When it comes to device support, there isn't a huge difference between iOS and Android. First, display should support HDR, second, software should support CSS high‑dynamic styles.

Starting with iMac in 2015 Display P3 is know and still in 2023 only safari supports it. There is wide gamut website to check your display support.

You can use JavaScript to check if a device supports HDR displays. Adjust your website with an example below.

function isitHDRReady() {
  // Check if browser supports hdr media queries
  var mediaCheck = window.matchMedia(
    "(dynamic-range: high) and (color-gamut: p3)"
  ).matches;

  // Check if browser supports color() function
  var supportCheck =
    window.CSS && window.CSS.supports("color", "color(display-p3 1 1 1)");

  if (mediaCheck && supportCheck) {
    return true;
  }

  return false;
}

CSS4 Color Values

The CSS4 Color Module has added several new color values. For example the ability to specify colours in the sRGB and P3 color spaces. This syntax allows for more precise colour values. It is especially useful for HDR displays. Find a code sample for green colour below.

span {
  color: #00ff00;
  color: color(display-p3 0 1 0);
  color: lch(87.819% 137 134.384);
  color: color(rec2020 0 1 0);
}

color()

sRBG is interpretation of CIE 1931 color space and has 0...255 range of colour codes.

color(rgb 1 0 0)— show the very red colour in sRGB gamut.

hsl()

Hue is a presentation of spectrum color. Saturation aka Brightness aka Chroma is level of colour intensity. Value aka Lightness aka Darkness is level of white/black filter for colour.

lch()

Lightness, Chroma, Hue means the same, but their mathematical bounds differ. Hue is a bit different and Chroma has no limits in theory.

What about production support?

Use fallback values for pure css. Create React App and Parcel work out of the box. For Tailwind custom plugin wrap color in quotes. It adds fallback.

'custom-yellow': 'color(rec2020 0.9508 1 0.0035)'

Conclusion

HDR is a future. It will be great for web design and development. We're seeing more of CSS4 and browser support improves.

? Easter egg

There is one discovered CSS trick or bug. Put HDR video into webpage, add a text with backdrop-filter and brightness greater than 100%. It will display a brighter white by exploiting the HDR capability of browser. It's not a standardized feature and may not work across all browsers and devices. This tab also consumes a lot of energy.

Further Reading