`Dynamic-range-limit` - Property CSS

dynamic-range-limit

Summary of characteristics of the `dynamic-range-limit` property

Quick description

Limits the brightness of high dynamic range image (HDR) to make them comparable to standard images (SDR).

Status

Compatibility issues ⚠

Usable for

HTML

Predefined values

standard | no-limit | constrained | constrained-high | hight

Percentages

Not applicable. Except with the function dynamic-range-limit-mix().

Initial value

high

Inherited by default

Yes.

Animation type

Discrète: during an animation, the dynamic-range-limit property passes from one value to another without transition..

Canonical order

Single: single value (no order).

W3C Module

CSS Color HDR Module

References (W3C)

CSS Color HDR Module Level 1

Document status: WD (Working Draft)

Syntax diagram of `dynamic-range-limit`.

Syntax diagram of the dynamic-range-limit property.
The links in the diagram provide more details about the values.

Description of the `dynamic-range-limit` property.

⚠

This property is still poorly supported by browsers.

The term "dynamic range" refers to the ratio between the highest and lowest luminance in an image or video. Traditionally, web content is displayed in SDR (Standard Dynamic Range). In this system, the brightest color that can be displayed is white (#ffffff). In HDR (High Dynamic Range), the brightest color can go beyond this white. In reality, there are quite a few extremely bright objects, such as a light bulb, or of course, the sun.

Standard monitors do not have the ability to display colors with a luminance higher than that of white. But some of the latest monitors are capable of it. Similarly, the image file is special: it must have 32 bits per color, instead of 8 bits in a standard JPEG.

When a page offers both SDR and HDR content, such as in a gallery displaying images uploaded by users, the difference between these images can be striking: HDR images appear brighter. This is where the dynamic-range-limit property comes into play.

dynamic-range-limit allows you to set the maximum luminance of HDR images or videos. Taking the example of our image gallery, when images are displayed side by side, you can easily limit their luminance and only show the full brightness when the image is displayed alone, for example after clicking to view it in full screen.

Values for `dynamic-range-limit`.

dynamic-range-limit: standard;

The standard value limits the display to white (white or #ffffff) so that the luminance of HDR and SDR images is identical.
dynamic-range-limit: no-limit;

Displaying HDR images or video can make colors appear somewhat "whiter than white."
dynamic-range-limit: constrained;

contrained specifies that the maximum luminance is slightly higher than that of the HDR reference white. This way, a page displaying both HDR and SDR images appears uniform. The exact level is not defined in the specification.
dynamic-range-limit: dynamic-range-limit-mix(standard 20%, no-limit 80%);

The dynamic-range-limit-mix() function calculates an intermediate limit between two or more of the values mentioned above.

If the sum of the indicated percentages does not equal 100%, they are adjusted up or down so that the total is exactly 100%.
dynamic-range-limit: initial; (high) dynamic-range-limit: inherit; dynamic-range-limit: revert; dynamic-range-limit: revertLayer; dynamic-range-limit: unset;

See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Simulator.

In order for the effect of the value change to be visible, you need to use a screen capable of displaying brightness values higher than white (#FFFFFF).