2d:null 2e:["$","title",null,{"children":"Computing an opposite color | Dima Semyushkin | Observable"}] 33:[] 31:{"id":"c244c45b763eb5e4","slug":"computing-an-opposite-color","title":"Computing an opposite color","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-08-08T21:50:46.748Z","update_time":"$D2024-12-26T23:20:30.215Z","view_time":null,"first_public_time":"$D2024-08-09T08:20:03.187Z","has_unpublished_edits":null,"fork":true,"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":572,"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":"1606567962946970","slug":"color-picking-compass-examples","title":"Color Picking Compass Examples","owner":{"id":"ded319231053db62","login":"devgru","name":"Dima Semyushkin"}},"type":"notebook","body":{"title":"Computing an opposite color","cells":[{"id":0,"value":"# Computing an opposite color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":385,"value":"itpDisclaimer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"Computing a color, opposite to a picked one, is trivial in cube-based color representation formats (sRGB, Display P3) and is a bit more tricky in perceptual color models.\n\nColor Picking Compass provides a function that does just that.\n\nThis notebook explains how it works. We use [ICtCp](https://observablehq.com/@devgru/ictcp) color model, but you're free to use others, e.g. [Oklch](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"First, let's pick a color:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"viewof color = colorPicker({ r: 0.75, g: 1, b: 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"Just for the demonstration, here's how we compute an opposite color in RGB cube:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":323,"value":"oppositeCubeColor = ({\n mode: color.mode,\n r: 1 - color.r,\n g: 1 - color.g,\n b: 1 - color.b\n})","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"p3Swatch(oppositeCubeColor)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"colorSpace3D({\n dragRotateGroup: \"rgb\",\n mapper: colorToRotatedP3Point,\n layers: [\n { colors: cg.p3Grid(1 / 8), stroke: 3 },\n { colors: [color, oppositeCubeColor], stroke: 10 },\n {\n colors: cpc\n .cartesianColorScale([color, oppositeCubeColor])\n .consume(diff, 2),\n stroke: 3\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"But let's move on with perceptual color models.\n\nFor a start, we define an 'origin' grayscale point to define an opposite color:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":117,"value":"viewof originName = Inputs.radio(\n new Map([\n [\"Oklab 50% (RGB 38.9%)\", \"OKLAB_ORIGIN\"],\n [\"Lab 50% (RGB 46.6%)\", \"LAB_ORIGIN\"],\n [\"RGB 50%\", \"RGB_ORIGIN\"]\n ]),\n { label: \"Origin\", value: \"RGB_ORIGIN\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"p3Swatch(origin)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"With Color Picking Compass, that's all the input we need. We convert colors to a desired color representation using [Culori](https://culorijs.org/) and provide a function that will verify whether color is in gamut:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":361,"value":"cpcResult = cpc.findOppositeColor(\n culori.itp(color),\n culori.itp(origin),\n inGamut(culori.inGamut(color.mode))\n)","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"The opposite color is ${p3Swatch(cpcResult)}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":405,"value":"And we can illustrate its position in a color solid like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":370,"value":"colorSpace3D({\n mapper: colorToCompressedItpPoint,\n layers: [\n {\n colors: gamutStretchedScale.consumeWithNaturalMetric(diff, 2),\n stroke: 3\n },\n { colors: cg.p3Grid(1 / 8), stroke: 2 },\n { colors: [color, origin, result], stroke: 10 }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"## Algorithm implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":141,"value":"Having the picked color ${p3Swatch(color)} and origin color ${p3Swatch(origin)} we are able to define a color scale stretching between them:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":210,"value":"scale = cpc.cartesianColorScale([culori.itp(color), culori.itp(origin)])","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"ramp(scale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"colorSpace3D({\n mapper: colorToCompressedItpPoint,\n lookAtPlane: [...scale.consumeWithNaturalMetric(diff, 10), \"black\"],\n layers: [\n { colors: scale.consumeWithNaturalMetric(diff, 2), stroke: 3 },\n { colors: cg.p3Grid(1 / 8), stroke: 2 },\n { colors: [color, origin], stroke: 10 }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"We 'stretch' the color scale until it reaches gamut edges:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"gamutStretchedScale = scale.stretch(inGamut(culori.inGamut(color.mode)))","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"ramp(gamutStretchedScale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"colorSpace3D({\n mapper: colorToCompressedItpPoint,\n layers: [\n { colors: gamutStretchedScale.consumeWithNaturalMetric(diff, 2), stroke: 3 },\n { colors: cg.p3Grid(1 / 8), stroke: 2 },\n { colors: [color, origin], stroke: 10 }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"With the stretched scale we can compute the position of the picked color in the relation to the edge and the origin:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":486,"value":"edge = gamutStretchedScale(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"Then we create a new scale between the edge and the origin:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":489,"value":"edgeToOrigin = cpc.cartesianColorScale([edge, culori.itp(origin)])","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"ramp(edgeToOrigin)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"We call `invert` on the scale to find the position of the picked color in the relation to the edge and the origin.\n\nIt will be equal to 0 for colors maximum saturation (any of R, G, B components equals to 0 or 1), but will start changing for less saturated colors.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":494,"value":"closestPointOnScale = edgeToOrigin.invert(culori.itp(color))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"To compute the opposite color, we need to find the color with the similar offset from the edge:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":499,"value":"oppositeEdge = gamutStretchedScale(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"We create another scale between the opposite edge and the origin:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":501,"value":"oppositeEdgeToOrigin = cpc.cartesianColorScale([\n oppositeEdge,\n culori.itp(origin)\n])","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"ramp(oppositeEdgeToOrigin)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"Finally, we compute a color that is offset from the opposite gamut boundary by the same amount as the defined color.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":504,"value":"result = oppositeEdgeToOrigin(closestPointOnScale)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"p3Swatch(result)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"Just for the illustration, let's compare it to RGB cube opposite:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"colorSpace3D({\n mapper: colorToCompressedItpPoint,\n layers: [\n {\n colors: gamutStretchedScale.consumeWithNaturalMetric(diff, 2),\n stroke: 3\n },\n { colors: cg.p3Grid(1 / 8), stroke: 2 },\n { colors: [color, origin, result, oppositeCubeColor], stroke: 10 }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"[Delta E](https://observablehq.com/@devgru/itp-3d?collection=@devgru/itp-and-deltae-itp) between Color Picking Compass result ${p3Swatch(cpcResult)} and RGB cube opposite ${p3Swatch(oppositeCubeColor)} is ${Math.round(diff(cpcResult, oppositeCubeColor))} and Delta E between picked color ${p3Swatch(color)} and computed color ${p3Swatch(cpcResult)} is ${Math.round(diff(color, cpcResult))}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"## RGB cube vertices\n\nApplying this algorithm to every vertex of RGB cube results in a following set of opposite colors:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"\n\n \n \n \n \n \n \n \n \n ${cg.rgbCubeVerticesArray.map(vertex => {\n const sRgbResult = findOppositeColor(vertex, sRgbGamut);\n\n return htl.html`\n \n \n \n `\n })}\n \n

sRGB	opposite	ΔEITP
		${sRgbResult.deltaE}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":155,"value":"Applying it again to wide-gamut colors increases available delta values:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"\n\n \n \n \n \n \n \n \n \n ${cg.rgbCubeVerticesArray.map(vertex => {\n const p3Result = findOppositeColor(vertex, p3Gamut);\n\n return htl.html`\n \n \n \n `\n })}\n \n

Display P3	opposite	ΔEITP
		${p3Result.deltaE}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":479,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"sRgbGamut = ({\n name: \"sRGB\",\n cssGamut: \"srgb\",\n fitsGamut: culori.displayable\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"p3Gamut = ({\n name: \"Display-P3\",\n cssGamut: \"display-p3\",\n fitsGamut: culori.inGamut(\"p3\")\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"diff = culori.differenceItp()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"formatHexOrCss = (color) =>\n culori.displayable(color) ? culori.formatHex(color) : culori.formatCss(color)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"findOppositeColor = (vertex, { cssGamut, fitsGamut }) => {\n const color = culori.parse(vertex.toCssString(cssGamut));\n const oppositeColor = culori.p3(\n cpc.findOppositeColor(\n culori.itp(color),\n culori.itp(origin),\n (color) =>\n diff(culori.itp(culori.xyz65(color)), color) < 0.0001 && fitsGamut(color)\n )\n );\n\n return { oppositeColor, deltaE: Math.round(diff(color, oppositeColor)) };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"inGamut = (fitsGamut) => (color) =>\n diff(culori.itp(culori.xyz65(color)), color) < 0.0001 && fitsGamut(color)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"origin = cpc[originName]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"color && origin && dragRotateGroups.clear()","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"culori = import(\"culori@4\")","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"import { ramp, p3Swatch } from \"@devgru/color-scale-utils\"","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"import { cg } from \"@devgru/cg-latest\"","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import { cpc } from \"@devgru/cpc-latest\"","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"import { colorPicker } from \"@devgru/color-picker\"","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"import {\n colorSpace3D,\n colorToCompressedItpPoint,\n colorToRotatedP3Point,\n dragRotateGroups\n} from \"@devgru/color-space-3d\"","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"import { itpDisclaimer } from \"@devgru/ictcp\"","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"