Live demo: https://static.andrewe.dev/hdr-glow/
HDR asset: https://static.andrewe.dev/hdr-glow/hdr-glow.avif
This demo compares two white colors. The PQ-encoded HDR image uses color(rec2100-pq .75 .75 .75). The page background uses reference white, color(srgb 1 1 1). On a compatible HDR display and browser, the image is significantly brighter than the page background.
Digital Color Meter measured the output on an Apple HDR display. It measured the image as linear EDR 1.6 1.6 1.6. It measured the page background as 1 1 1. These values give a relative comparison. They do not specify portable CSS colors. A different display or brightness setting can give different values.
The card uses the HDR AVIF as its CSS background-image. CSS does not produce the HDR headroom. The HDR AVIF supplies the headroom. SDR hardware and non-HDR browsers map the image t