Javascript生成随机颜色，具有同等亮点

问题描述：

我正在使用charts.js库，我需要为图表单元生成随机颜色。Javascript生成随机颜色，具有同等亮点

我看到了很多关于如何这样做的答案。例如Anatoliy answer。

事情是，我需要它等价的高亮颜色以及（或任何接近的颜色）来实现charts.js Pie的'highlight'字段。

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

如果否决，请至少提供一个解释。我认为这是使用charts.js时非常常见的情况。 – Jacob

原始颜色和高光颜色之间的关系是什么？色彩补充？只有两种随机不同的颜色？相同的色调，但更黑/更亮？ ... –

正如我写的，任何接近的颜色都会很好，明亮的会是完美的。 – Jacob

答

这是许多可能的解决方案之一。获得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>

Javascript生成随机颜色，具有同等亮点

相关推荐