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

  14. User Avatar
    Anil
    Permalink to comment#

    With the Changes from FRANK it worked for me… Thank u

Leave 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