2c:null 2d:["$","title",null,{"children":"Exploiting Chrome bug to render HDR colors | Dima Semyushkin | Observable"}] 32:T4c6,ardov = html`

`33:[] 30:{"id":"9ec0a0159c5dd3b5","slug":"hdr","title":"Exploiting Chrome bug to render HDR colors","thumbnail":"123aacb39871d7194f67086c3b5d9518808d6691566bc09ff131dc88bf13ed09","access_level":"public","create_time":"$D2024-07-02T11:34:47.294Z","update_time":"$D2026-04-23T14:44:19.964Z","view_time":null,"first_public_time":"$D2024-07-05T13:39:38.335Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ded319231053db62","login":"devgru","name":"Dima Semyushkin","avatar_url":"https://avatars-next.observableusercontent.com/c2a120ed0273356add816ce463c4daa2d09feb1dbcb31c085f8d0fb309c144d4","tier":"starter_2024"},"version":426,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0712d35a76eb95d4","login":"devgru","name":"Dima Semyushkin","avatar_url":"https://avatars-next.observableusercontent.com/c2a120ed0273356add816ce463c4daa2d09feb1dbcb31c085f8d0fb309c144d4","tier":null}],"members":[{"type":"individual","id":"0712d35a76eb95d4","login":"devgru","name":"Dima Semyushkin","avatar_url":"https://avatars-next.observableusercontent.com/c2a120ed0273356add816ce463c4daa2d09feb1dbcb31c085f8d0fb309c144d4","tier":null,"role":"editor"},{"type":"team","id":"ded319231053db62","login":"devgru","name":"Dima Semyushkin","avatar_url":"https://avatars-next.observableusercontent.com/c2a120ed0273356add816ce463c4daa2d09feb1dbcb31c085f8d0fb309c144d4","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"0494462d423fe408","slug":"wide-gamut-color-spaces","title":"Exploring wide-gamut color spaces","owner":{"id":"ded319231053db62","login":"devgru","name":"Dima Semyushkin"}},"type":"notebook","body":{"title":"Exploiting Chrome bug to render HDR colors","cells":[{"id":0,"value":"# Exploiting Chrome bug to render HDR colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"As [Alexey Ardov](https://ardov.me/) have [shown](https://hdr.ardov.me/) in September 2023, it is possible to trick Chrome into displaying HDR colors using [color()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color) notation. Original source is available [here](https://github.com/ardov/hdr-web).\n\nThis trick won't work in Safari, Firefox and other browsers that don't use [Blink](https://www.chromium.org/blink/).\n\nTo trick a browser we need a 1×1 HLG JPEG image:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"ardov","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"## sRGB colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":368,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":369,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":370,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":372,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":373,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":374,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":351,"value":"## Display P3 colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":352,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":353,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":355,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":356,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":357,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":358,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"## Out of gamut colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":238,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":245,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":251,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":259,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":263,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":142,"value":"## Ways to exploit the bug","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"### using HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"### using SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"### using Canvas (no luck here yet)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"{\n const canvas = html`