After White
How to use HDR brightness in design
HDR extends the luminance range, giving designers another parameter to work with alongside shape, color, and size.
In an ordinary SDR image, white is the upper limit of luminance. In HDR, familiar colors can reach well beyond that level.
White can be brighter than white.
The shape, chromaticity, and background stay the same. 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.
SDR · matching whites
HDR · white and white +2 stops
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. [7]
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.
1% of the example area812 nits
10% of the example area812 nits
100% of the example area812 nits
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. [4]
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.
What happens after export
The exported file is not yet the image the viewer will see. Several stages connect the two:
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.
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.
Think of HDR as another space to design in. What in your project belongs beyond ordinary white?
Try it in your own design
HDR is easier to assess in your own work than through a description. An Instagram post or a LinkedIn company-page logo can be a starting point. Check whether HDR survives the upload in the intended app; support is not guaranteed for every placement.
Tools for preparing these examples include SMMAI for HDR banners intended for Instagram, and HDRLOGO for HDR versions of logos intended for LinkedIn company pages.
Technical notes
Where HDR can be viewed
Additional luminance can be seen on smartphones, tablets, laptops, and external monitors with HDR displays. Examples include iPhone 17, iPad Pro with Ultra Retina XDR and MacBook Pro with Liquid Retina XDR. These are examples of suitable displays, not a complete list of compatible devices.
The display alone is not enough: the app or browser must support HDR images in the required format. Safari introduced this support in version 26. Ultra HDR on Android requires Android 14 or later, an HDR display, and support in the app. HDR video support alone does not guarantee HDR image support.
The publishing platform matters too: it may preserve HDR or convert the image to the ordinary range. Check the particular placement, such as a post or page logo, in the app your audience will use. Files can be prepared and compared in HDRLOGO.
Device price does not determine the result. Consider the display, viewing software, and available headroom. Some viewers will see the additional light accent; others will see an ordinary rendition.
Support information checked September 8, 2026. Capabilities depend on the device model, operating system, app version, and file format.
Measured example: OLED area and luminance
This relationship can have a knee. In TFTCentral’s LG 42C2 test, small white windows reached about 717 nits in the standard HDR mode, up to 10% of the screen area. Larger windows produced lower luminance. The transition depends on the panel and operating mode. [3]
Color model and calculations
This illustrative model uses independent sRGB channels and an arbitrarily chosen white ceiling of 1,149 nits. That value sets the scale of the example; it is not a device measurement. The limits below are model outputs, not measured limits of your display.
Almost the same starting luminance
Gray 44 nits
Red 43 nits
Equal luminance does not mean equal appearance. Starting values are calculated from linear sRGB.
Different room for amplification
With channel ratios preserved, gray’s limit is 4.7 times higher. Both bars use the same linear scale.
Multiplying red by four gives about 173 nits in this model: 203 × 4 × 0.212639…. It remains below reference white. Further amplification with channel ratios preserved eventually reaches a limit of about 244 nits.
Beyond that point, one condition must change. You can lower the target, change the color, or move the light accent to another part of the mark. Adding white brings the other channels into use but changes chromaticity.
For a target of 406 nits and a model peak of 1,149 nits, red needs about 18% white in a linear-light mixture. Converted back to sRGB, the result is #FF7575. These are linear RGB proportions, not the opacity of a white layer in an arbitrary editor.
A brand palette therefore comes before a luminance scale. A neutral detail can carry additional light while the main brand color stays unchanged. Real panels still need to be checked: different primaries and subpixel structures produce different color volumes.
For each 8-bit sRGB channel, v = code / 255. Decode it to linear light before calculating luminance:
lin(v) = v / 12.92 if v ≤ 0.04045 lin(v) = ((v + 0.055) / 1.055)^2.4 otherwise Y = (87098 / 409605) × R + (175762 / 245763) × G + (12673 / 175545) × B M = max(R, G, B) Starting luminance = 203 × Y Model limit = P × Y / M Loss in stops = log2(M / Y) P = 1149 nits
The limit requires M > 0; the loss requires Y > 0. The coefficients come from the sRGB-to-XYZ matrix in CSS Color 4 and sum to 1. For black, this loss is undefined: multiplication leaves zero at zero. “Loss” means the difference between the white ceiling and the selected color’s ceiling, in stops. The model does not establish a universal limit for displays or Rec.2020.
For the white-mixture example, use normalized luminance weights and M = 1. The required white fraction is a = (T/P − Y) / (1 − Y), where T = 406 and P = 1149. The linear RGB mixture is (1 − a)C + a(1,1,1).
PQ encoding and the five levels
At 203 nits, the normalized PQ code is approximately 0.580689. In a full-range 16-bit channel, this is 38055. At 406 nits it is 42871; at 812 nits, 47785. Doubling light output does not double the code.
One option for transparency is a 16-bit RGBA PNG with PQ. The cICP values 9/16/0/1 identify Rec.2020 primaries, PQ, RGB, and full range. Alpha specifies opacity and is not PQ-encoded. PNG stores color components without premultiplying them by alpha. [6]
PQ relates code values to reference light levels. These examples use the full range rather than limited-range video codes. Apply the function separately to the linear RGB components; the article’s files use Rec.2020 primaries. A colored pixel’s luminance is calculated from all three decoded components. Signal values are not screen measurements. [1]
m1 = 2610 / 16384 m2 = 2523 / 32 c1 = 3424 / 4096 c2 = 2413 / 128 c3 = 2392 / 128 Y = L / 10000 q = ((c1 + c2 × Y^m1) / (1 + c3 × Y^m1))^m2 code16 = floor(65535 × q + 0.5) t = q^(1/m2) L = 10000 × (max(t - c1, 0) / (c2 - c3 × t))^(1/m1) Level Stops Reference nits 16-bit code L0 0.00 203 38055 L1 0.50 287.085353… 40448 L2 1.00 406 42871 L3 1.50 574.170706… 45319 L4 2.00 812 47785
These formulas use 0 ≤ L ≤ 10,000 and 0 ≤ q ≤ 1. Here Y is normalized to 10,000 nits, not the relative sRGB luminance used in the color model. Calculations use exact half-stop values; displayed nit values are rounded.
How a gain map restores range
gmin, gmax, hmin, and hmax are in stops (log₂); H is a linear ratio. SDR and HDR in the formula are linear components in the same color space. The lime map is explanatory: the browser displays a precomputed result rather than performing this reconstruction for the diagram.
For the SDR-base scheme in the public Ultra HDR specification, one linear channel is reconstructed as follows:
r = (map8 / 255)^(1 / gamma) g = gmin × (1 - r) + gmax × r w = clamp((log2(H) - hmin) / (hmax - hmin), 0, 1) HDR = (SDR + offsetSDR) × 2^(g × w) - offsetHDR
H > 0 is the ratio of available peak white to SDR white, supplied by the display system. This scheme requires gamma > 0, gmax ≥ gmin, nonnegative offsets, hmin ≥ 0, and hmax > hmin. After decoding, map8 is in the range 0–255; if the map has a different resolution, its value is obtained through filtered sampling. [4] Other base renditions and metadata profiles require their own rules.
With a maximum gain of two stops, zero offsets, and application bounds of zero to two stops, a base channel of 0.2 at the map’s maximum becomes 0.4 at 2× headroom and 0.8 at 4× headroom.
Accessibility
Comfort, attention, and prolonged use require their own evidence. This article does not establish a universally comfortable luminance level for a static HDR accent.
Important information should remain understandable without additional luminance. On your own site or in an app, give viewers a way to turn HDR off while preserving content and legibility.
Assess comfort under real viewing conditions, considering the bright area’s size, viewing duration, display brightness, and ambient light. File values alone do not establish viewing comfort.
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.
- 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.