HDR in CSS
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?
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 from notes. 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!