Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Javascript color scale from 0% to 100%, rendering it from red to yellow to green
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);
}
@mlocati

This comment has been minimized.

Copy link
Owner Author

@mlocati mlocati commented Jun 16, 2016

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

output

@Majo1996

This comment has been minimized.

Copy link

@Majo1996 Majo1996 commented Jun 1, 2017

Nice, thank you!

@kishore-indraganti

This comment has been minimized.

Copy link

@kishore-indraganti kishore-indraganti commented Aug 8, 2017

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

@anandbhaskaran

This comment has been minimized.

Copy link

@anandbhaskaran anandbhaskaran commented Nov 9, 2017

Thanks!

@ruaanvds

This comment has been minimized.

Copy link

@ruaanvds ruaanvds commented Feb 15, 2018

@mlocati, thanks for a succinct, clean solution!

@roboriaan

This comment has been minimized.

Copy link

@roboriaan roboriaan commented Feb 14, 2019

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);
        }
@dozzes

This comment has been minimized.

Copy link

@dozzes dozzes commented May 22, 2019

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

@vimtaai

This comment has been minimized.

Copy link

@vimtaai vimtaai commented Oct 19, 2019

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%)`;
}
@ujLion

This comment has been minimized.

Copy link

@ujLion ujLion commented Nov 14, 2019

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

@ujLion

This comment has been minimized.

@vimtaai

This comment has been minimized.

Copy link

@vimtaai vimtaai commented Nov 14, 2019

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 😄

@ujLion

This comment has been minimized.

Copy link

@ujLion ujLion commented Nov 14, 2019

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 😊

@rigogsilva

This comment has been minimized.

Copy link

@rigogsilva rigogsilva commented Dec 19, 2019

Good one!

@rkalways

This comment has been minimized.

Copy link

@rkalways rkalways commented Jan 7, 2020

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

@andyg2

This comment has been minimized.

Copy link

@andyg2 andyg2 commented Jun 21, 2020

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

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

@crepehat

This comment has been minimized.

Copy link

@crepehat crepehat commented Jul 3, 2020

You've made my day. Thankyou.

@afarbman

This comment has been minimized.

Copy link

@afarbman afarbman commented Sep 10, 2020

Thank you very much! awesome gist

@EsraaQandel

This comment has been minimized.

Copy link

@EsraaQandel EsraaQandel commented Dec 27, 2020

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

@aymyo

This comment has been minimized.

Copy link

@aymyo aymyo commented Jan 13, 2021

Exactly what I needed, thank you!

@octameter

This comment has been minimized.

Copy link

@octameter octameter commented Mar 3, 2021

Nice!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment