Thedynamic-range-limitCSS property specifies the maximum luminance allowed for High Dynamic Range (HDR) content.

Syntax

/* Keyword values */dynamic-range-limit: standard;dynamic-range-limit: no-limit;dynamic-range-limit: constrained;/* dynamic-range-limit-mix() function */dynamic-range-limit: dynamic-range-limit-mix(standard 70%, no-limit 30%);/* Global values */dynamic-range-limit: inherit;dynamic-range-limit: initial;dynamic-range-limit: revert;dynamic-range-limit: revert-layer;dynamic-range-limit: unset;

Values

Thedynamic-range-limit property is specified as one of the following keyword values or adynamic-range-limit-mix() function call.

The following keyword values can be specified:

standard

Specifies the maximum luminance asHDR reference white, which is the CSS colorwhite.

no-limit

Specifies the maximum luminance as much greater than that of HDR reference white. The precise level is not specified.

constrained

Specifies the maximum luminance as somewhat greater than that of HDR reference white, such that a mix of Standard Dynamic Range (SDR) and HDR content can be comfortably viewed together. The precise level is not specified.

Thedynamic-range-limit-mix() function specifies the maximum luminance as a custom value that is a combination of the different keyword values proportionate to the provided percentages. It takes two or more pairs, each consisting of adynamic-range-limit keyword (or a nesteddynamic-range-limit-mix() function) and a percentage.

Description

Dynamic range is the difference in luminance (brightness) between the lightest and darkest parts of content. Dynamic range is measured in photographic stops, where an increase of one stop represents a doubling of the luminance.

SDR, HDR, and headroom

Traditional web content usesStandard Dynamic Range (SDR), where the brightest color is equivalent to the CSS colorwhite (#ffffff in hexadecimal). The brightness inHigh Dynamic Range (HDR) content, on the other hand, can go beyond the standard white. In HDR terminology, the standard CSSwhite is also called the HDR reference white.

The peak luminance at which content can be displayed depends on the content, the available display hardware, and user preferences. The amount by which the peak luminance of white can exceed HDR reference white is termedHDR headroom and is typically expressed in photographic stops.

SDR content always has an HDR headroom of0 because its brightest whiteis the HDR reference white. Older monitors may also have an HDR headroom of0 because they are not able to display brighter colors. Newer monitors may have an HDR headroom greater than0, allowing them to display the brighter colors available in HDR content.

The use-case fordynamic-range-limit

The brightness of HDR content can be jarring to the viewer. This is especially apparent in apps where a mixture of HDR and SDR content is displayed, leading to inconsistency in the brightness.

Thedynamic-range-limit property allows you to control the brightness of HDR content. For example, you might want to constrain the maximum brightness of all thumbnails in a photo or video gallery to HDR reference white (this is what thestandard keyword value does) or to a brightness only slightly more than the HDR reference white (using theconstrained keyword value or a custom limit created usingdynamic-range-limit-mix()). When a user views a single HDR image, or if the user selects a preference to enable it, you could then set the image'sdynamic-range-limit tono-limit.

Formal definition

Formal syntax

dynamic-range-limit =
standard|
no-limit|
constrained|
<dynamic-range-limit-mix()>

<dynamic-range-limit-mix()> =
dynamic-range-limit-mix([<'dynamic-range-limit'>&&<percentage [0,100]>]#{2,})

<dynamic-range-limit> =
standard|
no-limit|
constrained|
<dynamic-range-limit-mix()>

Examples

Basicdynamic-range-limit usage

In ourdynamic-range-limit property demo, we include an HDR image that can be hovered and focused to transition thedynamic-range-limit value.View the example live in a display capable of displaying HDR colors, and try it out. The code is explained below.

HTML

In the markup, we embed an HDR image using an<img> element. We include atabindex value of0 to make the image focusable via the keyboard.

<img  src="gioia-pixel-ultrahdr.jpg"  alt="A subway station, with white strip lights lighting the platform and ad posters in the background"  tabindex="0" />

CSS

We give our<img> element some rudimentary styles, then set itsdynamic-range-limit property tostandard, which means it won't be displayed any brighter than HDR reference white. We also set atransition property so that the<img> element'sdynamic-range-limit value will transition over0.6 seconds when its state changes.

img {  width: 50%;  border: 1px solid black;  dynamic-range-limit: standard;  transition: dynamic-range-limit 0.6s;}

On hover or focus, we change the value of the<img> element'sdynamic-range-limit tono-limit so that it will display as brightly as the browser and display setup allow.

img:hover,img:focus {  dynamic-range-limit: no-limit;}

Specifications

Browser compatibility

See also

dynamic-range andvideo-dynamic-range media features