HDR QR Code
Here’s an HDR QR Code. If you’re viewing this on an Apple device’s built-in display, it should work. If the big QR code is brighter than the smaller one, it works.
for reference
For the example to work, your platform, your browser, and your display must support displaying HDR content. Also, low-power mode must be turned off. These setups have been tested to work:
- iPad Pro (M2), built-in display
- iPhone 13, built-in display
- MacBook Pro (M1), built-in display
On a recent iPhone/iPad device, it appears to be roughly ~7 times brighter1.
How it works
It works by displaying a color whose brightness is way outside the standard range of sRGB color space.
Unfortunately, this color cannot be represented with CSS colors (rgb(999,999,999) doesn’t work) or any of the widely-supported image formats. However, an HDR video can represent this color.
Therefore, the QR code you see above is actually a <video> containing very bright white pixels with a QR code overlaid on top.
See: https://github.com/dtinth/superwhite
Footnotes
This is probably a flawed way to measure it, but I get this number by using a camera to take a photo of the screen. I set the ISO setting to be very low, so both QR codes appear as a shade of gray. I then compared the brightness of the two QR codes to obtain the ratio. ↩