HDR QR Code | notes.dt.in.th

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
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

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 alpha mask applied via CSS.

See: https://github.com/dtinth/superwhite (opens new window)


Source link