Javascript генерирует случайный цвет с эквивалентной подсветкой

Question

Я работаю с библиотекой charts.js, и мне нужно генерировать случайные цвета для единиц диаграмм.

Я видел много ответов о том, как это сделать. Например, Anatoliy answer.

Дело в том, что мне нужен эквивалентный цвет выделения (или любой близкий цвет), чтобы выполнить поле «highlight» графика. Js Pie.

{ 
    value: 300, 
    color: "#30a5ff", 
    highlight: "#62b9fb", 
    label: "Label" 
}, 

Answer 1

Вот один из многих возможных решений. Получите случайный оттенок между 0 и 360. Используйте 100% насыщенность и 50% -ную яркость для основного цвета и 100% насыщенность и, скажем, 80% -ную яркость для цвета «подсветки». Просто нажмите кнопку «Выполнить фрагмент кода», чтобы увидеть более случайные цвета.

document.querySelectorAll('div').forEach(d => { 
 
    const hue = Math.floor(Math.random() * 360); 
 
    d.style.backgroundColor = `hsl(${hue}, 100%, 50%)`; 
 
    d.style.borderColor  = `hsl(${hue}, 100%, 80%)`; 
 
});

div { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    border: solid 5px; 
 
    margin: 5px; 
 
}

<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>