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


// Lighten
var NewColor = LightenDarkenColor("#F06D06", 20); 

// Darken
var NewColor = LightenDarkenColor("#F06D06", -20); 


Reference URL


  1. Rodney Rehm
    Permalink to comment#

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

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


    after line #63 $(el).css(“background-color”, adjustedColor);
    add line $(el).html(adjustedColor);

  3. 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:

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

  4. 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. 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. Yasin
    Permalink to comment#

    thank you frank

  7. 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. Blah
    Permalink to comment#

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

  9. 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. 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;}

    • Ryan
      Permalink to comment#

      Sorry, didn’t know it’d get cut off. this is the rest:

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.