2b:null 2c:["$","title",null,{"children":"Color blending with gamma correction | Torben Jansen | Observable"}] 31:[] 2f:{"id":"3b791f977af884a4","slug":"color-blending-with-gamma-correction","title":"Color blending with gamma correction","thumbnail":"ffed3184d993226a976a0294301314ce9966b42375f261f8e44ffcde37dc23e4","access_level":"public","create_time":"$D2019-04-21T17:08:17.095Z","update_time":"$D2020-05-09T02:50:36.997Z","view_time":null,"first_public_time":"$D2019-04-21T20:45:25.181Z","fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"03836a98946da550","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":"starter_2024"},"version":289,"publish_version":289,"role":null,"authored":false,"authors":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null}],"members":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"3a0b4a16f415a789","slug":"color","title":"Color","owner":{"id":"03836a98946da550","login":"toja","name":"Torben Jansen"}},"type":"notebook","body":{"title":"Color blending with gamma correction","cells":[{"id":0,"value":"md`# Color blending with gamma correction\n\nAs [Fabian Iwand has pointed out](https://observablehq.com/@mootari/color-blending-is-broken), both SVG and CSS perform color operations in the sRGB color space. Besides ignoring human perception, it causes incorrect (and sometimes ugly) results.\n\nFor better results it's possible to convert first to linear RGB and back to sRGB, after color operations are done.\n\nAlthough most times not used, the sRGB specification defines gamma value(s) for encoding and decoding sRGB images. sRGB gamma is very close to a standard gamma of 2.2, but it has a short linear segment in the very dark range to avoid a slope of infinity at zero.\n\nRef.: [wikipedia](https://en.wikipedia.org/wiki/SRGB#Specification_of_the_transformation)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"function linearRGB(sRGB) {\n return sRGB <= 0.04045 ? sRGB / 12.92 : Math.pow((sRGB + 0.055) / 1.055, 2.4);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"function sRGB(linearRGB) {\n return linearRGB <= 0.0031308 ? linearRGB * 12.92 : 1.055 * Math.pow(linearRGB, 1 / 2.4) - 0.055;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"md`Here's a recreation of an example from John Novaks [What every coder should know about gamma](https://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/). While the first image uses gamma corrected colors for blending, the second one uses your browsers default implementation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"viewof fgColors = {\n const view = html`

\n \n \n \n `;\n Object.defineProperty(view, 'value', {\n get() { return Array.from(this.elements).map(e => e.value) }\n });\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"{\n const canvas = DOM.canvas(width, height);\n const context = canvas.getContext(\"2d\");\n context.putImageData(blendedData, 0, 0);\n return html`

${canvas}

Alpha blending with gamma correction

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"combined = {\n const canvas = DOM.canvas(width, height);\n const context = canvas.getContext(\"2d\");\n \n context.drawImage(background, 0, 0, width, height);\n context.drawImage(foreground, 0, 0, width, height);\n \n return html`

${canvas}

Browser blending

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"background = {\n const canvas = DOM.canvas(width, height),\n context = canvas.getContext(\"2d\");\n \n const bars = bgColors.length,\n outerPadding = width * 0.1,\n rangeBand = (width - outerPadding * 2) / bars,\n barWidth = rangeBand * 0.8,\n padding = (rangeBand - barWidth) / 2;\n \n for (let i = 0; i < bars; i++) {\n context.fillStyle = bgColors[i];\n context.fillRect(outerPadding + rangeBand * i + padding, 0, barWidth, height);\n }\n \n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"foreground = {\n const canvas = DOM.canvas(width, height),\n context = canvas.getContext(\"2d\");\n \n const bars = fgColors.length,\n outerPadding = height * 0.1,\n rangeBand = (height - outerPadding * 2) / 3,\n barHeight = rangeBand * 0.6,\n padding = (rangeBand - barHeight) / 2;\n \n for (let i = 0; i < 3; i++) {\n let [r, g, b] = hex2rgb(fgColors[i]);\n context.fillStyle = `rgb(${r}, ${g}, ${b})`;\n context.fillRect(0, outerPadding + rangeBand * i + padding, width, barHeight / 2);\n context.fillStyle = `rgba(${r}, ${g}, ${b}, 0.5)`;\n context.fillRect(0, outerPadding + rangeBand * i + padding + barHeight / 2, width, barHeight / 2);\n }\n \n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"bgData = background.getContext(\"2d\").getImageData(0, 0, width, height).data;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"fgData = foreground.getContext(\"2d\").getImageData(0, 0, width, height).data;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"blendedData = {\n const data = new Uint8ClampedArray(width * height * 4);\n\n for (let row = 0; row < height; row++) {\n for (let column = 0; column < width; column++) {\n \n const index = (column + row * width) * 4;\n const c1 = [bgData[index], bgData[index + 1], bgData[index + 2]];\n const c2 = [fgData[index], fgData[index + 1], fgData[index + 2]];\n const o1 = bgData[index + 3];\n const o2 = fgData[index + 3];\n \n const [r, g, b] = o1 > 0\n ? alphaBlend(c2.map(linearRGB), c1.map(linearRGB), o2 / 255).map(sRGB)\n : o2 > 0 ? c2 : c1;\n \n data[index ] = r;\n data[index + 1] = g;\n data[index + 2] = b;\n data[index + 3] = o1 > 0 ? 255 : o2 || 0;\n }\n }\n \n return new ImageData(data, width, height);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"function alphaBlend(c1, c2, alpha) {\n const [r1, g1, b1] = c1;\n const [r2, g2, b2] = c2;\n return [\n r2 + (r1 - r2) * alpha,\n g2 + (g1 - g2) * alpha,\n b2 + (b1 - b2) * alpha\n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":230,"value":"function hex2rgb(hex) {\n let i = parseInt(hex.substring(1), 16);\n return [\n i >> 16 & 0xff,\n i >> 8 & 0xff,\n i & 0xff\n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"bgColors = [\"#18ea22\", \"#eae818\", \"#18eac8\", \"#ee46a6\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"width = 330","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"height = width / 3 * 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"