29:null 2a:["$","title",null,{"children":"OKLab / OKLch palette rotation | Gabe Coulter | Observable"}] 2f:Tb59,combinedView = { const container = html`

`; // --- Left: 3D OKLCh pane (unchanged) --- const vizCol = html`

3D OKLCh Hue Planes
(drag / zoom to interact)

`; view3D.style.maxWidth = "100%"; view3D.style.maxHeight = "100%"; view3D.style.width = "auto"; vizCol.appendChild(view3D); container.appendChild(vizCol); // --- Right: split into bars, swatches, and info --- viewof bgColor; // ensure bgColor is in scope const rightCol = html`

`; // info box for hover/click let selectedColor = null; const infoBox = html`

Hover or click a color above

`; // Top half: seamless vertical bars const barContainer = html`

`; rotatedPalette.forEach(hex => { const bar = html`

`; bar.style.background = hex; bar.addEventListener("mouseover", () => { infoBox.textContent = hex; }); bar.addEventListener("mouseout", () => { infoBox.textContent = selectedColor ? `Selected: ${selectedColor}` : "Hover or click a color above"; }); bar.addEventListener("click", () => { selectedColor = hex; infoBox.textContent = `Selected: ${hex}`; }); barContainer.appendChild(bar); }); rightCol.appendChild(barContainer); // Bottom half: swatches on chosen background const swatchContainer = html`

`; rotatedPalette.forEach(hex => { const sw = html`

`; sw.style.background = hex; sw.addEventListener("mouseover", () => infoBox.textContent = hex); sw.addEventListener("mouseout", () => { infoBox.textContent = selectedColor ? `Selected: ${selectedColor}` : "Hover or click a color above"; }); sw.addEventListener("click", () => { selectedColor = hex; infoBox.textContent = `Selected: ${hex}`; }); swatchContainer.appendChild(sw); }); rightCol.appendChild(swatchContainer); // Append info box at bottom rightCol.appendChild(infoBox); container.appendChild(rightCol); return container; } 30:T478,exportedPalette = { const p = rotatedPalette; const containerStyle = "max-width:100%; overflow-x:auto; margin: 8px 0;"; switch (exportFormat) { case "CSV (with #)": return html`

${p.join(", ")}

`; case "JS Array": return html`

${JSON.stringify(p)}

`; case "CSS Variables": return html`

:root {
${p.map((c, i) => `  --color-${i}: ${c};`).join("\n")}
}

`; case "Linear-gradient CSS": return html`

background: linear-gradient(90deg,
${p.map((c, i) => `  ${c} ${Math.round(100 * i / (p.length - 1))}%`).join(",\n")});

`; } }31:Tad4,md` ### Palette Transformation Modes **OKLab Rotation** Rotate the $(a,b)$ vector in OKLab by the angle ${tex`\theta`} (preserving Euclidean distances), keeping lightness fixed. > **New** > ${tex` L_1 = L_0,\quad \begin{pmatrix}a_1\\b_1\end{pmatrix} = \begin{pmatrix}\cos\theta & -\sin\theta\\\sin\theta & \cos\theta\end{pmatrix} \begin{pmatrix}a_0\\b_0\end{pmatrix} `} - **Adaptive Gamut Clipping** If a color exceeds the display gamut, we softly project its OKLCh coordinates back onto the boundary along its hue direction. We pick ${tex`t\in[0,1]`} so that ${tex`(L',C') = (1-t)\,(L_0,C_0) \;+\; t\,(L_0,\,C_{\max}(L_0,h))`} lies exactly on the cusp, gently pulling chroma back to its maximum while preserving hue and overall lightness. **OKLCh Rotation** Lightness, Chroma and Hue (L,C,H) - original values subscript 0. Transformed values subscript 1. ${tex`H_1 = H_0+Rotation`} - **Fractional Chroma** Preserve the *fraction* ${tex`f = \frac{C_0}{C_{\max}(L_0, H_0)}`} of the gamut‑maximum at the *new* hue, keeping lightness fixed. > **New** > ${tex` L_1 = L_0,\quad C_1 = f \times C_{\max}(L_0, H_1) `} - **Constant Saturation (Soft Blend)** Preserve the *saturation* ${tex`S = \tfrac{C_0}{L_0}`} by blending between: - **Fractional Chroma** solution ${tex`(L_{\rm frac}, C_{\rm frac}) = \bigl(L_0,\;f\,C_{\max}(L_0,H_1)\bigr)`} - **Saturation‑Preserving** solution ${tex`L_{\rm sat} = \frac{f\,C_c}{f\,C_c + S\,(1 - L_c)},\quad C_{\rm sat} = S\,L_{\rm sat}`} with a weight ${tex`w(L_0)`} over a window ${tex`\varepsilon`} around the cusp ${tex`L_c`}: ${tex` w(L_0) = \begin{cases} 0, & L_0 \le L_c - \varepsilon,\\ \frac{L_0 - (L_c - \varepsilon)}{2\,\varepsilon}, & |L_0 - L_c|\le \varepsilon,\\ 1, & L_0 \ge L_c + \varepsilon. \end{cases} `} > **New** > ${tex` L_1 = (1 - w)\,L_{\rm frac} + w\,L_{\rm sat},\quad C_1 = (1 - w)\,C_{\rm frac} + w\,C_{\rm sat}. `} - **Absolute Chroma** Preserve the *absolute* chroma ${tex`C_0`}, clamping if it exceeds the new gamut: > **New** > ${tex` L_1 = L_0,\quad C_1 = \min\bigl(C_0,\,C_{\max}(L_0, H_1)\bigr) `} - **Fractional‑Then‑Absolute** 1. If the allowed chroma increases at the new hue: ${tex`C_{\max}(L_0, H_1) \ge C_{\max}(L_0, H_0)`}, apply **Fractional Chroma**, growing into the available gamut. 2. Otherwise, apply **Absolute Chroma**. > **New** > ${tex`L_1 = L_0\\`} > ${tex` C_1 = \begin{cases} f\,C_{\max}(L_0, H_1), & C_{\max}(L_0, H_1)\ge C_{\max}(L_0, H_0)\\ \min\bigl(C_0,\,C_{\max}(L_0, H_1)\bigr), & \text{otherwise} \end{cases} `} ` 32:T8a7,sceneSetup = { const THREE = window.THREE; // --- Scene Setup --- const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, 600/600, 0.1, 1000); camera.position.set(0, 0, 8); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(800, 800); const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // Expose camera and controls for later use (optional) window.myCamera = camera; window.myControls = controls; // --- Create a Group of Hue Planes --- // Get number of planes from slider (assuming numPlanes is defined in another cell) const hues = []; for (let angle = 0; angle < 360; angle += (360 / numPlanes)) { hues.push(angle); } // Create group for hue-plane meshes. const hueGroup = new THREE.Group(); // Parameters for each plane: const planeCanvasWidth = 256, planeCanvasHeight = 256; const planeSize = 3; // 3D size for each plane hues.forEach(hue => { // Generate the canvas texture using renderHuePlane (assumed defined) const canvas = renderHuePlane(hue, planeCanvasWidth, planeCanvasHeight, 1); const texture = new THREE.CanvasTexture(canvas); texture.flipY = true; // Ensure the left edge corresponds to u = 0 // Create a plane geometry and shift it so its left (chroma = 0) edge is at local x = 0. const geometry = new THREE.PlaneGeometry(planeSize, planeSize); geometry.translate(planeSize / 2, 0, 0); const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true }); const planeMesh = new THREE.Mesh(geometry, material); // Place all planes at the origin (so zero-chroma edges coincide). planeMesh.position.set(0, 0, 0); // Rotate each plane so its positive X-axis (colored portion) points radially outward. const angleRad = THREE.MathUtils.degToRad(hue); planeMesh.rotation.y = angleRad; hueGroup.add(planeMesh); }); scene.add(hueGroup); // Return an object containing scene, camera, renderer, and controls. return { scene, camera, renderer, controls }; } 33:Tf89,rotatePalette = ( paletteInputArr, { // rotationSpace: // "OKLab Rotation" – rigid Cartesian rotation in OKLab // "OKLCh Rotation + Scaling" – polar rotation in OKLCh with one of the okLchMode options rotationSpace = "OKLab Rotation", // okLchMode (only used when rotationSpace === "OKLCh Rotation + Scaling"): // "Fractional Chroma" // "Constant Saturation" // "Absolute Chroma" // "Fractional-Then-Absolute" okLchMode = "Fractional Chroma", // paletteRotation: hue rotation in degrees paletteRotation = 0, // clipOKLab: when true, apply adaptive gamut clipping in OKLab mode clipOKLab = true, // vividness: multiplies chroma (C) (1 = no change) vividness = 1, // contrast: in [–1, +1], remaps L around contrastPivot (0 = no change) contrast = 0, // contrastPivot: the L value around which contrast is stretched (0…1) contrastPivot = 0.5 } = {} ) => { return paletteInputArr.map(hex => { // 1) parse to linear sRGB and OKLab const rgb = parse_hexcode(hex); let lab = linear_srgb_to_oklab(rgb); // { L, a, b } let oklchResult; if (rotationSpace === "OKLab Rotation") { // 2a) rigid rotate in OKLab const θ = paletteRotation * Math.PI/180; const a1 = lab.a * Math.cos(θ) - lab.b * Math.sin(θ); const b1 = lab.a * Math.sin(θ) + lab.b * Math.cos(θ); lab = { L: lab.L, a: a1, b: b1 }; // 2b) optional adaptive clipping if (clipOKLab) { const lin = oklab_to_linear_srgb(lab); const clipped = gamut_clip_adaptive_L0_0_5(lin, 0.05); lab = linear_srgb_to_oklab(clipped); } // 2c) convert to OKLCh for uniform API oklchResult = oklab_to_oklch(lab); } else { // OKLCh Rotation + Scaling (not the default) const oklch0 = oklab_to_oklch(lab); const origMax = maximum_chroma_for_lh(oklch0.L, oklch0.h); const f = oklch0.C / origMax; const S = oklch0.C / oklch0.L; let newHue = (oklch0.h + paletteRotation) % 360; if (newHue < 0) newHue += 360; const newMax = maximum_chroma_for_lh(oklch0.L, newHue); let newL = oklch0.L; let newC; if (okLchMode === "Fractional Chroma") { newC = f * newMax; } else if (okLchMode === "Constant Saturation") { const a1 = Math.cos(newHue * Math.PI/180), b1 = Math.sin(newHue * Math.PI/180); const { L: Lc, C: Cc } = find_cusp(a1, b1); const L_frac = newL, C_frac = f * newMax; const L_sat = (f * Cc) / (f * Cc + S * (1 - Lc)); const C_sat = S * L_sat; const eps = 0.2; let w = (newL - (Lc - eps)) / (2 * eps); w = Math.min(1, Math.max(0, w)); newL = L_frac * (1 - w) + L_sat * w; newC = C_frac * (1 - w) + C_sat * w; } else if (okLchMode === "Absolute Chroma") { newC = Math.min(oklch0.C, newMax); } else if (okLchMode === "Fractional-Then-Absolute") { newC = newMax >= origMax ? f * newMax : Math.min(oklch0.C, newMax); } else { newC = f * newMax; } oklchResult = { L: newL, C: newC, h: newHue }; } // 3) Vividness: scale C then clamp oklchResult.C = Math.min( maximum_chroma_for_lh(oklchResult.L, oklchResult.h), oklchResult.C * vividness ); // 4) Contrast around user pivot const factor = 1 + contrast; oklchResult.L = Math.max( 0, Math.min( 1, contrastPivot + factor * (oklchResult.L - contrastPivot) ) ); // 5) Re-clamp C after L change oklchResult.C = Math.min( maximum_chroma_for_lh(oklchResult.L, oklchResult.h), oklchResult.C ); // 6) Convert back to hex return culori.formatHex({ mode: "oklch", l: oklchResult.L, c: oklchResult.C, h: oklchResult.h }); }); } 34:T741,paletteMarkers = { const THREE = window.THREE; const myScene = sceneSetup.scene; // Remove any existing marker group from the scene. if (myScene.markerGroup) { myScene.remove(myScene.markerGroup); } // Create a new marker group. const markerGroup = new THREE.Group(); myScene.markerGroup = markerGroup; myScene.add(markerGroup); // Parameters for mapping the colors. const planeSize = 3; // Same as used for your hue-plane geometry. const absoluteChromaMax = 0.4; // The absolute chroma limit used in your canvas renderer. const markerScale = planeSize / absoluteChromaMax; // For example, 3/0.4 // Loop over each color in the palette array. rotatedPalette.forEach(hex => { // Convert the hex to OKLch. const rgb = parse_hexcode(hex); // hex -> sRGB (values in [0,1]) const lab = linear_srgb_to_oklab(rgb); // Convert to OKLab. const oklch = oklab_to_oklch(lab); // Convert to OKLch (returns { L, C, h }) // Map OKLch to 3D space: // If the marker appears on the wrong side, we negate the hue. const hueRad = -oklch.h * Math.PI / 180; const markerX = oklch.C * Math.cos(hueRad) * markerScale; const markerZ = oklch.C * Math.sin(hueRad) * markerScale; // Remap lightness L from [0, 1] to [-planeSize/2, +planeSize/2]. const markerY = (oklch.L * planeSize) - (planeSize / 2); // Create a marker (a small sphere) using the current color. const markerGeometry = new THREE.SphereGeometry(0.1, 16, 16); const markerMaterial = new THREE.MeshBasicMaterial({ color: hex }); const markerMesh = new THREE.Mesh(markerGeometry, markerMaterial); markerMesh.position.set(markerX, markerY, markerZ); markerGroup.add(markerMesh); }); // Return the marker group for inspection. return markerGroup; }35:T563,renderHuePlane = function(hue, width = 256, height = 256, cellSize = 1) { const canvas = DOM.canvas(width, height); const context = canvas.getContext("2d"); context.globalAlpha = alpha; // Loop over every pixel (i = x, j = y). for (let i = 0; i < width; i++) { for (let j = 0; j < height; j++) { // Map x to absolute chroma [0, 0.4] and y to lightness [0,1]. const C = (i / (width - 1)) * 0.4; const L = 1 - j / (height - 1); // Determine maximum allowed chroma at this lightness. let C_max; // (Assuming cusp is computed from your gamut code for the given hue) const a_val = Math.cos(hue * Math.PI / 180); const b_val = Math.sin(hue * Math.PI / 180); const cusp = find_cusp(a_val, b_val); // returns { L, C } if (L <= cusp.L) { C_max = (cusp.C / cusp.L) * L; } else { C_max = (cusp.C / (1 - cusp.L)) * (1 - L); } // Draw the valid region with the actual OKLch color, // and draw out-of-bound pixels as transparent. if (C <= C_max) { const hex = culori.formatHex({ mode: "oklch", l: L, c: C, h: hue }); context.fillStyle = hex; } else { context.fillStyle = "rgba(0,0,0,0)"; } context.fillRect(i, j, cellSize, cellSize); } } context.globalAlpha = 1; return canvas; }36:T11a1,renderHuePlaneWithAxes = function(hue, { width = 360, height = 360, marginTop = 50, // room for hue annotation marginRight = 20, marginBottom = 40, marginLeft = 70, // room for y‑ticks + label maxChroma = 0.4, xTicks = 5, yTicks = 5, font = "12px sans-serif", axisColor = "#333", cellSize = 1 } = {}) { const planeWidth = width - marginLeft - marginRight; const planeHeight = height - marginTop - marginBottom; const canvas = DOM.canvas(width, height); const ctx = canvas.getContext("2d"); // 1) compute cusp once const a_val = Math.cos(hue * Math.PI/180); const b_val = Math.sin(hue * Math.PI/180); const cusp = find_cusp(a_val, b_val); // { L: …, C: … } // 2) paint the OKLCh plane (offset by margins) for (let i = 0; i < planeWidth; i++) { for (let j = 0; j < planeHeight; j++) { const C = (i / (planeWidth - 1)) * maxChroma; const L = 1 - j / (planeHeight - 1); const C_max = L <= cusp.L ? (cusp.C / cusp.L) * L : (cusp.C / (1 - cusp.L)) * (1 - L); ctx.fillStyle = C <= C_max ? culori.formatHex({ mode: "oklch", l: L, c: C, h: hue }) : "rgba(0,0,0,0)"; ctx.fillRect(marginLeft + i, marginTop + j, cellSize, cellSize); } } // 3) draw axes ctx.strokeStyle = axisColor; ctx.lineWidth = 1; // x‑axis ctx.beginPath(); ctx.moveTo(marginLeft, marginTop + planeHeight); ctx.lineTo(marginLeft + planeWidth, marginTop + planeHeight); ctx.stroke(); // y‑axis ctx.beginPath(); ctx.moveTo(marginLeft, marginTop); ctx.lineTo(marginLeft, marginTop + planeHeight); ctx.stroke(); // 4) ticks & numeric labels ctx.fillStyle = axisColor; ctx.font = font; // — x‑ticks ctx.textBaseline = "top"; ctx.textAlign = "center"; for (let i = 0; i <= xTicks; i++) { const x = marginLeft + (planeWidth * i / xTicks); const Cval = (maxChroma * i / xTicks).toFixed(2); ctx.beginPath(); ctx.moveTo(x, marginTop + planeHeight); ctx.lineTo(x, marginTop + planeHeight + 6); ctx.stroke(); ctx.fillText(Cval, x, marginTop + planeHeight + 8); } // — x‑axis title ctx.fillText( "Chroma (C)", marginLeft + planeWidth / 2, marginTop + planeHeight + 24 ); // — y‑ticks ctx.textBaseline = "middle"; ctx.textAlign = "right"; for (let j = 0; j <= yTicks; j++) { const y = marginTop + planeHeight - (planeHeight * j / yTicks); const Lval = (j / yTicks).toFixed(2); ctx.beginPath(); ctx.moveTo(marginLeft, y); ctx.lineTo(marginLeft - 6, y); ctx.stroke(); ctx.fillText(Lval, marginLeft - 8, y); } // — y‑axis title ctx.save(); ctx.translate(marginLeft - 40, marginTop + planeHeight / 2); ctx.rotate(-Math.PI/2); ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("Lightness (L)", 0, 0); ctx.restore(); // 5) hue annotation ctx.fillStyle = axisColor; ctx.font = font; ctx.textAlign = "left"; ctx.textBaseline = "top"; ctx.fillText(`Hue: ${hue}°`, marginLeft, marginTop - 32); // 6) draw & label cusp const cx = marginLeft + (cusp.C / maxChroma) * planeWidth; const cy = marginTop + (1 - cusp.L) * planeHeight; // marker ctx.beginPath(); ctx.arc(cx, cy, 4, 0, 2 * Math.PI); ctx.fillStyle = "#fff"; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = "#000"; ctx.stroke(); // prepare the label const label = `Cusp: L=${cusp.L.toFixed(2)}, C=${cusp.C.toFixed(2)}`; ctx.font = font; // ensure same font for measurement const textWidth = ctx.measureText(label).width; const planeRight = marginLeft + planeWidth; // choose side based on overflow let labelX = cx + 6, align = "left"; if (labelX + textWidth > planeRight) { labelX = cx - 6; align = "right"; } // actually draw it ctx.font = font; ctx.textAlign = align; ctx.textBaseline = "bottom"; // 1) draw a white “halo” ctx.lineWidth = 3; ctx.strokeStyle = "#fff"; ctx.strokeText(label, labelX, cy - 6); // 2) draw the text itself ctx.fillStyle = axisColor; // still your dark text ctx.fillText(label, labelX, cy - 6); // ctx.textAlign = align; // "left" or "right" // ctx.textBaseline = "bottom"; // ctx.fillStyle = axisColor; // ctx.fillText(label, labelX, cy - 6); return canvas; } 37:T822,{ const hue = hueForGamut; // in degrees // Generate data: sample lightness values with a small step const steps = 1000; const data = []; for (let i = 0; i < steps; i++) { const L = i / (steps - 1); const maxC = maximum_chroma_for_lh(L, hue); data.push({ L, maxC }); } // Set up chart dimensions and margins. const width = 500, height = 300; const margin = { top: 20, right: 20, bottom: 40, left: 50 }; // Create an SVG element. const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Define x-scale: lightness from 0 to 1. const xScale = d3.scaleLinear() .domain([0, 1]) .range([margin.left, width - margin.right]); // Define y-scale: domain from 0 to the maximum computed value. const yMax = d3.max(data, d => d.maxC); const yScale = d3.scaleLinear() .domain([0, .4]) .nice() .range([height - margin.bottom, margin.top]); // Create a line generator. const line = d3.line() .x(d => xScale(d.L)) .y(d => yScale(d.maxC)) .curve(d3.curveMonotoneX); // Append the line. svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2) .attr("d", line); // Add x-axis. const xAxis = d3.axisBottom(xScale) .ticks(10) .tickFormat(d3.format(".1f")); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis); // Add y-axis. const yAxis = d3.axisLeft(yScale) .ticks(10) .tickFormat(d3.format(".3f")); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis); // Add axis labels. svg.append("text") .attr("x", width / 2) .attr("y", height - 5) .attr("text-anchor", "middle") .text("Lightness (L)"); svg.append("text") .attr("x", -height / 2) .attr("y", 15) .attr("transform", "rotate(-90)") .attr("text-anchor", "middle") .text("Maximum Chroma"); return svg.node(); }38:[{"id":"054687ee17d8bd3de864e32b1b424a34a2c227f90aa05c34fcc6974e77bff84fe6f54225c6b11215f8b95530c581b8e31da010d31b2449cb72dcc8d2cde8a3f0","href":"https://static.observableusercontent.com/files/054687ee17d8bd3de864e32b1b424a34a2c227f90aa05c34fcc6974e77bff84fe6f54225c6b11215f8b95530c581b8e31da010d31b2449cb72dcc8d2cde8a3f0","name":"HuePlanes.png","type":"image/png","lastModified":1744848156433.994,"size":571434}] 2d:{"id":"dd7e4bf643b852fd","slug":"oklab-oklch-palette-rotation","title":"OKLab / OKLch palette rotation","thumbnail":"a7bc94ab47320aaccfbc34e1aadaff02aa846d576972de0e038a6988485f75de","access_level":"public","create_time":"$D2025-04-11T11:17:47.309Z","update_time":"$D2025-08-13T20:46:21.611Z","view_time":null,"first_public_time":"$D2025-05-04T17:16:24.708Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"d39ebc622977292f","login":"coulterg","name":"Gabe Coulter","avatar_url":"https://avatars-next.observableusercontent.com/9bc7ae846c95c3659b64c3e48f68777e882abaaa0a223ea09f6d47405784e88e","tier":"starter_2024"},"version":865,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4518d6db579a40e9","login":"coulterg","name":"Gabe Coulter","avatar_url":"https://avatars-next.observableusercontent.com/9bc7ae846c95c3659b64c3e48f68777e882abaaa0a223ea09f6d47405784e88e","tier":null}],"members":[{"type":"individual","id":"4518d6db579a40e9","login":"coulterg","name":"Gabe Coulter","avatar_url":"https://avatars-next.observableusercontent.com/9bc7ae846c95c3659b64c3e48f68777e882abaaa0a223ea09f6d47405784e88e","tier":null,"role":"editor"},{"type":"team","id":"d39ebc622977292f","login":"coulterg","name":"Gabe Coulter","avatar_url":"https://avatars-next.observableusercontent.com/9bc7ae846c95c3659b64c3e48f68777e882abaaa0a223ea09f6d47405784e88e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"OKLab / OKLch palette rotation","cells":[{"id":0,"value":"# OKLab / OKLch palette rotation\n## Rotating a colour palette through a perceptually uniform color space\n\n## Sources and inspiration\n\n[Bjorn Ottesson - A perceptual color space for image processing](https://bottosson.github.io/posts/oklab/)\n\n[Bjorn Ottesson - sRGB Gamut Clipping](https://bottosson.github.io/posts/gamutclipping/)\n\n[Typescript Implementation](https://gist.github.com/Artoria2e5/9c7ba0bcda480b5bc2ae0b0ffe0bfb91)\n\n[OKLab interpolation in Observable](https://observablehq.com/@aras-p/oklab-interpolation-test)\n\n\nAll functions implemented [@coulterg/oklab-oklch-color-functions](https://observablehq.com/@coulterg/oklab-oklch-color-functions)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"viewof chosenColor = Inputs.color({label: \"Find Hex Codes\", value: \"#002f61\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"Some recommended colour palette generators:\n[Leonardo](https://leonardocolor.io/scales.html#), [Colorpicker](http://tristen.ca/hcl-picker/#/hlc/5/0.42/33271A/F7B59D), [Palette Helper](https://gka.github.io/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":265,"value":"viewof paletteInput = Inputs.textarea({\n label: \"Enter your palette (comma separated)\",\n value: `#002f61, #004572, #005981, #006c8d, #007f95, #00919a, #00a39c, #00b599, #00c693, #06d787, #3be675, #77ef63, #a7f74d, #d3fc32, #ffff00`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"#### Transformed palettes can be copied/exported below the visual, or the rotatePalette function can be called elswhere in Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":270,"value":"paletteInputArr = paletteInput\n // split on commas (and any spaces around them)\n .split(/\\s*,\\s*/)\n .map(s =>\n // trim whitespace *then* strip any matching ' or \" at the ends\n s.trim().replace(/^['\"]|['\"]$/g, \"\")\n )\n // drop any empty strings\n .filter(s => s.length > 0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"viewof rotationSpace = Inputs.radio(\n [\"OKLCh Rotation + Scaling\", \"OKLab Rotation\"],\n { label: \"Rotation Space\" ,\n value: 'OKLab Rotation'}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"// viewof scaling = Inputs.radio(['Constant Fractional Chroma', 'Constant Saturation', 'Absolute Chroma', 'Minimum Chroma', 'OKLab Rotation'], \n// {\n// label: 'Choose a Chroma Scaling Option',\n// value: 'Constant Fractional Chroma'\n// })\n\nviewof oklchMode = Inputs.select(\n [\"Fractional Chroma\",\n \"Constant Saturation\",\n \"Absolute Chroma\",\n \"Fractional‑Then‑Absolute\"\n ],\n {\n label: \"OKLCh Scaling Mode\",\n // disable this dropdown outside OKLCh mode\n disabled: rotationSpace !== \"OKLCh Rotation + Scaling\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"viewof clipOKLab = Inputs.toggle(\n { label: \"Enable adaptive gamut‐clipping (OKLab Rotation) - Recommended\", value: true },\n { \n // hide/disable when not in OKLab rotation\n disabled: rotationSpace !== \"OKLab Rotation\" \n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"viewof paletteRotation = Inputs.range([0,360], {\n step: 1,\n value: 0,\n label: \"Rotate Palette (Degrees)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"viewof vividness = Inputs.range([0, 2], {\n step: 0.01,\n value: 1,\n label: \"Vividness ×C\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"viewof contrast = Inputs.range([-1, 1], {\n step: 0.01,\n value: 0,\n label: \"Lightness Contrast (– to +)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"viewof contrastPivot = Inputs.range([0, 1], {\n step: 0.01,\n value: 0.5,\n label: \"Contrast Pivot (L)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"resetCameraButton = {\n const button = html``;\n button.onclick = () => {\n // Reset camera position to the original value (e.g., (0,0,8)).\n window.myCamera.position.set(0, 0, 8);\n // Reset the controls' target as well (so they look at the center).\n window.myControls.target.set(0, 0, 0);\n // Tell the controls to update.\n window.myControls.update();\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"viewof numPlanes = Inputs.range([2,36],{\n step: 1,\n value: 36,\n label: \"Number of Hue Planes\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"viewof alpha = Inputs.range([0,1], {step: 0.05, label: 'Hue Plane Transparency', value: 0.75})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"viewof bgColor = Inputs.color({\n label: \"Swatch Background\",\n value: \"#ffffff\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"## Export palette","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":845,"value":"viewof exportFormat = Inputs.select(\n [\n \"CSV (with #)\",\n \"JS Array\",\n \"CSS Variables\",\n \"Linear-gradient CSS\"\n ],\n { label: \"Export Format\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"## OKLCh gamut boundaries\n\nGiven a hue (in degrees), we know that a corresponding hue plane exists in the Chroma-Lightness plane between (0,0) and (0,1), and a third point, the cusp, at which lightness, L, the maximum chroma, C, for that hue exists. Below the cusp the boundary is a straight line to (0,0); above the cusp the boundary is a smooth curve (coming from the OKLab→sRGB gamma functions) towards (0,1). The plane shapes and cusp lightness/maximum chroma values vary from hue to hue, based on perceptual (human) sensitivity to different hues. \n\nFor example, perception of different yellow colours (hue ~110) have a large chroma range at high lightness, whereas blue colours (hue ~280) have a larger chroma range at lower lightness values. At perceptual lightness above the cusp, yellow rapidly approaches white (the shallow upper boundary) whereas for blue colours, there is a large range of chroma/colours above the cusp.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":561,"value":"hueplanes = FileAttachment(\"HuePlanes.png\").image({width:800})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"The idea of this notebook is to rotate a given colour palette through this perceptually uniform colour space in order to find new palettes with similar utility. Several options are available:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":611,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"view3D = {\n // Pull in scene, camera, renderer, controls from sceneSetup.\n const { scene, camera, renderer, controls } = sceneSetup;\n \n // --- Animation Loop ---\n function animate() {\n requestAnimationFrame(animate);\n controls.update(); // Required when damping is enabled\n renderer.render(scene, camera);\n }\n animate();\n \n // Return the renderer's DOM element so that Observable shows the 3D scene.\n return renderer.domElement;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"rotatedPalette = {\n // Call your reusable function, passing in all the interactive inputs\n return rotatePalette(\n paletteInputArr,\n {\n rotationSpace,\n okLchMode: oklchMode,\n paletteRotation,\n clipOKLab,\n vividness,\n contrast,\n contrastPivot\n }\n );\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"viewof hueForGamut = Inputs.range([0,360], {\n step: 0.1,\n value: 0,\n label: \"GamutHue\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"import {oklab_to_oklch, oklch_to_oklab, linear_srgb_to_oklab, oklab_to_linear_srgb, srgb_to_linear_rgb, srgb_to_linear_srgb, linear_srgb_to_srgb, linear_rgb_to_srgb, parse_color, rgb_as_hex, linear_rgb_as_hex, compute_max_saturation, find_cusp, find_gamut_intersection, clamp, sgn, gamut_clip_preserve_chroma, maximum_chroma_for_lh, maximize_chroma_for_rgb, gamut_clip_adaptive_L0_0_5, parse_hexcode} from \"@coulterg/oklab-oklch-color-functions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":" d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"culori = require(\"culori\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.155.0/build/three.min.js\");\n await require(\"three@0.155.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"OrbitControls = (await import(\"three/examples/jsm/controls/OrbitControls.js\")).OrbitControls;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 2e:"$2d:body"