Javascript color scale from 0% to 100%, rendering it from red to yellow to green

color-scale.js

// License: MIT - https://opensource.org/licenses/MIT
// Author: Michele Locati <michele@locati.it>
// Source: https://gist.github.com/mlocati/7210513
function perc2color(perc) {
	var r, g, b = 0;
	if(perc < 50) {
		r = 255;
		g = Math.round(5.1 * perc);
	}
	else {
		g = 255;
		r = Math.round(510 - 5.10 * perc);
	}
	var h = r * 0x10000 + g * 0x100 + b * 0x1;
	return '#' + ('000000' + h.toString(16)).slice(-6);
}

Here's the color scale (from 0 to 100):

Nice, thank you!

What if i want to use red to green to blue ?

Thanks!

@mlocati, thanks for a succinct, clean solution!

A slight modification to pass in a min and max.
It should calculate the same as excel does with it's color scales :

function perc2color(perc,min,max) {
            var base = (max - min);

            if (base == 0) { perc = 100; }
            else {
                perc = (perc - min) / base * 100; 
            }
            var r, g, b = 0;
            if (perc < 50) {
                r = 255;
                g = Math.round(5.1 * perc);
            }
            else {
                g = 255;
                r = Math.round(510 - 5.10 * perc);
            }
            var h = r * 0x10000 + g * 0x100 + b * 0x1;
            return '#' + ('000000' + h.toString(16)).slice(-6);
        }

How to draw a rectangle with this gradient color filling in HTML?

A modern solution using HSL colors would be:

function percentageToColor(percentage, maxHue = 120, minHue = 0) {
  const hue = percentage * (maxHue - minHue) + minHue;
  return `hsl(${hue}, 100%, 50%)`;
}

Stating the too obvious: to invert - subtract the input value from 100

There is no license mentioned.
https://opensource.stackexchange.com/questions/1720/what-can-i-assume-if-a-publicly-published-project-has-no-license

There is no license mentioned.
https://opensource.stackexchange.com/questions/1720/what-can-i-assume-if-a-publicly-published-project-has-no-license

Technically, this is not a repo, just a Gist. As for my solution, I consider it Public Domain 😄

There is no license mentioned.
https://opensource.stackexchange.com/questions/1720/what-can-i-assume-if-a-publicly-published-project-has-no-license

Technically, this is not a repo, just a Gist. As for my solution, I consider it Public Domain 😄

Okay cool. This was exactly what I was looking for my project
Thanks 😊

Good one!

Sorry, but how to print it on HTML, anyone please show me a way.

Sorry, but how to print it on HTML, anyone please show me a way.

var color = perc2color(40);
document.body.style.backgroundColor = color;

You've made my day. Thankyou.

Thank you very much! awesome gist

wanna use a different gradient? more flexibility with colors?
Check this example out
http://jsfiddle.net/dj0xmazk/13/

Exactly what I needed, thank you!

Nice!

Can anyone help with the reverse? From green to red (0 - green .... 100 - red)

@aderbas simply call perc2color(100 - yourPercentage)

How did I not think of that? Thank you very much. =)

A PHP version

function percentageToColour($percentage): string
{
    $r = $g = $b = 0;
    if ($percentage < 50) {
        $r = 255;
        $g = round(5.1 * $percentage);
    } else {
        $g = 255;
        $r = round(510 - 5.10 * $percentage);
    }
    $h = $r * 0x10000 + $g * 0x100 + $b * 0x1;
    return '#'.substr(('000000'.dechex($h)), -6);
}

cool thanks

Great! It works well in my project. Thanks.

Nice. Thanks Bro

Tracked a bug down in my own code related to this gist, if perc is not a number, you get NaN in the output. Adding this as a defense and modernising;

function perc2color(perc) {
    let cleanPerc = parseFloat(perc);
    if (isNaN(cleanPerc)) cleanPerc = 0;

    cleanPerc = Math.max(0, Math.min(100, cleanPerc));

    let r = 0, g = 0, b = 0;
    if (cleanPerc < 50) {
        r = 255;
        g = Math.round(5.1 * cleanPerc);
    } else {
        g = 255;
        r = Math.round(510 - 5.10 * cleanPerc);
    }
    
    const h = (r << 16) + (g << 8) + b;
    return '#' + h.toString(16).padStart(6, '0');
}