How to use HDR in digital design

HDR extends the luminance range, giving designers another parameter to work with alongside shape, color, and size.

HDR display required to see the examples below

When I started testing HDR in design, I thought the difficult part would be getting the HDR effect to work technically. But getting predictable results turned out to be much harder: different colors behave differently, displays have different limits, and platforms can alter HDR after upload.

In this article, I’ve collected what I learned from these tests, with real HDR examples you can see directly on the page.

White can be brighter than white.

Only luminance changes.

A comparison needs a shared white level. These examples use 203 nits: doubling it gives 406 nits; multiplying it by four gives 812 nits.

One color. Different light levels.

Within a mark, light can distinguish elements that share a color in the ordinary version. Here, both parts are white. In HDR, one stays at reference white while the other becomes brighter.

Both parts of the mark are encoded in one image. One white part is set to 203 nits, the other to 812 nits.

Ordinary and fluorescent ink: an analogy for SDR and HDR

In print, ordinary and fluorescent inks can produce similar hues, yet the results differ: fluorescence cannot be reproduced by ordinary CMYK ink.

HDR offers a related distinction. An ordinary digital version can preserve an image’s color and shape without retaining its additional HDR luminance. The same design may therefore need a different execution for each medium.

A palette of light levels

One stop doubles luminance. With HDR Reference White at 203 nits, +1 stop corresponds to 406 nits and +2 stops to 812 nits.

For design, it helps to turn a continuous range into a small palette of light levels. This example runs from ordinary white to +2 stops in half-stop increments. If the encoded levels exceed the display’s available range, the differences between them may shrink.

A nit is a unit of luminance: 1 nit = 1 cd/m². 203 nits is the recommended nominal HDR Reference White level for PQ and serves as the reference in these examples.

A display has a maximum luminance. The range available above white is called headroom. Less headroom leaves less room for elements brighter than ordinary white.

Each color has its own luminance range

Applying the same gain to different colors does not make them equally bright. Red in this palette starts below lime and pale blue. Doubling each color’s luminance raises all three, but their values remain different.

Each color appears at three levels: no gain, +1 stop, and +2 stops. The first column is SDR; the next two are HDR. The numbers are calculated using a reference white of 203 nits.

Red starts at about 43 nits and reaches 173 nits at +2 stops, still below reference white at 203 nits. Pale blue starts at 115 nits and reaches 462 nits with the same gain, taking it above white.

There is a limit to raising luminance while preserving a color’s chromaticity. Beyond it, one option is to stop increasing the level; another is to reduce saturation and move toward white. The notes include an illustrative calculation.

What happens to HDR color in the ordinary range

If the PQ code for reference white is mistakenly read as ordinary sRGB, 0.580689 becomes #949494. What was encoded as white in PQ is interpreted as gray. This is an encoding error, not a limitation of HDR.

Channel clipping is a different operation. Decode sRGB correctly, double its linear values, and limit each channel to 1. Pure red remains red: its only nonzero channel reaches the maximum. Orange shifts toward yellow because red has reached the limit while green continues to rise.

Brightness depends on the whole image

The same HDR code can produce different physical luminance depending on area and surrounding content. On OLED displays, large bright regions increase electrical and thermal load, so the display may automatically reduce luminance.

Evaluate HDR in the finished layout as well as in individual elements.

How an image stores HDR

To display correctly in HDR, a file must contain color and luminance data and tell the system how to interpret them. If the values and their description disagree, the resulting color or brightness may differ from the intended image.

There are two main approaches to storing HDR. One encodes the extended range directly in pixel values. The other stores a base image with an additional gain map.

HDR in pixel values

With PQ encoding, the ST 2084 transfer function relates each code value to a reference light level. Color-encoding information, such as primaries and transfer characteristics, tells the decoder how to read those values.

Pixel numbers alone do not define a color. Declaring unchanged sRGB values to be Rec.2020 values changes the colors. A proper conversion recalculates the values to preserve the original colors.

The same applies to luminance: an HDR tag alone does not make an image brighter. In a PQ image, additional luminance must be encoded in the signal values, and the encoding information must match them.

HDR with a gain map

