JSFiddle - React, Tailwind, and code Playground

by Sam_Butler

HTML

<p><span class="pct">25%</span></p>
<p><span class="pct">100%</span></p>

CSS

#block {
    width: 200px;
    height: 200px;
    background-color: #c0c0c0;
}

JavaScript

function getColorForPercentage(pct) {
    pct /= 100;

    var percentColors = [
            { pct: 0.01, color: { r: 0xdd, g: 0x51, b: 0x4c } },
            { pct: 0.25, color: { r: 0xfa, g: 0xa7, b: 0x32 } },
            { pct: 1.0, color: { r: 0x00, g: 0xcc, b: 0x00 }} ];

    for (var i = 0; i < percentColors.length; i++) {
        if (pct <= percentColors[i].pct) {
            var lower = percentColors[i - 1] || { pct: 0.1, color: { r: 0x0, g: 0x00, b: 0 } };
            var upper = percentColors[i];
            var range = upper.pct - lower.pct;
            var rangePct = (pct - lower.pct) / range;
            var pctLower = 1 - rangePct;
            var pctUpper = rangePct;
            var color = {
                r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
                g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
                b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
            };
            return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
        }
    }
}

$('.pct').each(function() {
    $(this).attr('style','color:'+ getColorForPercentage(parseFloat($(this).text())) +';');
});