Basic Color Theory for Web Designers using the hsl() function

Color is a fundamentally important component of all visual design and user experience, whether it be for print or digital media on the web. Color can add visual interest, excitement, as well as be used functionally to indicate different features of an application or draw attention to important information. While color choices and combinations are often subject to matters of taste, there are a variety of tools, techniques and principles that can better help one make informed choices with regard to color. This post will give an overview of working with the hsl() function to select colors, and why it is often a better choice than alternative methods.

Creating different tones of a primary color

While hexadecimal values are commonly used to indicate color, there are a variety of other options, such as rgb() and hsl() values. Standing for hue, saturation and lightness, hsl() is particularly useful for creating different shades of a single color.

The hsl() function takes three values, the first being for hue. Hue is typically what people really mean when they say “color”, as it indicates the primary shade based on its dominant wavelength on the color spectrum, excluding factors such as intensity or lightness. Hue is indicated as a number from 0 to 360, as each hue can be viewed as a point or degree on the color wheel.

The second value in the hsl() function is for saturation, which indicates the amount of gray in the color, given as a percentage from 0% to 100%. A value of 100% would be fully saturated with no gray, and 0% would have no saturation, appearing as a shade of gray.

The last value is for lightness, or the amount of white in a color, ranging from 0% to 100%, with 100% appearing as fully white, and 0% appearing as black. 50% would be the color not affected by any amounts of lightness.

With this information, it is easy to create different shades or tones of a given color, just by experimenting with different saturation and lightness values.

As an example, we can take the hsl() settings for the color red, which is hsl(0, 100%, 50%);:

By adjusting saturation and lightness, we can create different shades of the same color, while maintaining its original hue:

.box:nth-child(1) {
background-color: hsl(0, 100%, 50%);
}
.box:nth-child(2) {
background-color: hsl(0, 100%, 40%);
}
.box:nth-child(3) {
background-color: hsl(0, 90%, 40%);
}
.box:nth-child(4) {
background-color: hsl(0, 80%, 40%);
}
.box:nth-child(5) {
background-color: hsl(0, 70%, 30%);
}

 

One useful tool for getting different tones of a primary color is the monochrome web app by Brent Jackson. Given a primary color in hexadecimal or hsl() format, monochrome will provide 10 subsidiary shades of the color to match it. This is great for either generating subsidiary tones of color, or to exclusively use as a monochromatic color palette for an entire web project.

 

What makes this project even more useful is that it will generate a CSS file containing CSS variables for each color in the palette, making it easy to instantly add these colors to your project:

Conclusion

Color is a powerful part of the design process, and the hsl() function is often a much more flexible way to experiment with colors in a meaningful and intuitive way. It’s often much easier to get a shade of the color you want than by inputting random hexadecimal values, and can lead to making more informed choices when creating a design system for your project.

For more information on design or current web trends, or to learn about mobile app development or web design services in the Los Angeles area, consult an expert at Sunlight Media LLC.