Lighten / Darken Color

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

Comments

  1. User Avatar
    Rodney Rehm
    Permalink to comment#

    If you’re interested in programatically working with colors (beyond lighten and darken), have a look at chromath.

  2. User Avatar
    Sprint
    Permalink to comment#

    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);

  3. User Avatar
    Nathan Jessen
    Permalink to comment#

    Does this work with any hex code? I’m using the following:

    var NewColor = LightenDarkenColor("#006633", 10);
    

    And I receive the output:
    “#a703d”

    It appears to be correct if I readd a 0 to the beginning though “#0a703d”

  4. User Avatar
    Ryan
    Permalink to comment#

    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??

  5. User Avatar
    Frank
    Permalink to comment#

    I had the same problem with the function returning unusable color values, i fixed it by padding the output string with zeros:

    return (usePound?"#":"") + String("000000" + (g | (b << 8) | (r << 16)).toString(16)).slice(-6);
    
  6. User Avatar
    Yasin
    Permalink to comment#

    thank you frank

  7. User Avatar
    AJ
    Permalink to comment#

    This is awesome! Works very well using with base colors: #2D5C90 and #53acb2 and lightening with a value of 120. Easy to use.

  8. User Avatar
    Blah
    Permalink to comment#

    That’s Not css. That’s a Javascript trick to alter CSS.

  9. User Avatar
    Rachel shika
    Permalink to comment#

    Hi what must I use to lighten a nutral dark color I don’t wanna use white….please help

  10. User Avatar
    Ryan
    Permalink to comment#

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

    • User Avatar
      Ryan
      Permalink to comment#

      Sorry, didn’t know it’d get cut off. this is the rest:
      background:rgba(255,255,255,.5);

  11. User Avatar
    niko
    Permalink to comment#

    Thanks. Take a look at colorglower.com it outputs lighter and darker versions of a hex color code

  12. User Avatar
    Arihant

    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?

  13. User Avatar
    Kyle Holmberg
    Permalink to comment#

    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 be g (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.

    View post on imgur.com

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag