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

Sandy Getzky
June 25, 2018
217 Views

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.

You may be interested

Fitbit Bands – Not Just A Stylish And Overpriced Pedometer!
Tech Updates
8 views
Tech Updates
8 views

Fitbit Bands – Not Just A Stylish And Overpriced Pedometer!

Jasmine Williams - December 18, 2018

Fitbit has become a byword for fitness bands. The name is beloved and iconic but to a newcomer, it might…

How to Maintain Quality in Influencer Marketing
Online World
48 views
Online World
48 views

How to Maintain Quality in Influencer Marketing

Catherine Park - December 14, 2018

Influencer marketing is here to stay. While the concept has been around for eons, it only started gaining popularity in…

Game Changing Business Innovations in 2019
Online World
51 views
Online World
51 views

Game Changing Business Innovations in 2019

Jasmine Williams - December 14, 2018

Regardless of your industry, your business environment has undoubtedly evolved dramatically over the years thanks to constant innovations and developments.…