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:
background-color: hsl(0, 100%, 50%);
background-color: hsl(0, 100%, 40%);
background-color: hsl(0, 90%, 40%);
background-color: hsl(0, 80%, 40%);
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:
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.
You may be interested
Houses of the Future: What Every Futuristic House NeedsCarol Gilmore - September 16, 2019
There’s no doubt about technology slowly taking over our everyday lives. What started with a mobile phone has paved way…
The Key Differences between Shared vs Managed WordPress HostingCarol Gilmore - September 14, 2019
Web hosting / WordPress are one of the main reasons for the success of any website. There are different types…
How SSL Works and Why You Should Secure Your Site with HTTPSJessica Connor - September 12, 2019
It's no news that protecting sensitive information is important when using the internet. Email passwords, internet bank logins, and credit…