Lighten or Darken Hex Color in JavaScript

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"
``````