2b:null 2c:["$","title",null,{"children":"Chroma vs. RGB clamping for the CIELCh color space | Dan Burzo | Observable"}] 31:[] 2f:{"id":"cd671a0a19c4caf5","slug":"hcl-chroma-clamping-vs-rgb-clamping","title":"Chroma vs. RGB clamping for the CIELCh color space","thumbnail":"0be3874d42b9e7894a53d9df73489e74b095d73daa6dd7437e9d263ba3a56538","access_level":"public","create_time":"$D2018-04-18T08:52:27.675Z","update_time":"$D2018-04-18T14:59:02.584Z","view_time":null,"first_public_time":"$D2018-04-18T09:17:32.147Z","fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"d2d1bf09f301c5bc","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":"starter_2024"},"version":237,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0303102bdc18d54b","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":null}],"members":[{"type":"individual","id":"0303102bdc18d54b","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"496ce6a89b187242","slug":"color-exploration","title":"Color","owner":{"id":"d2d1bf09f301c5bc","login":"danburzo","name":"Dan Burzo"}},"type":"notebook","body":{"title":"Chroma vs. RGB clamping for the CIELCh color space","cells":[{"id":0,"value":"md`\n\n# Chroma vs. RGB clamping for the CIELCh color space\n\nNot all colors that can be expressed in the [CIELCh](https://en.wikipedia.org/wiki/Lab_color_space#Cylindrical_representation:_CIELCh_or_CIEHLC) color space are displayable in the sRGB gamut. How might we find the closest displayable color?\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof hue = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof chroma = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof lightness = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`\n\n__L: ${lightness} C: ${chroma} H: ${hue}__\n\n

\n\n

RGB clamping

${swatch(hcl(hue, chroma, lightness) + '')}

${hcl(hue, chroma, lightness) + ''}

\n\n

Chroma clamping (linear)

${swatch(fixupLinear(hcl(hue, chroma, lightness)) + '')}

${fixupLinear(hcl(hue, chroma, lightness)) + ''}

\n\n

Chroma clamping (bisect)

${swatch(fixupBisect(hcl(hue, chroma, lightness)) + '')}

${fixupBisect(hcl(hue, chroma, lightness)) + ''} in __${iterations}__ iterations

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md`\n\n### Color ramp comparison\n\n

Method

RGB Clamp

Chroma Clamp

\n\n

Hue: 0 → 100

\n ${ramp(t => hcl(t * 360, chroma, lightness))}\n ${ramp(t => fixupBisect(hcl(t * 360, chroma, lightness)))}\n

Chroma: 0 → 100

\n ${ramp(t => hcl(hue, t * 100, lightness))}\n ${ramp(t => fixupBisect(hcl(hue, t * 100, lightness)))}\n

Lightness: 0 → 100

\n ${ramp(t => hcl(hue, chroma, t * 100))}\n ${ramp(t => fixupBisect(hcl(hue, chroma, t * 100)))}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md`\n \n### Hue-Chroma Discs\n\n${disc((r, t) => hcl(t, r, lightness))}\n${disc((r, t) => fixupBisect(hcl(t, r, lightness)))}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md`A fast way to converge to the largest displayable chroma is through the [bisection method](https://en.wikipedia.org/wiki/Bisection_method):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"function fixupBisect(c) {\n // if the color is displayable, return it directly\n if (c.displayable()) return c;\n \n // try with chroma=0\n var clamped = hcl(c.h, 0, c.l);\n \n // if not even chroma=0 is displayable\n // fall back to RGB clamping\n if (!clamped.displayable()) return clamped;\n \n // By this time we know chroma=0 is displayable and our current chroma is not.\n // Find the displayable chroma through the bisection method.\n var start = 0, end = c.c, delta = 0.01;\n \n // Keep track of iterations to measure performance\n mutable iterations = 0;\n while (end - start > delta) {\n clamped.c = start + (end - start) * 0.5;\n if (clamped.displayable()) start = clamped.c;\n else end = clamped.c;\n mutable iterations++;\n };\n \n return clamped;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"mutable iterations = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`And here we have a linear method that's much simpler (but slower) for comparison:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"function fixupLinear(c) {\n let delta = 0.01;\n while (!c.displayable() && c.c >= delta) c.c -= delta;\n return c;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"swatch = bg => html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"hcl = (await require('d3-color')).hcl","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"import { ramp, disc } from \"@danburzo/color-ramp\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"