JSFiddle - React, Tailwind, and code Playground

by bartek

HTML

<script src="https://raw.github.com/anomal/RainbowVis-JS/master/rainbowvis.js"></script>
<div id="gradient1"></div>
<br>
<div id="gradient2"></div>
<br>
<div id="classname"></div>

JavaScript

var gradientarr = gradient('#2D284F', '#a7a7c1', 3);

function gradient(startColor, endColor, steps) {
    var steps = steps - 1;
    var start = {
        'Hex': startColor,
        'R': parseInt(startColor.slice(1, 3), 16),
        'G': parseInt(startColor.slice(3, 5), 16),
        'B': parseInt(startColor.slice(5, 7), 16)
    }
    var end = {
        'Hex': endColor,
        'R': parseInt(endColor.slice(1, 3), 16),
        'G': parseInt(endColor.slice(3, 5), 16),
        'B': parseInt(endColor.slice(5, 7), 16)
    }
    diffR = end['R'] - start['R'];
    diffG = end['G'] - start['G'];
    diffB = end['B'] - start['B'];

    //stepsHex = new Array();
    stepsR = new Array();
    stepsG = new Array();
    stepsB = new Array();

    var html = '';
    var stepsHex = '';

    for (var i = 0; i <= steps; i++) {
        stepsR[i] = start['R'] + ((diffR / steps) * i);
        stepsG[i] = start['G'] + ((diffG / steps) * i);
        stepsB[i] = start['B'] + ((diffB / steps) * i);

        stepsHex = '#' + Math.round(stepsR[i]).toString(16) + '' + Math.round(stepsG[i]).toString(16) + '' + Math.round(stepsB[i]).toString(16);

        html += '<div style="background-color:' + stepsHex + '; height:10px;"></div>';

        //stepsHex[i] = '#' + Math.round(stepsR[i]).toString(16) + '' + Math.round(stepsG[i]).toString(16) + '' + Math.round(stepsB[i]).toString(16);
    }
    //return stepsHex;
    $("#gradient1").html(html);
}

var numberOfItems = 50;
var rainbow = new Rainbow();
rainbow.setNumberRange(1, numberOfItems);
rainbow.setSpectrum('#2D284F', '#a7a7c1');

var html = '';
var html2 = '';
var j=50;
for (var i = 1; i <= numberOfItems; i++) {
    var hexColour = rainbow.colourAt(j);
    j--;
    html += '#tag_cloud .tagno'+i+' { background-color:#' + hexColour + ';}<br>';
    
    html2 += '#tag_cloud .tagno'+i+':hover { background-color:white; color:#' + hexColour + '; }<br>'
    //html2 += 'tagno'+i+' ';
}

$("#gradient2").html(html);
$("#classname").html(html2);