Published
Edited
Jan 15, 2022
4 stars
rgbToHSL = ([r, g, b]) => {
// Normalized Values
let nR = r/255;
let nG = g/255;
let nB = b/255;
let min = Math.min(nR, nG, nB);
let max = Math.max(nR, nG, nB);
let value = max;
let chroma = max - min;
let lightness = (min + max)/2;
let hue = max == 0 ? 0 :
max == nR ? (nG - nB) / chroma :
max == nG ? 2 + (nB - nR) / chroma:
max == nB ? 4 + (nR - nG) / chroma : 0;
let sat = max == 0 ? 0 :
lightness < 0.5 ? chroma/value : chroma/(2 - 2 * lightness);
return [60 * hue, sat * 100, lightness * 100];
}
endColor = rgbToHSL([parseInt(end[1] + end[2], 16), parseInt(end[3] + end[4], 16), parseInt(end[5] + end[6], 16)])
startColor = rgbToHSL([parseInt(start[1] + start[2], 16), parseInt(start[3] + start[4], 16), parseInt(start[5] + start[6], 16)])
interpolate = (startColor, endColor, divs = 1) => {
let hs = subdivs(startColor[0], endColor[0], divs);
let ss = subdivs(startColor[1], endColor[1], divs);
let ls = subdivs(startColor[2], endColor[2], divs);
return hs.map((h, idx) => [h, ss[idx], ls[idx]]);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
