30:[] 2e:{"title":"Luv and HCL","cells":[{"id":0,"value":"md`# Luv and HCL\n\nThe [CIELUV](https://en.wikipedia.org/wiki/CIELUV) color space is closely related to [CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space); both are transformations of the [CIEXYZ](https://en.wikipedia.org/wiki/CIE_1931_color_space) color space that were adopted in 1976 as attempts to create practical color spaces with good perceptual uniformity. In addition, both have polar (or “cylindrical”) forms that are convenient for working with color, especially for information visualization.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"md`[d3-color](https://github.com/d3/d3-color) implements the CIELAB color space as [d3.lab](https://github.com/d3/d3-color/blob/master/README.md#lab), including conversion to and from sRGB as defined by the CSS specification. (See [*Lab and RGB*](/@mbostock/lab-and-rgb) for details.) It also implements polar CIELAB as [d3.lch](https://github.com/d3/d3-color/blob/master/README.md#lch). d3-color also exposes a [d3.hcl](https://github.com/d3/d3-color/blob/master/README.md#hcl) constructor which is equivalent to d3.lch, but with the arguments in reverse order; however, this is confusing as the HCL color space more commonly refers to polar CIELUV, not polar CIELAB.\n\nThe difference when interpolating through the color spaces can be significant.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"{\n const [r1, g1, b1] = [0 / 255, 255 / 255, 255 / 255];\n const [r2, g2, b2] = [255 / 255, 0 / 255, 0 / 255];\n return html`

sRGB

${ramp(t => {\n const r = r1 + t * (r2 - r1);\n const g = g1 + t * (g2 - g1);\n const b = b1 + t * (b2 - b1);\n return `rgb(${[r, g, b].map(v => Math.round(v * 255))})`;\n })}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"{\n const [x1, y1, z1] = lrgb_xyzd50(rgb_lrgb([0 / 255, 255 / 255, 255 / 255]));\n const [x2, y2, z2] = lrgb_xyzd50(rgb_lrgb([255 / 255, 0 / 255, 0 / 255]));\n return html`

CIEXYZ

${ramp(t => {\n const x = x1 + t * (x2 - x1);\n const y = y1 + t * (y2 - y1);\n const z = z1 + t * (z2 - z1);\n return `rgb(${lrgb_rgb(xyzd50_lrgb([x, y, z])).map(v => Math.round(v * 255))})`;\n })}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"{\n const [l1, a1, b1] = xyzd50_lab(lrgb_xyzd50(rgb_lrgb([0 / 255, 255 / 255, 255 / 255])));\n const [l2, a2, b2] = xyzd50_lab(lrgb_xyzd50(rgb_lrgb([255 / 255, 0 / 255, 0 / 255])));\n return html`

CIELAB

${ramp(t => {\n const l = l1 + t * (l2 - l1);\n const a = a1 + t * (a2 - a1);\n const b = b1 + t * (b2 - b1);\n return `rgb(${lrgb_rgb(xyzd50_lrgb(lab_xyzd50([l, a, b]))).map(v => Math.round(v * 255))})`;\n })}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"{\n const [l1, u1, v1] = xyzd50_luv(lrgb_xyzd50(rgb_lrgb([0 / 255, 255 / 255, 255 / 255])));\n const [l2, u2, v2] = xyzd50_luv(lrgb_xyzd50(rgb_lrgb([255 / 255, 0 / 255, 0 / 255])));\n return html`

CIELUV

${ramp(t => {\n const l = l1 + t * (l2 - l1);\n const u = u1 + t * (u2 - u1);\n const v = v1 + t * (v2 - v1);\n return `rgb(${lrgb_rgb(xyzd50_lrgb(luv_xyzd50([l, u, v]))).map(v => Math.round(v * 255))})`;\n })}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"{\n const [h1, c1, l1] = luv_hcl(xyzd50_lab(lrgb_xyzd50(rgb_lrgb([0 / 255, 255 / 255, 255 / 255]))));\n const [h2, c2, l2] = luv_hcl(xyzd50_lab(lrgb_xyzd50(rgb_lrgb([255 / 255, 0 / 255, 0 / 255]))));\n return html`

Polar CIELAB

${ramp(t => {\n const h = h1 + t * (h2 - h1);\n const c = c1 + t * (c2 - c1);\n const l = l1 + t * (l2 - l1);\n return `rgb(${lrgb_rgb(xyzd50_lrgb(lab_xyzd50(hcl_luv([h, c, l])))).map(v => Math.round(v * 255))})`;\n })}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"{\n const [h1, c1, l1] = luv_hcl(xyzd50_luv(lrgb_xyzd50(rgb_lrgb([0 / 255, 255 / 255, 255 / 255]))));\n const [h2, c2, l2] = luv_hcl(xyzd50_luv(lrgb_xyzd50(rgb_lrgb([255 / 255, 0 / 255, 0 / 255]))));\n return html`

Polar CIELUV

${ramp(t => {\n const h = h1 + t * (h2 - h1);\n const c = c1 + t * (c2 - c1);\n const l = l1 + t * (l2 - l1);\n return `rgb(${lrgb_rgb(xyzd50_lrgb(luv_xyzd50(hcl_luv([h, c, l])))).map(v => Math.round(v * 255))})`;\n })}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"md`This notebook implements CIELUV and its polar form that will replace d3.hcl starting in d3-color 2.0. (I will also be exposing CIEXYZ as d3.xyz.) d3.lch will remain as the polar form of CIELAB.\n\nPick a color below to test color space conversion.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"viewof color = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"md`## sRGB to CIEXYZ\n\nThe browser uses sRGB with the D65 referent. We first convert to CIEXYZ with a D50 referent per the [CSS Color specification](https://drafts.csswg.org/css-color/#rgb-to-lab). This implementation is imported from [*Lab and RGB*](/@mbostock/lab-and-rgb).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"color_rgb = [\n parseInt(color.slice(1, 3), 16) / 255,\n parseInt(color.slice(3, 5), 16) / 255,\n parseInt(color.slice(5, 7), 16) / 255\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"color_lrgb = rgb_lrgb(color_rgb)","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"color_xyzd50 = lrgb_xyzd50(color_lrgb)","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"md`## CIEXYZ to CIELUV\n\nGiven a CIEXYZ color ${tex`\\langle X,Y,Z \\rangle`}, the equivalent CIELUV color is\n\n${tex.block`{\\begin{aligned}L^{*}&={\\begin{cases}\\left({\\frac {29}{3}}\\right)^{3}Y/Y_{n},&Y/Y_{n}\\leq \\left({\\frac {6}{29}}\\right)^{3}\\\\116\\left(Y/Y_{n}\\right)^{{1/3}}-16,&Y/Y_{n}>\\left({\\frac {6}{29}}\\right)^{3}\\end{cases}}\\\\u^{*}&=13L^{*}\\cdot (u^{\\prime }-u_{n}^{\\prime })\\\\v^{*}&=13L^{*}\\cdot (v^{\\prime }-v_{n}^{\\prime })\\end{aligned}}`}\n\nwhere the chromaticity coordinates ${tex`\\langle u^\\prime,v^\\prime \\rangle`} are\n\n${tex.block`{\\begin{aligned}\nu^\\prime &= \\frac{4X}{X + 15Y + 3Z} \\\\[1em]\nv^\\prime &= \\frac{9Y}{X + 15Y + 3Z}\n\\end{aligned}}`}\n\nand ${tex`\\langle X_n,Y_n,Z_n \\rangle`} is the (D50) referent, hence\n\n${tex.block`{\\begin{aligned}\nu^\\prime_n &= \\frac{4X_n}{X_n + 15Y_n + 3Z_n}, \\\\[1em]\nv^\\prime_n &= \\frac{9Y_n}{X_n + 15Y_n + 3Z_n}.\n\\end{aligned}}`}\n\nIf ${tex`X + 15Y + 3Z = 0`}, ${tex`L^* = u^* = v^* = 0`} to avoid divide by zero.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"xn = tristimulus_d50[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"yn = tristimulus_d50[1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"zn = tristimulus_d50[2]","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"un = 4 * xn / (xn + 15 * yn + 3 * zn)","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"vn = 9 * yn / (xn + 15 * yn + 3 * zn)","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"md`To abbreviate, ${tex`\\epsilon = (\\frac{6}{29})^3`} and ${tex`\\kappa = (\\frac{29}{3})^3`}. (And note ${tex`\\kappa \\epsilon = 8`}.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"epsilon = 216 / 24389","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"kappa = 24389 / 27","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"function xyzd50_luv([x, y, z]) {\n const d = x + 15 * y + 3 * z;\n if (d === 0) return [0, 0, 0];\n const yr = y / yn;\n const l = yr > epsilon ? 116 * Math.cbrt(yr) - 16 : kappa * yr;\n return [\n l,\n 13 * l * (4 * x / d - un),\n 13 * l * (9 * y / d - vn)\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"color_luv = xyzd50_luv(color_xyzd50)","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"md`## CIELUV to CIEXYZ\n\nThe reverse transformation is given as\n\n${tex.block`{\\begin{aligned}\\\\Y&={\\begin{cases}Y_{n}\\cdot L^{*}\\cdot \\left({\\frac {3}{29}}\\right)^{3},&L^{*}\\leq 8\\\\Y_{n}\\cdot \\left({\\frac {L^{*}+16}{116}}\\right)^{3},&L^{*}>8\\end{cases}}\\\\X&=Y\\cdot {\\frac {9u^{\\prime }}{4v^{\\prime }}}\\\\Z&=Y\\cdot {\\frac {12-3u^{\\prime }-20v^{\\prime }}{4v^{\\prime }}}\\\\\\end{aligned}}`}\n\nwhere\n\n${tex.block`{\\begin{aligned}u^{\\prime }&={\\frac {u^{*}}{13L^{*}}}+u_{n}^{\\prime},\\\\v^{\\prime }&={\\frac {v^{*}}{13L^{*}}}+v_{n}^{\\prime}.\\end{aligned}}`}\n\nIf ${tex`L^* = 0`}, then ${tex`X = Y = Z = 0`} to avoid divide by zero.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"function luv_xyzd50([l, u, v]) {\n if (l === 0) return [0, 0, 0];\n const up = u / (13 * l) + un;\n const vp = v / (13 * l) + vn;\n const y = yn * (l > 8 ? ((l + 16) / 116) ** 3 : l / kappa);\n const d = 4 * vp;\n return [\n y * 9 * up / d,\n y,\n y * (12 - 3 * up - 20 * vp) / d\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"luv_xyzd50(color_luv)","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"md`## Polar CIELUV\n\nThe polar form, commonly known as HCL, is\n\n${tex.block`\\begin{aligned}\nC_{{uv}}^{*}&={\\sqrt{u^{*2}+v^{*2}}}, \\\\\nh_{{uv}}&=\\operatorname {atan2}(v^{*},u^{*}),\n\\end{aligned}`}\n\nwith the reverse transformation\n\n${tex.block`\\begin{aligned}\nu^* &= C_{uv}^{*} \\operatorname{cos}(h_{uv}), \\\\\nv^* &= C_{uv}^{*} \\operatorname{sin}(h_{uv}).\n\\end{aligned}`}\n\nIdentical transformations are used for the polar form of CIELAB.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"function luv_hcl([l, u, v]) {\n const h = Math.atan2(v, u) * rad2deg;\n return [h < 0 ? h + 360 : h, Math.hypot(u, v), l];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"function hcl_luv([h, c, l]) {\n h *= deg2rad;\n return [l, c * Math.cos(h), c * Math.sin(h)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"color_hcl = luv_hcl(color_luv)","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"hcl_luv(color_hcl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"rad2deg = 180 / Math.PI","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"deg2rad = Math.PI / 180","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"import {\n tristimulus_d50, \n rgb_lrgb,\n lrgb_rgb, \n lrgb_xyzd50, \n xyzd50_lrgb, \n xyzd50_lab, \n lab_xyzd50\n} from \"@mbostock/lab-and-rgb\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}