The CSS preprocessors Sass and Less can take any color and darken() or lighten() it by a specific value. But no such ability is built into JavaScript. This function takes colors in hex format (i.e. #F06D06, with or without hash) and lightens or darkens them with a value.
function LightenDarkenColor(col, amt) { var usePound = false; if (col[0] == "#") { col = col.slice(1); usePound = true; } var num = parseInt(col,16); var r = (num >> 16) + amt; if (r > 255) r = 255; else if (r < 0) r = 0; var b = ((num >> 8) & 0x00FF) + amt; if (b > 255) b = 255; else if (b < 0) b = 0; var g = (num & 0x0000FF) + amt; if (g > 255) g = 255; else if (g < 0) g = 0; return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); }Usage
// Lighten var NewColor = LightenDarkenColor("#F06D06", 20); // Darken var NewColor = LightenDarkenColor("#F06D06", -20); Demo
See the Pen
Color Alteration in JavaScript by Chris Coyier (@chriscoyier)
on CodePen.
If you’re interested in programatically working with colors (beyond lighten and darken), have a look at chromath.
or http://chrisasher.com/sassycolours/ for sass colour schemes
Thank you!
I think it will be very useful to add color hex in cells, e.g.:
after line #54 $(this).css(“background”, randColor);
add this line: $(this).html(randColor);
and
after line #63 $(el).css(“background-color”, adjustedColor);
add line $(el).html(adjustedColor);
Does this work with any hex code? I’m using the following:
And I receive the output:
“#a703d”
It appears to be correct if I readd a 0 to the beginning though “#0a703d”
This doesn’t work with any hex color.
I’m using #00baf1 and the returned value when darkening by -20 is #baeb.
Does anyone have a solution for this??
It’s actually
#00beab.I had the same problem with the function returning unusable color values, i fixed it by padding the output string with zeros:
thank you frank
This is awesome! Works very well using with base colors: #2D5C90 and #53acb2 and lightening with a value of 120. Easy to use.
That’s Not css. That’s a Javascript trick to alter CSS.
Hi what must I use to lighten a nutral dark color I don’t wanna use white….please help
You can lighten/darken a color of an element if you combo:
– :after, and
– rgba(val,val,val,transp)
Here’s what I’ve done on my site:
.button{… position:relative;}
.button:hover:after{content:””;display:block;position:absolute;top:0;left:0;background:rgba(255,255,255,.5);}
Sorry, didn’t know it’d get cut off. this is the rest:
background:rgba(255,255,255,.5);
Thanks. Take a look at colorglower.com it outputs lighter and darker versions of a hex color code
Hi! I’m trying to understand the conversion but failing. Could you / anybody explain a little how the bitwise operators are helping in the purpose of lightening the color by the amount given?
Hey Chris,
Love your site. I was making a script to create shades and family names with colors, and I relied heavily on this article.
I just wanted to say that I’ve discovered there’s a typo that’s rather important!
In your code,
b(blue) should actually beg(green).Doing this:
console.log(col, [(num >> 16), (num & 0x0000FF), ((num >> 8) & 0x00FF)]);on line 31 (after num has been assigned) will clearly illustrate that the professed rgb does not match the hex, but the professed “rbg” does.With the Changes from FRANK it worked for me… Thank u
You code have some wrong (some result return such as #004a but need #00004a). I correct something. This code i used:
function LightenDarkenColor(col, amt) {
var usePound = false;
}
function colorToHex(color) {
if (color.substr(0, 1) === ‘#’) {
return color;
}
var digits = /(.*?)rgb((\d+),\s?(\d+),\s?(\d+))/.exec(color);
}
Add .padStart(6, ‘0’) at the end! I was stuck with a bug for like half an hour before I realized there are too few digits in the color string…
lightenDarkenColor(“#137713”, -20) does not work and returns #6300
Thank yoy very much! Very useful to me.
This is a copy of the code originally written by PimpTrizkit on a stackoverflow thread. The updated code the PimpTrizkit has developed since then can be found here: https://github.com/PimpTrizkit/PJs/wiki/12.-Shade,-Blend-and-Convert-a-Web-Color-(pSBC.js)#stackoverflow-archive-begin
Reader Robert Joosen says this is what worked for him:
This yielded better results for me too. Thanks!
Today you can use
filter: brightnesshttps://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness
Whoa! Hey! I see my code here in this article. I remember writing that, coolio! Actually its quiet embarrassing because that was the worst version. Anyhow, yes this version of the function is wrought with issues. As many of you have noticed. Also, like James pointed out in a comment above, this is the Original Post/Question. Not the Answer/Solution. The Original Question was posted on stackoverflow a long time ago, here:-> StackOverflow
Scroll on down to the Accepted Answer and you can see what this project has become. The current version is quite versatile and fast. With several nice features. Works quite amazingly. Impossible to read tho.
But yes, the current version is apart of a small library of other JavaScript functions I have also made. Available here:-> GitHub
When was this article written? Because I’m surprised Mr. Coyier used the old/bad version, the current version has been posted …on the same page… for several years now.
PT
ps. On second thought, maybe because its impossible to read, lol
No incidence at all on the functionality but it’s RGB, not RBG, please invert the variables names :)
Simplified version: