color: hsla(50, 80%, 20%, 0.5);
background-color: hsl(120, 100%, 50%);
HSL and HSLA are supported in most browsers except IE8 and below. You can set the third luminosity parameter to change how bright or dark your color should be.
Unfortunately, we don’t always have the luxury of working in HSL. While you may be able to set an individual HSL color, the browser ultimately converts it to RGB. In addition, RGB is generally easier to use and you probably have colors already defined in that format.
There are various algorithms to change color luminosity. Many convert RGB to HSL then back again which is a fairly convoluted calculation for client-side scripting. Therefore, I’ve written a quick and simple cross-browser solution in JavaScript. ColorLuminance accepts two parameters:
- hex — a hex color value such as “#abc” or “#123456” (the hash is optional)
- lum — the luminosity factor, i.e. -0.1 is 10% darker, 0.2 is 20% lighter, etc.
function ColorLuminance(hex, lum) {
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;
// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i*2,2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00"+c).substr(c.length);
}
return rgb;
}
In essence, the first three lines clean the string and expand 3-digit hex codes to a full 6-digit representation.
The loop extracts the red, green and blue values in turn, converts them to decimal, applies the luminosity factor, and converts them back to hexadecimal. Examples:
ColorLuminance("#69c", 0); // returns "#6699cc"
ColorLuminance("6699CC", 0.2); // "#7ab8f5" - 20% lighter
ColorLuminance("69C", -0.5); // "#334d66" - 50% darker
ColorLuminance("000", 1); // "#000000" - true black cannot be made lighter!
Please view the demonstration page
; the color gradient is generating using a series of 100 div
elements with slightly lighter backgrounds.
I hope you find it useful. I’ll be using the function in another demonstration coming soon on SitePoint…
Frequently Asked Questions (FAQs) about JavaScript Color Manipulation
How can I use JavaScript to generate a lighter or darker color?
To generate a lighter or darker color using JavaScript, you can use the HSL (Hue, Saturation, Lightness) color model. First, convert your color from RGB or HEX to HSL. Then, adjust the lightness value to make the color lighter or darker. Finally, convert the color back to RGB or HEX. This process can be done using built-in JavaScript functions or external libraries.
What is the HSL color model?
The HSL color model stands for Hue, Saturation, and Lightness. It’s a cylindrical-coordinate representation of colors. Hue represents the type of color, saturation represents the intensity of the color, and lightness represents how light or dark the color is. It’s often used in color manipulation because it allows for easy adjustment of the color’s lightness.
How can I convert a HEX color to HSL in JavaScript?
To convert a HEX color to HSL in JavaScript, you first need to convert the HEX color to RGB. Then, you can convert the RGB color to HSL using mathematical formulas. There are also many online tools and JavaScript libraries available that can do this conversion for you.
How can I blend colors in JavaScript?
Blending colors in JavaScript can be done by averaging the RGB values of the two colors. This can be done using the formula (color1 + color2) / 2
. There are also many JavaScript libraries available that provide functions for blending colors.
Can I darken a color without converting it to HSL?
Yes, you can darken a color without converting it to HSL by decreasing the RGB values. However, this method may not always produce the desired results, as it can alter the hue and saturation of the color. Converting to HSL allows for more precise control over the color’s lightness.
How can I adjust the saturation of a color in JavaScript?
To adjust the saturation of a color in JavaScript, you need to convert the color to the HSL model. Then, you can adjust the saturation value. Finally, convert the color back to RGB or HEX.
What are some good JavaScript libraries for color manipulation?
There are many good JavaScript libraries for color manipulation, including Color.js, TinyColor, and Chroma.js. These libraries provide functions for converting between color models, adjusting color values, blending colors, and more.
How can I convert an HSL color to HEX in JavaScript?
To convert an HSL color to HEX in JavaScript, you first need to convert the HSL color to RGB. Then, you can convert the RGB color to HEX using mathematical formulas. There are also many online tools and JavaScript libraries available that can do this conversion for you.
Can I use JavaScript to generate a random color?
Yes, you can use JavaScript to generate a random color. This can be done by generating random values for the red, green, and blue components of an RGB color.
How can I use JavaScript to create a gradient effect?
To create a gradient effect in JavaScript, you can generate a series of colors that gradually transition from one color to another. This can be done by incrementally adjusting the RGB or HSL values of the starting color. There are also many JavaScript libraries available that provide functions for creating gradients.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.