2d:null 2e:["$","title",null,{"children":"Remapping wide-gamut colors | Dima Semyushkin | Observable"}] 33:[] 31:{"id":"6f1d10d2fd4fb6cd","slug":"remapping-wide-gamut-colors","title":"Remapping wide-gamut colors","thumbnail":"f08a16556eaf3f877702c24cb8c59764db01eb2e6f580f997ba97b8e1d9aff6d","access_level":"public","create_time":"$D2024-01-18T10:50:44.590Z","update_time":"$D2024-09-12T21:06:40.900Z","view_time":null,"first_public_time":"$D2024-01-18T10:50:44.590Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ded319231053db62","login":"devgru","name":"Dima Semyushkin","avatar_url":"https://avatars-next.observableusercontent.com/c2a120ed0273356add816ce463c4daa2d09feb1dbcb31c085f8d0fb309c144d4","tier":"starter_2024"},"version":264,"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"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"1e538aa8316fb8af","slug":"utils-for-color-spaces","title":"Utils for color spaces visualization","owner":{"id":"ded319231053db62","login":"devgru","name":"Dima Semyushkin"}},"type":"notebook","body":{"title":"Remapping wide-gamut colors","cells":[{"id":0,"value":"# Remapping wide-gamut colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"While support for wide-gamut colors is wide nowadays, we still have browsers and other environments that don't support them.\n\nFor example, while on some setups you will see the difference between sRGB red and Display-P3, in other cases these two would render as the same color:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":239,"value":"

Display P3 red

${culori.formatHex(sRgbRed)} sRGB red

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"For illustrative purposes, to show a difference between Display P3 and sRGB we might imitate the effect of wide-gamut color in comparison to sRGB.\n\nTo achieve this we perform a simple trick: map each color, represented in Display P3 coordinates, into similar coordinates in sRGB. Both color spaces are represented as cubes and mapping is trivial.\n\nThis approach guarantees that each color is inside sRGB gamut and could be displayed on any modern display.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"dullRgb = (color) => ({\n ...culori.p3(color),\n mode: \"rgb\"\n})","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"Let's apply this function to red:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"

Display P3 red

${culori.formatHex(sRgbRed)} sRGB red

${culori.formatHex(dullRgbRed)} dull RGB red

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"We may iterate on this idea further and see what happens if we keep making colors duller and duller:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"

Display P3 red

${culori.formatHex(sRgbRed)} sRGB red

${culori.formatHex(dullRgbRed)} dull¹ RGB red

${culori.formatHex(dull2RgbRed)} dull² RGB red

${culori.formatHex(dull3RgbRed)} dull³ RGB red

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"10 applications of `dullRgb` lead us to a muted palette:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":200,"value":"table(10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"And applying `dullRgb` 50 times washes all the colors away:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"table(50)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"Apart from my initial idea on adapting color spaces for visualization on sRGB-clamped displays, you can e.g. use this approach","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"p3Red = culori.p3({ r: 1, g: 0, b: 0 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"sRgbRed = culori.rgb({ r: 1, g: 0, b: 0 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"dullRgbRed = dullRgb(sRgbRed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"dull2RgbRed = dullRgb(dullRgbRed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"dull3RgbRed = dullRgb(dull2RgbRed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"dull4RgbRed = dullRgb(dull3RgbRed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"dull5RgbRed = dullRgb(dull4RgbRed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"colors = {\n const map = cg.rgbCubeVerticesMap;\n return [\n map.get(\"red\"),\n map.get(\"yellow\"),\n map.get(\"green\"),\n map.get(\"cyan\"),\n map.get(\"blue\"),\n map.get(\"magenta\")\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"table = (count) => html`\n \n ${colors.map(\n (vertex) =>\n html`\n ${row(vertex, count)}\n `\n )}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"row = (vertex, steps) => {\n const line = [];\n let color = { mode: \"p3\", ...vertex };\n\n for (let i = 0; i <= steps; i++) {\n line.push(\n htl.html` `\n );\n color = dullRgb(color);\n }\n return line;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"culori = import(\"culori@4\")","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"import { cg } from \"@devgru/cg-latest\"","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"