Published
Edited
Sep 29, 2022
Importers
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
/**
* Gets the random color.
*
* @param {number | [number, number]} [lightness=1] The lightness should be between a number between 0 and 1.0 or an interval [0, 1.0]
* @returns {string} Hex Code
*/
function getRandomColor(lightness) {
let l = (lightness = lightness === undefined ? [0, 1] : lightness);

if (Array.isArray(l)) {
let [min, max] = l;
max = clamp(0, max, 1);
min = clamp(0, min, 1);

l = [min, max];
} else {
l = clamp(0, l, 1);
}

return culori.formatHex(
culori.random("oklch", {
l
})
);
}
Insert cell
/**
* Gets a random contrasting color.
*
* @param {string | Culori Color object} color The color to compare
* @param {number} [minContrast=4.5] The minimum WCAG contrast
* @param {number} [maxTries=200] The maximum tries
* @returns {string} Hex Code
*/
function getRandomContrastColor(color, minContrast = 4.5, maxTries = 200) {
if (maxTries <= 0) return;

const randomColor = culori.random("oklch");
const contrast = culori.wcagContrast(color, randomColor);

if (contrast >= minContrast) return culori.formatHex(randomColor);

return getRandomContrastColor(color, minContrast, maxTries - 1);
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more