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() }; }); }