JSFiddle - React, Tailwind, and code Playground

by jessuni

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/chroma.min.js"></script>

JavaScript

length = 10
colors = chroma.scale(['#ff0000','#00ff00', '#0000ff']).mode('lch').colors(length)


for (var i=0; i < length; i++) {
  let div = document.createElement('div')
  const color = chroma(colors[i]).desaturate(1)
  div.style.backgroundColor = color
  div.textContent= `${color.luminance().toFixed(2)}  ${color}`
  div.style.height = '20px'
  div.style.width = '200px'
  
  document.body.append(div)
}