JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<div class="colors">
    <div class="hh"></div>
<div class="hm"></div>
<div class="hl"></div>
<div class="mh"></div>
<div class="mm"></div>
<div class="ml"></div>
<div class="lh"></div>
<div class="lm"></div>
<div class="ll"></div>
</div>

CSS

.colors div{
    width:100%;
    height:40px;
    margin-top:1px;
}

JavaScript

var ranges = {   
    "h":90,
    "m":50,
    "l":10
}

$(".colors div").each(function(){
    var color = $(this).attr("class");
    var s = ranges[color[0]];
    var b = ranges[color[1]];
    
    $(this).css("background-color", "hsla(00, " + s + "%, " + b + "%, 1)");
})