How can I programmatically lighten or darken a hex color in JavaScript?

Programmatically Lighten or Darken a hex color (or RGB, and blend colors)

This function allows you to programmatically lighten or darken a hex color by a specific amount. Simply pass in a string like "3F6D2A" for the color and an integer amt for the amount to lighten or darken. To darken, pass in a negative number (e.g., -20).

<code class="js">function LightenDarkenColor(col, amt) {
  col = parseInt(col, 16);
  return (((col & 0x0000FF) + amt) | ((((col >> 8) & 0x00FF) + amt) << 8) | (((col >> 16) + amt) << 16)).toString(16);
}

// TEST
console.log(LightenDarkenColor("3F6D2A", 40));

Other versions

Faster and smaller version:

<code class="js">function LightenDarkenColor(col, amt) {
  var num = parseInt(col, 16);
  var r = (num >> 16) + amt;
  var b = ((num >> 8) & 0x00FF) + amt;
  var g = (num & 0x0000FF) + amt;
  var newColor = g | (b << 8) | (r << 16);
  return newColor.toString(16);
}

// TEST
console.log(LightenDarkenColor("3F6D2A", -40));

Handle colors with or without the # prefix:

<code class="js">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);
}</code>

Usage

To use the function, simply pass in the hex color string you want to lighten or darken, and the amount you want to adjust it by. For example, the following code lightens the color "3F6D2A" by 40:

<code class="js">const lightenedColor = LightenDarkenColor("3F6D2A", 40);
console.log(`Lightened Color: ${lightenedColor}`); // Output: 7FADEE</code>

Performance

The performance of this function is optimized for speed and size. It uses bitwise operations to manipulate the color values, which makes it extremely fast. The function is also very small, making it ideal for use in small applications.

Features

• Lightens or darkens a hex color by a specified amount
• Handles colors with or without the # prefix
• Adjusts for improper color values
• Returns a hex string representation of the new color

Limitations

• The function does not convert the color to HSL to properly lighten or darken the color. Therefore, the results may differ from functions that use HSL.

The above is the detailed content of How can I programmatically lighten or darken a hex color in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!