Another approach stores a base image with a gain map. When the base is SDR, an ordinary decoder can display it directly. An HDR-compatible decoder also uses the gain map to reconstruct an image with an extended dynamic range.

A gain map describes where and by how much to adjust the base image. Metadata defines its gain range, gamma, and offsets. The map can have a lower resolution than the base and may contain one or several channels.

Beyond the image file

HDR can also be defined outside an image file. The CSS Color HDR draft describes a way to specify colors that adapt to a display’s available headroom. For designers, this means defining in advance how a color should look at different levels of headroom. The standard is still evolving, so support needs to be checked in each browser.

For graphic design and branding, this opens up the possibility of defining the light qualities of a mark, text, or composition directly as it is created with web tools. Work on HDR spans both CSS and browser drawing tools. Over time, light could become another property of graphics alongside shape and color.

What happens after export

The exported file is not yet the image the viewer will see. Several stages connect the two:

Author → Export → Platform → Decoder → Rendering → System → Display

A platform may resize or recompress an image, convert its format, or create its own renditions. The decoder and system interpret the resulting data, and the display’s capabilities determine the luminance range it can reproduce.

Check both the original file and the version the platform actually serves. Preserved HDR metadata alone does not establish that the original HDR data survived processing.

A screenshot does not measure display luminance either. It records the output of the capture system, not the amount of light physically emitted by the screen. File integrity and actual display output require separate checks.

Use light to emphasize what matters

HDR does not need to make the entire image brighter. Additional luminance can be concentrated where it supports the visual idea: a highlight, a reflection, an edge, or a bright region of a photograph.

Define that accent as a rule: which element becomes brighter, relative to which level, and by how much. The same principle can then carry through different compositions and formats.

Check how the composition changes as the available headroom decreases. The accent may become weaker, and similar light levels may become harder to distinguish. The design should also remain clear if a platform or viewer limits HDR or turns it off.

Keep the rule separate from export settings. If a platform’s requirements change, the file can be rebuilt without reconstructing the original intent from a finished image.

One treatment across different media

The same visual accent can carry across media. HDR uses additional luminance; an ordinary digital version uses color or contrast; print uses special ink or another finish. The means change while the accent’s role remains intact.

Do not transfer numbers directly between media: HDR stops have no direct equivalent in inks or materials. Each medium needs an execution that preserves the role of the intended accent.

Additional light can become as recognizable a part of a design as color, shape, or typography.

I invite you to see HDR not as a technical effect, but as a new space for design. What in your project should cross that boundary?

Accessibility and comfort

HDR should enhance a design, not carry information that disappears without it. Important content should remain clear and readable even when the additional brightness is not visible.

If you control the website or app, give people a way to turn HDR off without losing content or legibility.

Comfort also depends on more than the luminance value itself. The size of the bright area, how long it stays on screen, display brightness, and ambient light all matter. There is no single luminance level that can be considered comfortable in every situation, so test HDR under real viewing conditions.

Try it in your own design

HDR is easier to evaluate in your own design than through a description. Start with something simple, like an Instagram post or a LinkedIn company-page logo. Apply it to one element, compare it with the SDR version, and see what the extra brightness adds to the design.

Sources

W3C, CSS Color HDR. Reference white, PQ, and HDR headroom. Working Draft, July 28, 2026.

W3C, CSS Color 4. Color-conversion formulas used in the calculated examples.

TFTCentral, LG OLED 42C2. OLED luminance measurements at different white-window areas.

Google, Ultra HDR image format. Gain-map structure and reconstruction of HDR from an SDR base.

WebKit, Safari 26. HDR image support in Safari 26. CSS range limits: standard and no-limit.

W3C, PNG Third Edition. How PNG signals color space and HDR encoding.

DayGlo, Graphic Arts. Fluorescent printing pigments and how their light response differs from conventional inks.

WebKit, Safari 27. Improvements to gain-map processing and fixes to HDR rendering. September 17, 2026.

CSS Working Group, CSS Color HDR. Draft standard covering range controls and HDR colors that adapt to available headroom. Reviewed September 19, 2026. Browser support for these features may not yet be available.

ColorWeb CG, HDR on the web, the big picture. Directions for HDR in CSS and browser drawing tools. A community working document, not a standard or a list of supported browser features.

How to use HDR in digital design was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.