29:null 2a:["$","title",null,{"children":"OKLab & OKLCh Color Functions | Gabe Coulter | Observable"}] 2f:T411,# OKLab & OKLCh Color Functions ## Implementing perceptual color spaces, OKLab and OKLCh in Observable ## Sources and inspiration [Bjorn Ottesson - A perceptual color space for image processing](https://bottosson.github.io/posts/oklab/) [Bjorn Ottesson - sRGB Gamut Clipping](https://bottosson.github.io/posts/gamutclipping/) [Typescript Implementation](https://gist.github.com/Artoria2e5/9c7ba0bcda480b5bc2ae0b0ffe0bfb91) [OKLab interpolation in Observable](https://observablehq.com/@aras-p/oklab-interpolation-test) ## Usage Here is an import statement with all functions defined here: 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"30:T5f8,compute_max_saturation = function(a, b) { let k0, k1, k2, k3, k4, wl, wm, ws; if (-1.88170328 * a - 0.80936493 * b > 1) { k0 = +1.19086277; k1 = +1.76576728; k2 = +0.59662641; k3 = +0.75515197; k4 = +0.56771245; wl = +4.0767416621; wm = -3.3077115913; ws = +0.2309699292; } else if (1.81444104 * a - 1.19445276 * b > 1) { k0 = +0.73956515; k1 = -0.45954404; k2 = +0.08285427; k3 = +0.12541070; k4 = +0.14503204; wl = -1.2684380046; wm = +2.6097574011; ws = -0.3413193965; } else { k0 = +1.35733652; k1 = -0.00915799; k2 = -1.15130210; k3 = -0.50559606; k4 = +0.00692167; wl = -0.0041960863; wm = -0.7034186147; ws = +1.7076147010; } let S = k0 + k1 * a + k2 * b + k3 * a * a + k4 * a * b; let k_l = +0.3963377774 * a + 0.2158037573 * b; let k_m = -0.1055613458 * a - 0.0638541728 * b; let k_s = -0.0894841775 * a - 1.2914855480 * b; { let l_ = 1 + S * k_l; let m_ = 1 + S * k_m; let s_ = 1 + S * k_s; let l = l_ * l_ * l_; let m = m_ * m_ * m_; let s = s_ * s_ * s_; let l_dS = 3 * k_l * l_ * l_; let m_dS = 3 * k_m * m_ * m_; let s_dS = 3 * k_s * s_ * s_; let l_dS2 = 6 * k_l * k_l * l_; let m_dS2 = 6 * k_m * k_m * m_; let s_dS2 = 6 * k_s * k_s * s_; let f = wl * l + wm * m + ws * s; let f1 = wl * l_dS + wm * m_dS + ws * s_dS; let f2 = wl * l_dS2 + wm * m_dS2 + ws * s_dS2; S = S - f * f1 / (f1 * f1 - 0.5 * f * f2); } return S; }31:T8ef,find_gamut_intersection = function(a, b, L1, C1, L0) { let cusp = find_cusp(a, b); let t = 0.0; if ((L1 - L0) * cusp.C - (cusp.L - L0) * C1 <= 0) { t = (cusp.C * L0) / (C1 * cusp.L + cusp.C * (L0 - L1)); } else { t = (cusp.C * (L0 - 1)) / (C1 * (cusp.L - 1) + cusp.C * (L0 - L1)); { let dL = L1 - L0; let dC = C1; let k_l = +0.3963377774 * a + 0.2158037573 * b; let k_m = -0.1055613458 * a - 0.0638541728 * b; let k_s = -0.0894841775 * a - 1.2914855480 * b; let l_dt = dL + dC * k_l; let m_dt = dL + dC * k_m; let s_dt = dL + dC * k_s; { let L = L0 * (1 - t) + t * L1; let C = t * C1; let l_ = L + C * k_l; let m_ = L + C * k_m; let s_ = L + C * k_s; let l = l_ * l_ * l_; let m = m_ * m_ * m_; let s = s_ * s_ * s_; let ldt = 3 * l_dt * l_ * l_; let mdt = 3 * m_dt * m_ * m_; let sdt = 3 * s_dt * s_ * s_; let ldt2 = 6 * l_dt * l_dt * l_; let mdt2 = 6 * m_dt * m_dt * m_; let sdt2 = 6 * s_dt * s_dt * s_; let r = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s - 1; let r1 = 4.0767416621 * ldt - 3.3077115913 * mdt + 0.2309699292 * sdt; let r2 = 4.0767416621 * ldt2 - 3.3077115913 * mdt2 + 0.2309699292 * sdt2; let u_r = r1 / (r1 * r1 - 0.5 * r * r2); let t_r = -r * u_r; let g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s - 1; let g1 = -1.2684380046 * ldt + 2.6097574011 * mdt - 0.3413193965 * sdt; let g2 = -1.2684380046 * ldt2 + 2.6097574011 * mdt2 - 0.3413193965 * sdt2; let u_g = g1 / (g1 * g1 - 0.5 * g * g2); let t_g = -g * u_g; let b = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s - 1; let b1 = -0.0041960863 * ldt - 0.7034186147 * mdt + 1.7076147010 * sdt; let b2 = -0.0041960863 * ldt2 - 0.7034186147 * mdt2 + 1.7076147010 * sdt2; let u_b = b1 / (b1 * b1 - 0.5 * b * b2); let t_b = -b * u_b; t_r = u_r >= 0 ? t_r : Number.MAX_VALUE; t_g = u_g >= 0 ? t_g : Number.MAX_VALUE; t_b = u_b >= 0 ? t_b : Number.MAX_VALUE; t += Math.min(t_r, Math.min(t_g, t_b)); } } } return t; }32:T429,function gamut_clip_adaptive_L0_0_5(rgb, alpha = 0.05) { // rgb: { r, g, b } with values in [0, 1]. // If the rgb is fully within (0,1), return it unchanged. if (rgb.r < 1 && rgb.g < 1 && rgb.b < 1 && rgb.r > 0 && rgb.g > 0 && rgb.b > 0) { return rgb; } // Convert to OKLab. const lab = linear_srgb_to_oklab(rgb); const L = lab.L; const eps = 0.00001; const C = Math.max(eps, Math.sqrt(lab.a * lab.a + lab.b * lab.b)); const a_ = lab.a / C; const b_ = lab.b / C; const Ld = L - 0.5; const e1 = 0.5 + Math.abs(Ld) + alpha * C; // sgn(x) const sgn = x => (x > 0 ? 1 : x < 0 ? -1 : 0); const L0 = 0.5 * (1 + sgn(Ld) * (e1 - Math.sqrt(e1 * e1 - 2 * Math.abs(Ld)))); // Assume find_gamut_intersection(a, b, L, C, L0) is already implemented. const t = find_gamut_intersection(a_, b_, L, C, L0); const L_clipped = L0 * (1 - t) + t * L; const C_clipped = t * C; // Return the clipped color by converting back to sRGB. return oklab_to_linear_srgb({ L: L_clipped, a: C_clipped * a_, b: C_clipped * b_ }); }33:[] 2d:{"id":"bcc37ab1e4088e98","slug":"oklab-oklch-color-functions","title":"OKLab & OKLCh Color Functions","thumbnail":"da2658c5d13132130e03e486217d2efc216487067b77df376ca0f3f336a913eb","access_level":"public","create_time":"$D2025-04-16T11:30:06.903Z","update_time":"$D2025-04-19T22:52:02.687Z","view_time":null,"first_public_time":"$D2025-04-16T11:51:42.139Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d39ebc622977292f","login":"coulterg","name":"Gabe Coulter","avatar_url":"https://avatars-next.observableusercontent.com/9bc7ae846c95c3659b64c3e48f68777e882abaaa0a223ea09f6d47405784e88e","tier":"starter_2024"},"version":69,"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":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"OKLab & OKLCh Color Functions","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"srgb_to_linear_rgb = function(c) {\n return {\n r: c.r <= 0.04045 ? c.r / 12.92 : Math.pow((c.r + 0.055) / 1.055, 2.4),\n g: c.g <= 0.04045 ? c.g / 12.92 : Math.pow((c.g + 0.055) / 1.055, 2.4),\n b: c.b <= 0.04045 ? c.b / 12.92 : Math.pow((c.b + 0.055) / 1.055, 2.4),\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"parse_hexcode = function(hex) {\n let r = parseInt(hex.slice(1, 3), 16) / 255;\n let g = parseInt(hex.slice(3, 5), 16) / 255;\n let b = parseInt(hex.slice(5, 7), 16) / 255;\n\n return srgb_to_linear_rgb({ r: r, g: g, b: b });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"oklab_to_oklch = function(c) {\n // Calculate chroma as the magnitude of the (a, b) vector.\n const C = Math.sqrt(c.a * c.a + c.b * c.b);\n // Calculate hue in degrees. Math.atan2 returns the angle in radians.\n let h = Math.atan2(c.b, c.a) * 180 / Math.PI;\n // Normalize hue to the range [0, 360)\n if (h < 0) h += 360;\n return { L: c.L, C: C, h: h };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"oklch_to_oklab = function(c) {\n const hRad = c.h * Math.PI / 180; // convert hue from degrees to radians\n return {\n L: c.L,\n a: c.C * Math.cos(hRad),\n b: c.C * Math.sin(hRad)\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"linear_srgb_to_oklab = function(c) {\n let l = 0.4122214708 * c.r + 0.5363325363 * c.g + 0.0514459929 * c.b;\n let m = 0.2119034982 * c.r + 0.6806995451 * c.g + 0.1073969566 * c.b;\n let s = 0.0883024619 * c.r + 0.2817188376 * c.g + 0.6299787005 * c.b;\n\n let l_ = Math.cbrt(l);\n let m_ = Math.cbrt(m);\n let s_ = Math.cbrt(s);\n\n return {\n L: 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_,\n a: 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_,\n b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"oklab_to_linear_srgb = function(lab) {\n let l_ = lab.L + 0.3963377774 * lab.a + 0.2158037573 * lab.b;\n let m_ = lab.L - 0.1055613458 * lab.a - 0.0638541728 * lab.b;\n let s_ = lab.L - 0.0894841775 * lab.a - 1.2914855480 * lab.b;\n\n let l = l_ * l_ * l_;\n let m = m_ * m_ * m_;\n let s = s_ * s_ * s_;\n\n return {\n r: +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,\n g: -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,\n b: -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"srgb_to_linear_srgb = function(rgb) {\n function f(x) {\n if (x >= 0.04045) return ((x + 0.055) / (1 + 0.055)) ** 2.4;\n else return x / 12.92;\n }\n return {\n r: f(rgb.r),\n g: f(rgb.g),\n b: f(rgb.b)\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"linear_srgb_to_srgb = function(rgb) {\n function f(x) {\n if (x >= 0.0031308) return 1.055 * (x ** (1.0 / 2.4)) - 0.055;\n else return 12.92 * x;\n }\n return {\n r: f(rgb.r),\n g: f(rgb.g),\n b: f(rgb.b)\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"linear_rgb_to_srgb = function(c) {\n return {\n r: c.r <= 0.0031308 ? 12.92 * c.r : 1.055 * Math.pow(c.r, 1 / 2.4) - 0.055,\n g: c.g <= 0.0031308 ? 12.92 * c.g : 1.055 * Math.pow(c.g, 1 / 2.4) - 0.055,\n b: c.b <= 0.0031308 ? 12.92 * c.b : 1.055 * Math.pow(c.b, 1 / 2.4) - 0.055,\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"parse_color = function(color) {\n color = color.trim().toLowerCase();\n var hex3 = color.match(/^#([0-9a-f]{3})$/i);\n if (hex3) {\n hex3 = hex3[1];\n return {\n r: parseInt(hex3.charAt(0),16)*0x11 / 255.0,\n g: parseInt(hex3.charAt(1),16)*0x11 / 255.0,\n b: parseInt(hex3.charAt(2),16)*0x11 / 255.0\n };\n }\n var hex6 = color.match(/^#([0-9a-f]{6})$/i);\n if (hex6) {\n hex6 = hex6[1];\n return {\n r: parseInt(hex6.substr(0,2),16) / 255.0,\n g: parseInt(hex6.substr(2,2),16) / 255.0,\n b: parseInt(hex6.substr(4,2),16) / 255.0\n };\n }\n return {r:0,g:0,b:0};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"rgb_as_hex = function(c) {\n return \"#\" + [c.r, c.g, c.b].map(x => Math.round(x * 255).toString(16).padStart(2, \"0\")).join(\"\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"linear_rgb_as_hex = function(c) {\n return rgb_as_hex(linear_rgb_to_srgb(c));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"find_cusp = function(a, b) {\n let S_cusp = compute_max_saturation(a, b);\n\n let rgb_at_max = oklab_to_linear_srgb({ L: 1, a: S_cusp * a, b: S_cusp * b });\n let L_cusp = Math.cbrt(1 / Math.max(rgb_at_max.r, rgb_at_max.g, rgb_at_max.b));\n let C_cusp = L_cusp * S_cusp;\n\n return { L: L_cusp, C: C_cusp };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"clamp = function(x, min, max) {\n return x < min ? min : x > max ? max : x;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"sgn = function(x) {\n return +(0 < x) - +(x < 0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"gamut_clip_preserve_chroma = function(rgb) {\n if (rgb.r < 1 && rgb.g < 1 && rgb.b < 1 && rgb.r > 0 && rgb.g > 0 && rgb.b > 0) {\n return rgb;\n }\n\n let lab = linear_srgb_to_oklab(rgb);\n\n let L = lab.L;\n let eps = 0.00001;\n let C = Math.max(eps, Math.sqrt(lab.a * lab.a + lab.b * lab.b));\n let a_ = lab.a / C;\n let b_ = lab.b / C;\n\n let L0 = clamp(L, 0, 1);\n\n let t = find_gamut_intersection(a_, b_, L, C, L0);\n let L_clipped = L0 * (1 - t) + t * L;\n let C_clipped = t * C;\n\n return oklab_to_linear_srgb({ L: L_clipped, a: C_clipped * a_, b: C_clipped * b_ });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"maximum_chroma_for_lh = function(L, h) {\n let a = Math.cos(h*Math.PI/180);\n let b = Math.sin(h*Math.PI/180);\n\n let L0 = clamp(L, 0, 1);\n\n let t = find_gamut_intersection(a, b, L, 1, L0);\n\n return t;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"maximize_chroma_for_rgb = function(rgb) {\n let lab = linear_srgb_to_oklab(rgb);\n\n let L = lab.L;\n let a = lab.a;\n let b = lab.b;\n\n let h = Math.atan2(b, a); // returned in Radians\n let C = maximum_chroma_for_lh(L, h*180/Math.PI); // function expecting degrees\n\n return oklab_to_linear_srgb({ L: L, a: C * Math.cos(h), b: C * Math.sin(h) });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"