tags: #frontend #design #hardware #engineering
As developers and UI designers, we’ve been trained to think of color in a very specific, limited way: rgb(255, 255, 255) or #FFFFFF.
For decades, we’ve lived in an 8-bit color world. But display technology has fundamentally shifted. High Dynamic Range (HDR) isn't just a marketing buzzword for Best Buy TVs—it represents a massive increase in the volume of data processed per pixel.
If you're designing web apps, rendering 3D graphics, or building digital signage, here is the engineering breakdown of SDR vs. HDR and why your #FFFFFF isn't as white as you think.
The SDR Legacy: The 8-Bit Math
SDR (Standard Dynamic Range) is built on the Rec. 709 color space, a standard created in the era of CRT monitors.
In the SDR world, color depth is typically 8-bit.
Mathematically, that gives us $2^8$ (256) levels for each RGB channel.
256 x 256 x 256 = 16.7 million colors.
16.7 million sounds like a lot, until you try to render a smooth gradient of a sunset or a dark shadow. Because of the limited data steps, the math rounds off, resulting in the dreaded color banding (those ugly visible lines in gradients). Furthermore, SDR was mastered for a peak brightness of around 100 nits.
The HDR Revolution: More Data, Wider Gamut
HDR fixes this by increasing the data payload in two specific ways: Bit-depth and Metadata.
1. 10-Bit and 12-Bit Color Depth
HDR formats (like HDR10 and Dolby Vision) upgrade the color math to 10-bit or 12-bit.
- 10-bit: 1,024 levels per channel = 1.07 billion colors.
- 12-bit: 4,096 levels per channel = 68.7 billion colors.
This extra data eliminates color banding entirely, allowing for perfectly smooth transitions. It also expands the color gamut to DCI-P3 or Rec. 2020, unlocking colors (like deep neon greens and intense reds) that are mathematically impossible to represent in standard 8-bit sRGB.
2. The Power of Metadata
SDR sends a static image to the screen. HDR sends the image plus metadata.
Formats like Dolby Vision use dynamic metadata, meaning the video file is constantly communicating with the display's hardware controller, telling it exactly how to adjust the brightness and contrast curve frame-by-frame.
Why Frontend Devs and Designers Need to Care
If you think HDR is just for Netflix, think again. Modern browsers now support CSS Color Module Level 4, which introduces wide-gamut color spaces.
You can now write CSS like this:
css
.neon-button {
background-color: color(display-p3 1 0 0); /* A red impossible in SDR */
}
Top comments (0)