JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test"></div>

CSS

.test {
            width: 20px;
            height: 20px;
            float:left;
        }

JavaScript

function RGB2Color(r, g, b) {
            return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
        }
function byte2Hex(n)
  {
    var nybHexString = "0123456789ABCDEF";
    return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
  }
        function makeColorGradient(frequency1, frequency2, frequency3, phase1, phase2, phase3, center, width, len) {
            var colors = []
            if(len == undefined)
                len = 50;
            if(center == undefined)
                center = 128;
            if(width == undefined)
                width = 127;

            for(var i = 0; i < len; ++i) {
                var red = Math.sin(frequency1 * i + phase1) * width + center;
                var grn = Math.sin(frequency2 * i + phase2) * width + center;
                var blu = Math.sin(frequency3 * i + phase3) * width + center;
                colors.push(RGB2Color(red, grn, blu));
            }

            return colors;
        }

     

        $(function() {
            center = 128;
            width = 127;
            frequency = 2.4;

            var col = makeColorGradient(frequency, frequency, frequency, 0, 2, 4, center, width,10);
            for(var i = 0; i < col.length; i++) {
                $("#test").append("<div class=test style='background:" + col[i] + ";'></div>");
            }
        })