27:null 28:["$","title",null,{"children":"Chroma vs. RGB clamping for the CIELCh color space | Hannah Kim | Observable"}] 2d:[] 2b:{"id":"ab98759e2245f5ef","slug":null,"title":"Chroma vs. RGB clamping for the CIELCh color space","thumbnail":"0065e2643a5596c95860f61929c5a0dabea7fe01a551a8e977145b16570cdc5c","access_level":"public","create_time":"$D2023-02-12T04:09:04.334Z","update_time":"$D2023-02-12T04:09:04.334Z","view_time":null,"first_public_time":"$D2023-02-12T04:09:04.334Z","has_unpublished_edits":null,"fork":{"id":"cd671a0a19c4caf5","slug":"hcl-chroma-clamping-vs-rgb-clamping","title":"Chroma vs. RGB clamping for the CIELCh color space","owner":{"id":"d2d1bf09f301c5bc","login":"danburzo","name":"Dan Burzo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"da6de0bfa6ca61d7","login":"hannahkimincompbio","name":"Hannah Kim","avatar_url":"https://avatars-next.observableusercontent.com/2df327126449c2f5daa5ad7a5bd24c23eb14bc15f28e94db740cb3f5e47b3134","tier":"starter_2024"},"version":237,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fce54e128292c37d","login":"hannahkimincompbio","name":"Hannah Kim","avatar_url":"https://avatars-next.observableusercontent.com/2df327126449c2f5daa5ad7a5bd24c23eb14bc15f28e94db740cb3f5e47b3134","tier":null}],"members":[{"type":"individual","id":"fce54e128292c37d","login":"hannahkimincompbio","name":"Hannah Kim","avatar_url":"https://avatars-next.observableusercontent.com/2df327126449c2f5daa5ad7a5bd24c23eb14bc15f28e94db740cb3f5e47b3134","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"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":"$W2d","stdlib":"1","titling":"auto"}} 2c:"$2b:body"