2f:T50f,OklabHcl = function(clr) { // Returns a function compatible with d3color.lch. // It accepts either three arguments (L, c, and h) // or a d3color convertible to RGB. The L and c // components are scaled to be similar to the scale // of d3color.lch which is [0,100], [0,250ish], and // [0,360]. let L, c, h; if (arguments.length == 3) { h = arguments[0]; c = arguments[1]; L = arguments[2]; } else { // Convert from a d3color via Oklab. // Apply a gamma correction because near-black colors // take up too much of the color space. (Is this a problem // with Oklab or the linear-to-regular RGB transformation?) let lab = Oklab(clr); L = (lab.l / 6.341251097100847) * 100; L = (Math.max(L, 0) / 100) ** 2.5 * 100; // GAMMA CORRECTION ^ c = Math.sqrt(lab.a ** 2 + lab.b ** 2) * 100; h = (Math.atan2(lab.b, lab.a) * 180) / Math.PI; } return { l: L, c: c, h: h, rgb: function() { // Convert to RGB via Oklab. let l = (this.l / 100) ** (1 / 2.5) * 100; // GAMMA CORRECTION ^ let lab = Oklab( (l / 100) * 6.341251097100847, (this.c * Math.cos((this.h * Math.PI) / 180)) / 100, (this.c * Math.sin((this.h * Math.PI) / 180)) / 100 ); return lab.rgb(); } }; }30:T9a2,Oklab = function(c) { // Oklab is a non-standard color space designed by Björn Ottosson // and described at https://bottosson.github.io/posts/oklab/. It // is easily convertible to/from RGB. This method returns a function // compatible with e.g. d3color.rgb. It accepts either three arguments // (L, a, and b) or a d3color convertible to RGB. let linear_srgb_to_oklab = function(c) { let l = 0.4121656120 * c.r + 0.5362752080 * c.g + 0.0514575653 * c.b; let m = 0.2118591070 * c.r + 0.6807189584 * c.g + 0.1074065790 * c.b; let s = 0.0883097947 * c.r + 0.2818474174 * c.g + 0.6302613616 * c.b; let l_ = Math.cbrt(l); let m_ = Math.cbrt(m); let s_ = Math.cbrt(s); return { l: 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_, a: 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_, b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_ }; }; let oklab_to_linear_srgb = function(lab) { let l_ = lab.l + 0.3963377774 * lab.a + 0.2158037573 * lab.b; let m_ = lab.l - 0.1055613458 * lab.a - 0.0638541728 * lab.b; let s_ = lab.l - 0.0894841775 * lab.a - 1.2914855480 * lab.b; let l = l_ * l_ * l_; let m = m_ * m_ * m_; let s = s_ * s_ * s_; return { r: +4.0767245293 * l - 3.3072168827 * m + 0.2307590544 * s, g: -1.2681437731 * l + 2.6093323231 * m - 0.3411344290 * s, b: -0.0041119885 * l - 0.7034763098 * m + 1.7068625689 * s }; }; let srgb_to_linear_srgb = function(rgb) { function f(x) { if (x >= 0.04045) return ((x + 0.055) / (1 + 0.055)) ** 2.4; else return x / 12.92; } return { r: f(rgb.r / 255) * 255, g: f(rgb.g / 255) * 255, b: f(rgb.b / 255) * 255 }; }; let linear_srgb_to_srgb = function(rgb) { function f(x) { if (x >= 0.0031308) return (1.055 * x) ** (1.0 / 2.4 - 0.055); else return 12.92 * x; } return { r: f(rgb.r / 255) * 255, g: f(rgb.g / 255) * 255, b: f(rgb.b / 255) * 255 }; }; let Lab; if (arguments.length == 3) { Lab = { l: arguments[0], a: arguments[1], b: arguments[2] }; } else { // Convert from a d3color via RGB. c = d3color.rgb(c); Lab = linear_srgb_to_oklab(srgb_to_linear_srgb(c)); } Lab.rgb = function() { let rgb = linear_srgb_to_srgb(oklab_to_linear_srgb(this)); return d3color.rgb(rgb.r, rgb.g, rgb.b); }; return Lab; }31:Tb24,interpolate_colors = function(c1, c2, v, colorspace) { // Interpolate to find a color between c1, c2 at v in the range [0, 1]. // If v == 0, c1 is returned. If v == 1, c2 is returned. // // c1 and c2 are d3colors or anything convertible to a d3color via d3color.lch. // See: https://github.com/d3/d3-color#color // // A d3.color is returned. Use .toString() or .formatHex() to get a CSS color. // // A linear-like interpolation is performed in a Lch color space. // The interpolation is non-linear when c1 or c2 is grey because hue is // undefined or unstable in that part of the color space, and for black/white // chroma (saturation) is too. // Convert to Lch space using the color space provide as the argument // to this function. It can be d3color.lch (CIELCHab) or OklabLch. c1 = colorspace(c1); c2 = colorspace(c2); if (c1 == null || !isFinite(c1.l)) throw "First color did not convert: " + JSON.stringify(c1); if (c2 == null || !isFinite(c2.l)) throw "Second color did not convert: " + JSON.stringify(c2); // Check that we're going the right way in hues. // We might want to go through 360 instead of // going back toward zero. d3color's lch function // returns NaN hues at black and white, so check for // that first. if (isFinite(c1.h) && isFinite(c2.h)) { if (c2.h < c1.h - 180) c2.h += 360; if (c1.h < c2.h - 180) c1.h += 360; } // We always interpolate the lightness and chroma value linearly // between the two colors. But when chroma is zero (or very close), // at black, graey, and white, hue has no meaning. The hue value // for these colors may be NaN or meaningless, and an interpolation // with NaN or a meaningless hue will be meaningless. In these // cases we interpolate the hue differently --- we either keep the // hue value of the color that is not at chroma=0 or we pull the // hue toward the color that is not very close to chroma=0 so that // we ease into a hue that is less meaningful. function min(a, b) { return a > b ? b : a; } function max(a, b) { return a < b ? b : a; } function safepow(a, b) { return isFinite(b) ? a ** b : 0; } let vh = v; if (c1.c < 10) vh = v ** max(c1.c / 10, 0); if (c2.c < 10) vh = safepow(v, 1 / max(c2.c / 10, 0)); // Interpolate and re-form a new color instance. let c = colorspace( (1 - vh) * c1.h + vh * c2.h, (1 - v) * c1.c + v * c2.c, (1 - v) * c1.l + v * c2.l ); // Clamp chroma very near the poles (only) since at the poles // of the bi-cone that makes up the Lch space the chroma // and hue values have no meaning and may convert to RGB // outside of the RGB space, resulting in poor clamping // later. var ll = Math.max(0, Math.min(c.l, 100 - c.l, 100)); c.c = Math.min(c.c, 1000 * Math.tan((ll / 100) * Math.PI)); return c; }32:Tb4c,make_scale = function(c1, c2, n) { // Construct a scale of d3color instances. //let colorspace = d3color.hcl; let colorspace = OklabHcl; let scale = []; for (var v = 0; v < n; v++) scale.push(interpolate_colors(c1, c2, v / (n - 1), colorspace)); // When forming a scale between two highly saturated colors, the colors // on the scale may leave the RGB gamut. Although we could clamp the // R, G, B components of the colors on the scale, this would result in // non-perceptually-uniform jumps on the scale. Better is to revise the // scale holistically. The easiest way to keep colors in the RGB gamut // is to reduce the chroma value of the colors. We'll reduce the chroma // values at the intermediate points on the scale smoothly, if necessary, // and, in case a large change in necessary, we'll also revise the end // points on the scale and return different colors than the user asked // for. We'll iterate a few times until we get to the minimal change that // keeps the scale within the RGB gamut using a bisection-like algorithm. let ctr = 0, s = 0, smin = 0, smax = .33; while (ctr < 10 && smin < .99 * smax) { let all_in_rgb_gamut = scale.map(reduce_chroma).filter(in_rgb_gamut).length == scale.length; if (all_in_rgb_gamut) { if (s == 0) break; smax = s; s = (s + smin) / 2; } else { smin = s; s = (s + smax) / 2; } ctr++; } scale = scale.map(reduce_chroma); function reduce_chroma(c, i) { // Reduce the chroma value of c by s when in the middle of the generated // color scale (0 < i < n) and not at the ends, because we assume the caller // has given ends that are in the RGB gamut, unless s is large and then // also reduce the color at the ends. let t = (i / (n - 1)) * Math.PI; let sm = .2; // 1 means do not modify end colors, 0 means shift all colors evenly including ends let s0 = s < sm ? 0 : s - sm; let s1 = Math.min(s, sm) * Math.sin(t); return colorspace(c.h, Math.max(0, c.c * (1 - (s0 + s1))), c.l); } function in_rgb_gamut(c) { var crgb = c.rgb(); return !( crgb.r < 0 || crgb.r > 255 || crgb.g < 0 || crgb.g > 255 || crgb.b < 0 || crgb.b > 255 ); } // Return a data structure with helpful info besides the interpolated // color. function bwcontrast(c) { // Choose a light or dark grey for a foreground // text color that will be most contrast-y with // then given color. c = d3color.hcl(c.rgb()); if (c.l < 60) c.l = 93; // white-ish else c.l = 7; // black-ish c.c /= 5; // reduce chroma (saturation) return c; } return scale.map(c => { return { color: c, rgb: c.rgb(), css: c.rgb().toString(), hex: c.rgb().formatHex(), fg_contrast_color: bwcontrast(c).toString() }; }); }33:[] 2d:{"title":"Comparing interpolation in different color spaces","cells":[{"id":0,"value":"title = md`# Comparing interpolation in different color spaces\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"viewof c1 = color(\"#0000ff\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"viewof c2 = color(\"#ffff00\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"rgb_txt = md`Linear Interpolation from ${c1} to ${c2} through **RGB** color space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"rgb_col = showInterpolation(examplecolors, rgb)","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"hcl_txt = md`Linear Interpolation from ${c1} to ${c2} through **HCL** color space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"hcl_col = showInterpolation(examplecolors, hcl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"lab_txt = md`Linear Interpolation from ${c1} to ${c2} through **LAB** color space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"lab_col = showInterpolation(examplecolors, lab)","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"hsl_txt = md`Linear Interpolation from ${c1} to ${c2} through **HSL** color space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"hsl_col = showInterpolation(examplecolors, hsl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"comments = md`RGB is mostly-blue to mostly-yellow, with sort of a muddy color in between. HCL goes through pink and orange. LAB through purple. And, HSL through bright blue to bright green. \n\nThis is perhaps because blue and yellow are quite \"far\" away from each other in any color space. But how you walk between them is different based on the colorspace, with different strengths and weaknesses.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"pi_txt = md`**Perceptual Interpolation** from ${c1} to ${c2} through **OKLABHCL** color space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"pi_col = show_scale(make_scale(c1, c2, 30))","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"pi_com = md`With perceptual interpolation in OKLABHCL color space, the transition colors appear to be in between the blended colors (e.g. not passing through a warmer color than either original color)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`## Beware of dark colors\n\nFor example, is dark blue mostly blue? Or mostly dark? Different color spaces will interpret this differently which will affect how they interpolate.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"dark_example_colors = ['#001942', '#ffd800']","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"md`Walk from ${dark_example_colors[0]} to ${dark_example_colors[1]} through **RGB** color space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"showInterpolation(dark_example_colors, rgb)","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"md`Walk from ${dark_example_colors[0]} to ${dark_example_colors[1]} through **HCL** color space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"showInterpolation(dark_example_colors, hcl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"md`Walk from ${dark_example_colors[0]} to ${dark_example_colors[1]} through **LAB** color space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"showInterpolation(dark_example_colors, lab)","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"md`Walk from ${dark_example_colors[0]} to ${dark_example_colors[1]} through **HSL** color space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"showInterpolation(dark_example_colors, hsl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"md`Walk from ${dark_example_colors[0]} to ${dark_example_colors[1]} through **OKLABHCL** color space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"show_scale(make_scale(\"#001942\", \"#ffd800\", 30))","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`## Try it yourself\n***\n\nChoose two colors below.\n\nCheck out [Google's color picker](https://www.google.com/search?ei=wOF4Ws_GHeSkjwTkn5GAAg&q=color+picker) or [Paletton](http://paletton.com/#uid=10q0u0kllllaFw0g0qFqFg0w0aF) if you want help finding interesting colors.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"colors = ['#4cffe7', '#8e2962']","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`Walk from ${colors[0]} to ${colors[1]} through **RGB** color space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"showInterpolation(colors, rgb)","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"md`Walk from ${colors[0]} to ${colors[1]} through **HCL** color space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"showInterpolation(colors, hcl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"md`Walk from ${colors[0]} to ${colors[1]} through **LAB** color space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"showInterpolation(colors, lab)","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`Walk from ${colors[0]} to ${colors[1]} through **HSL** color space`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"showInterpolation(colors, hsl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"show_scale(make_scale(\"#4cffe7\", \"#8e2962\", 30))","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`## The end. \n\nHelper code below`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"examplecolors = [c1, c2]","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"hcl = d3.interpolateHcl","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"lab = d3.interpolateLab","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"rgb = d3.interpolateRgb","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"hsl = d3.interpolateHsl","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"showInterpolation = function(colorRange,interpolator){\n const svg = d3.select(DOM.svg(width * count, height));\n \n const color = d3.scaleLinear().range(colorRange).interpolate(interpolator)\n \n svg.append(\"g\")\n .selectAll(\"rect\")\n .data(data)\n .enter().append(\"rect\")\n .attr(\"x\", d => width * d * count)\n .attr(\"y\", d => 0)\n .attr(\"fill\", d => color(d))\n .attr(\"height\", height)\n .attr(\"width\", width);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"height = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"width = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"count = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"data=d3.range(0,1,1/count)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"d3color = require(\"d3-color\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"show_scale = function (scale, opacity) {\n let table = DOM.element(\"div\");\n scale.forEach((c) => {\n let cell = DOM.element(\"span\");\n table.appendChild(cell);\n cell.setAttribute(\n \"style\",\n \"display: inline-block; opacity: \" +\n opacity +\n \"%\" +\n \";background-color: \" +\n c.css +\n \"; color: \" +\n c.fg_contrast_color +\n \"; padding: 5.5em 10px 6px 10px; font-size: 25%; font-family: var(--monospace, mono, monospace);\"\n );\n //cell.appendChild(DOM.text(c.hex.replace(/#/, \"\")));\n });\n table.style.cursor = \"pointer\";\n table.onclick = () => {\n navigator.clipboard.writeText(JSON.stringify(scale.map((d) => d.hex)));\n };\n return table;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"import { color } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}