31:[] 2f:{"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"},{"id":8,"value":"viewof hue = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof chroma = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof lightness = html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":6,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":150,"value":"mutable iterations = 0","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":22,"value":"swatch = bg => html`

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