display-p3CYM spectral mixHello, apcachHello, spectral.jsHello, Color.jsMetbrewer color schemesFabio Crameri’s ColormapsColorcetXKCD painbow color mapNamed CSS colorsOil SlickGrid illusionsUMAP SleepwalkSliced Optimal TransportCanvas path blurBlue FluoriteWalk on Spheres — segments editionWalk on SpheresGraphene Moiré 1.1CMasher color interpolators (#27)Interpolate colors with Catmull-Rom/Cubic/Monotone…?“Perceptually uniform”?Hue blurcmocean color interpolators (#27)Linde–Buzo–Gray RGB Color stipplingAutochromeforcePolarforceAngularcolor2cssCanvas SpiralFrida Kahlo’s paletteHello glitchBlack and white colored castelo
Random Colors
html`${Array.from(
{ length: 120 },
(_, i) =>
html`<div style="width:40px;height:40px; margin:0; display:inline-block;
background: ${randomColor(s, l)};
"></div>`
)}`
s = 0.85 // saturation
l = 0.6 // luminance
randomColor(s, l)
code = `(function() {
var B = ${((Math.sqrt(5) - 1) / 2).toFixed(6)},
seed = Math.random();
return function(s, l) {
return hsl(((++seed * B) % 1) * 360, s, l);
};
/* From FvD 13.37, CSS Color Module Level 3 */
function hsl2rgb(h, m1, m2) {
return (
(h < 60
? m1 + ((m2 - m1) * h) / 60
: h < 180
? m2
: h < 240
? m1 + ((m2 - m1) * (240 - h)) / 60
: m1) * 255
);
}
/* From https://github.com/d3/d3-color/blob/master/src/color.js */
function hsl(h, s, l) {
var m2 = l + (l < 0.5 ? l : 1 - l) * s,
m1 = 2 * l - m2;
return (
"#" +
hex(hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2)) +
hex(hsl2rgb(h, m1, m2)) +
hex(hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2))
);
}
function hex(value) {
return (value < 16 ? "0" : "") + (value | 0).toString(16);
}
})()
`
randomColor = eval(code) // wish I could read the function's source rather than eval'ing it
Terser = require("https://bundle.run/terser@4.0.0")
minified = Terser.minify(`randomColor = ${code}`).code
minified.length
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.
