Chartjs-Javascript generate random color with equivalent highlight

by

2đź‘Ť

âś…

Here’s one among many possible solutions. Get a random hue between 0 and 360. Use 100% saturation and 50% lightness for the main color, and 100% saturation and, say, 80% lightness for the “highlight” color. Just keep clicking the “Run code snippet” button to see more random colors.

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>

Leave a comment