JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<h2>Interpolate using RGB</h2>
<div id='blockOcolor1'></div>
<h2>Interpolate using HSL</h2>
<div id='blockOcolor2'></div>

CSS

div {
    width:400px;
    height:300px;
}

JavaScript

var FTG = {};
var sliceSpans = [[1, 3], [3, 5], [5]];
var slicer = Function.apply.bind(String.prototype.slice);

FTG.interpolate = function (ca, cb, mix, useHSL) {
    var aChans = FTG.getColors(ca);
    var bChans = FTG.getColors(cb);

    if (useHSL) {
        aChans = FTG.toHSL(aChans);
        bChans = FTG.toHSL(bChans);

        // We must remap the start/end point so that we always
        // interpolate a distance <= 180 (the shortest path
        // between two angles)
        
        var deltaAngle = bChans[0] - aChans[0];

        if (deltaAngle > 180) {
            bChans[0] -= 360;
        } else if (deltaAngle < -180) {
            aChans[0] -= 360;
        }
    }

    var resultChans = aChans.map(function(e, i, a) {
        return FTG.lerp(e, this[i], mix);
    }, bChans);

    if (useHSL) {
        // We have to remap any angles outside of
        // 0 <= angle < 360

        if (resultChans[0] < 0) {
            resultChans[0] += 360;
        } else if (resultChans[0] >= 360) {
            resultChans[0] -= 360;
        }

        resultChans = FTG.toRGB(resultChans);
    } else {
        resultChans = resultChans.map(Math.floor);
    }

    return '#' + resultChans.map(FTG.hexOf).join('');
};

FTG.getColors = function(colString) {
    return sliceSpans.map(slicer.bind(null, colString)).map(FTG.decOf);
};

FTG.toHSL = function (rgb) {
    var R = rgb[0] / 255;
    var G = rgb[1] / 255;
    var B = rgb[2] / 255;
    var maxCol = Math.max(R, G, B);
    var minCol = Math.min(R, G, B);
    var delta = maxCol - minCol;

    var hue = 0;
    var saturation = 0;
    var lightness = (maxCol + minCol) / 2;

    if (lightness === 0) return [0, 0, 0];

    if (delta > 0) {
        if (maxCol === R) {
            hue = (G - B) / delta % 6;
            if (hue < 0) hue += 6; //correcto for js's modulo
        } else if(maxCol === G) {
            hue = (B - R) / delta + 2;
        } else {
            hue = (R - G) / delta + 4;
        }
        hue *= 60;
 ...