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

Usage

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

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

Demo

Reference URL

Comments

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

    and

    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:
    “#a703d”

    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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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