{"id":394807,"date":"2024-06-29T11:50:24","date_gmt":"2024-06-29T11:50:24","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=394807"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=394807","title":{"rendered":"HDR Displays and CSS: Enhancing Color and Brightness on the Web<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

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<\/a>.<\/p>\n

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

What is HDR?<\/h3>\n
\"Colour
Colour coverage for sRGB and Rec. 2020 gamuts.<\/figcaption><\/figure>\n

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\u00a0sRGB or safe\u2011web<\/em>colours interpret colours for browser and monitors. Nowadays displays are able to show 50% more colours from sRGB.<\/p>\n

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

HDR images are often used for photography. They capture more detail than traditional photos do. Meanwhile dynamic-range<\/code> in CSS checks display settings!<\/p>\n

There are two ways to output extra color in css: color()<\/code> and lch()<\/code>. First defines colourspace and rgb\u2011format values. Latter is special notation for its own device independent colourspace. Find rgb, lch, rec.2020\u00a0and display\u2011p3\u00a0comparison below.<\/p>\n

<\/div>\n

Device support<\/h3>\n

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

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\u2011dynamic styles.<\/p>\n

Starting with iMac in 2015\u00a0Display P3\u00a0is know and still in 2023\u00a0only safari supports it. There is wide gamut website<\/a> to check your display support.<\/p>\n

You can use JavaScript to check if a device supports HDR displays. Adjust your website with an example below.<\/p>\n

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; }<\/code><\/pre>\n
CSS4 Color Values<\/h3>\n
The CSS4\u00a0Color Module has added several new color values. For example the ability to specify colours in the sRGB and P3\u00a0color spaces. This syntax allows for more precise colour values. It is especially useful for HDR displays. Find a code sample for green colour below.<\/p>\n
span {   color: #00ff00;   color: color(display-p3 0 1 0);   color: lch(87.819% 137 134.384);   color: color(rec2020 0 1 0); }<\/code><\/pre>\n
color()<\/h4>\n
sRBG is interpretation of CIE 1931\u00a0color space and has 0…255\u00a0range of colour codes.<\/p>\n
color(rgb 1 0 0)<\/code>\u2014 show the very red colour in sRGB gamut<\/em>.<\/p>\n
hsl()<\/h4>\n
H<\/strong>ue is a presentation of spectrum color. S<\/strong>aturation aka Brightness aka Chroma is level of colour intensity. Value aka L<\/strong>ightness aka Darkness is level of white\/black filter for colour.<\/p>\n
lch()<\/h4>\n
L<\/strong>ightness, C<\/strong>hroma, H<\/strong>ue means the same, but their mathematical bounds differ. Hue is a bit different and Chroma has no limits in theory.<\/p>\n
What about production support?<\/h3>\n
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.<\/p>\n
'custom-yellow': 'color(rec2020 0.9508 1 0.0035)'<\/code><\/p>\n
Conclusion<\/h3>\n
HDR is a future. It will be great for web design and development. We’re seeing more of CSS4\u00a0and browser support improves.<\/p>\n
? Easter egg<\/h3>\n
There is one discovered CSS trick or bug<\/a>. 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. <\/p>\n
Further Reading<\/h3>\n