2d:null 2e:["$","title",null,{"children":"Color distance between wide-gamut and sRGB colors: ΔE2000 vs ΔEITP | Dima Semyushkin | Observable"}] 33:[{"id":"751ae0ca3726263a1751885c5c913ba9b4201e09f147a80b23bf60971f2c3dce031442208b597d26859770b59c029a7301712161b4503e41d3289228405dce21","href":"https://static.observableusercontent.com/files/751ae0ca3726263a1751885c5c913ba9b4201e09f147a80b23bf60971f2c3dce031442208b597d26859770b59c029a7301712161b4503e41d3289228405dce21","name":"CrashNumberingGothic.ttf","type":"font/ttf","lastModified":1703879919514.622,"size":12860}] 31:{"id":"14134fb97114e562","slug":"wide-deltae","title":"Color distance between wide-gamut and sRGB colors: ΔE2000 vs ΔEITP","thumbnail":"9738ed6ded3646906308b2a1c214507a959a894fe80d8eda5d88790858cc7c81","access_level":"public","create_time":"$D2023-12-29T19:58:39.514Z","update_time":"$D2024-08-07T11:44:01.723Z","view_time":null,"first_public_time":"$D2023-12-29T19:58:39.514Z","has_unpublished_edits":null,"fork":{"id":"875b33d4a2cb4c68","slug":"wide-zdog","title":"Displaying wide-gamut сolors with Zdog","owner":{"id":"ded319231053db62","login":"devgru","name":"Dima Semyushkin"}},"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":653,"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":"0494462d423fe408","slug":"wide-gamut-color-spaces","title":"Exploring wide-gamut color spaces","owner":{"id":"ded319231053db62","login":"devgru","name":"Dima Semyushkin"}},"type":"notebook","body":{"title":"Color distance between wide-gamut and sRGB colors: ΔE2000 vs ΔEITP","cells":[{"id":0,"value":"# Color distance between wide-gamut and sRGB colors: ΔE2000 vs ΔEITP\n\nThis table iterates on RGB cube vertices and compares ΔE values for each pair of colors: sRGB and Display P3.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":456,"value":"\n\n \n \n \n \n \n \n \n \n \n \n ${cg.rgbCubeVerticesArray.map(vertex => {\n const srgb = vertex.toCssString('srgb');\n const p3 = vertex.toCssString('display-p3');\n const deltaE2000Value = deltaE2000(srgb, p3).toFixed(2);\n const deltaEItpValue = deltaEItp(srgb, p3).toFixed(2);\n const deltaEItpComparableValue = deltaEItpComparable(srgb, p3).toFixed(2);\n\n return htl.html`\n \n \n \n \n \n `\n })}\n \n

sRGB	Display P3	ΔE2000	ΔEITP / 3	ΔEITP
		${deltaE2000Value}	${deltaEItpComparableValue}	${deltaEItpValue}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":629,"value":"Please note that ΔE2000 is not to be directly compared with ΔEITP. To get comparable values for ΔEITP we divide ΔEITP value by 3. The coefficient is described in [a short article](https://www.portrait.com/resource-center/ictcp-color-difference-metric/).\n\nΔE values for yellow and magenta pairs are nearly equal but on my display (MBP 16\" 2023) sRGB and Display P3 yellow look pretty much the same while magenta versions are obviously different.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":389,"value":"deltaEItp = culori.differenceItp()","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"deltaE2000 = culori.differenceCiede2000()","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"deltaEItpComparable = (c1, c2) => deltaEItp(c1, c2) / 3","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":497,"value":"culori = import(\"culori@4\")","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"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"