Grow your CSS skills. Land your dream job.

Last updated on:

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. If you’re interested in programatically working with colors (beyond lighten and darken), have a look at chromath.

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

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

<div>Example code</div>

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".