Lighten or Darken Hex Color in JavaScript

October 19, 2021 - 2 minutes read

Sometimes we need to programatically lighten or darken a given hex color in JavaScript.

The following snippet does just that:

const newShade = (hexColor, magnitude) => {
    hexColor = hexColor.replace(`#`, ``);
    if (hexColor.length === 6) {
        const decimalColor = parseInt(hexColor, 16);
        let r = (decimalColor >> 16) + magnitude;
        r > 255 && (r = 255);
        r < 0 && (r = 0);
        let g = (decimalColor & 0x0000ff) + magnitude;
        g > 255 && (g = 255);
        g < 0 && (g = 0);
        let b = ((decimalColor >> 8) & 0x00ff) + magnitude;
        b > 255 && (b = 255);
        b < 0 && (b = 0);
        return `#${(g | (b << 8) | (r << 16)).toString(16)}`;
    } else {
        return hexColor;
    }
};

This newShade function accepts two parameters: hexColor and magnitude.

The hexColor parameter is the hex color to lighten or darken. It doesn’t need to be preceded by a hashtag, but it can be. However, all hex values must be exactly six letters in length.

For example, #ffffff and ffffff are valid first parameters, but #fff is an invalid value for hexColor.

The other parameter, magnitude, is an integer value which represents the magnitude by which hexColor should be lightened or darkened.

We can lighten a color using newShade by passing in a positive value for magnitude:

const lighterColor = newShade(`#000000`, 50); // Returns "#323232"

And by passing in a negative integer, we can darken the given color:

const lighterColor = newShade(`#ffffff`, -50); // Returns "#cdcdcd"

Conclusion

I hope you found this snippet useful!

Working with bitwise operators in JavaScript can be a bit of a challenge, but there is a useful operator lookup tool that you can use as a reference.

Link to this section Conclusion

Conclusion