JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="add-em-here">

    <!-- Added statically - stays with hsl() -->
    <span style="background-color: hsl(60, 75%, 43%)"></span>
    
    <!-- Added dynamically - auto-replaced with rgb() -->
</div>

CSS

.add-em-here span {
        display: inline-block;
        height: 40px; width: 40px;
        border: 2px solid white;
        margin-left: 6px;
}

JavaScript

var hues = [ 172, 178, 184, 190, 196, 202, 208 ];

var outerBlock = $('.add-em-here');

$(document).ready(function() {
    $.each(hues, function(index, backgroundHue) {
        var newSpan = $('<span></span>');
        newSpan.css('background-color', 'hsl('+backgroundHue+', 75%, 43%)');
        outerBlock.append(newSpan);
    });
});