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.

normal qr code

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 brighter (opens new window).

# 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 containing very bright white pixels with a QR code alpha mask applied via CSS.

See: (opens new window)

Read More