JSFiddle - React, Tailwind, and code Playground

by ryanbrill

HTML

<div id="gradient"></div>
<div id="preview"></div>

CSS

#gradient {
    width: 400px;
    height: 50px;
    background-image: -webkit-linear-gradient(left, green 0%, blue 50%, red 100%);
    background-image: -moz-linear-gradient(left, green 0%, red 100%);
}

#preview {
    width: 160px;
    height: 40px;
    margin-top: 10px;
    border: 1px solid #ccc;
    color: #fff;
    text-align: center;
    line-height: 40px;
}

JavaScript

var getStepColor = function (colorA, colorB, value) {
    return colorA.map(function (color, i) {
        return (color + value * (colorB[i] - color)) & 255;
    });
};

var gradient = document.querySelector("#gradient");
var preview = document.querySelector("#preview");

//var background = window.getComputedStyle(gradient).getPropertyValue("background");

//console.log(background);

background = $("#gradient").css("background-image");

console.log(background);

var colorStops = [];
var matchColorStops = /,\s*(\w+)\s+(\d+)%/g;
var match;

var humanToHex = {
    "red": [255, 0, 0],
    "green": [0, 128, 0],
    "blue": [0, 0, 255]
};

console.log(matchColorStops.exec(background));

/*while (match = matchColorStops.exec(background)) {
    // If colour is *human-readable*, then
    // substitute it for a RGB value.
    if (humanToHex[match[1]]) {
        match[1] = humanToHex[match[1]];
        console.log(match[1]);
    }
    colorStops.push({
        percentage: match[2],
        color: match[1]
    });
}*/

colorStops.push({
    percentage: 0,
    color: [255,0,0]
});
colorStops.push({
    percentage: 100,
    color: [0,255,0]
});

gradient.addEventListener("mousemove", function (event) {

    var x = event.pageX - gradient.offsetTop;
    var y = event.pageY - gradient.offsetLeft;
    var percentage = (x / this.offsetWidth) * 100;

    var i;
    for (i = 0; i < colorStops.length; i++) {
        if (colorStops[i].percentage > percentage) {
            break;
        };
    }

    var lowerIndex = i == 1 ? 0 : i - 1;
    var upperIndex = lowerIndex + 1;
    var value = x / (gradient.offsetWidth / (colorStops.length - 1)) % 1;

    color = getStepColor(colorStops[lowerIndex].color, colorStops[upperIndex].color, value);

    preview.style.backgroundColor = "rgb(" + color.join() + ")";
    preview.textContent = preview.style.backgroundColor;

});