Implementing colors in web design is one of the most important factors in achieving a pleasing aesthetic and an effective user interface. In recent years, thanks to advances in web standards, it has become easier to choose and apply colors accurately. One of the ways to do this is through the use of HLS (Hue, Lightness, Saturation) notation in cascading style sheets (CSS).
What is HLS in CSS?
Before we dive into how to use HLS in CSS, it's essential to understand what it is and how it works. HLS is a color model that defines a color space in terms of its components hue (the color type), lightness (the lightness or darkness), and saturation (the intensity of the color). For example, in a red color, the hue would be "red", the lightness would determine how close it is to white or black, and the saturation would determine how vibrant that red is.
HLS Color Syntax in CSS
To use HLS in CSS, you simply define the color using the hsl() o hsla() (the latter includes transparency, using a fourth parameter for alpha). For example:
.red-section { background-color: hsl(0, 100%, 50%); /* Pure red */ } .translucent-red-section { background-color: hsla(0, 100%, 50%, 0.5); /* Pure red with 50% transparency */ }The first number (0) corresponds to the hue (hue) and is a degree on the color wheel, the second (100%) is the saturation, and the third (50%) is the lightness. The fourth number in hsla() (0.5) is the opacity.
Advantages of Using HLS in Web Design
Easy Color Adjustment
One of the main advantages of using the HLS model is the ability to adjust colors very precisely and intuitively, especially when you are experimenting with different color combinations in the design phase.
Creating Color Variants and Themes
HLS is exceptionally useful for creating consistent color palettes and variations of the same shade. By increasing or decreasing the lightness or saturation, the designer can quickly obtain different shades of a base color without deviating from the original harmony.
Compatibility and Support in Browsers
Support for HLS notation is broad across modern browsers, ensuring layouts look consistent across different platforms and devices.
Practical Implementation of HLS in Web Projects
Defining a Base Color Palette
First, we define a base color palette using HLS. We select the primary and secondary colors that we want for our project and define them in the style sheet.
:root { --primary-color: hsl(220, 90%, 55%); --secondary-color: hsl(10, 80%, 65%); }Applying the Color Palette on Elements
With the color palette defined, we can easily apply it to different elements within the HTML, taking advantage of CSS variables.
header { background-color: var(--primary-color); } button.alert { background-color: var(--secondary-color); }Dynamic Settings with JavaScript
A powerful point of HLS is that it can be dynamically adjusted with JavaScript. It is possible to write functions that, for example, adjust the brightness of a color when you hover over an element:
let button = document.querySelector('.dynamic-button'); button.addEventListener('mouseover', () => { button.style.backgroundColor = 'hsl(220, 90%, 70%)'; // Lighter }); button.addEventListener('mouseout', () => { button.style.backgroundColor = 'hsl(220, 90%, 55%)'; // Original color });Using HLS to Develop Responsive Designs
By controlling colors using HLS, it's also easier to create responsive layouts that adapt their colors to the environment (for example, darker for a night theme and lighter for daytime) using media queries in CSS:
@media (prefers-color-scheme: dark) { body { background-color: hsl(0, 0%, 95%); /* Lighter for dark backgrounds */ } }Working with HLS on Real Projects
To see how all this is applied in a real project, visit NelkoDev's Portfolio where I have applied these concepts live. Colors adjust dynamically and maintain visual consistency across different pages and components.
Tips and Best Practices
- Experiment with Online Tools: Use online tools to select and adjust HLS colors before implementing them in your code.
- Optimize for Accessibility: Make sure there is enough contrast between colors to make them accessible to all users.
- Use CSS Variables: CSS variables can store HLS colors and easily reuse them.
Conclusion
HLS in CSS is a powerful tool that every web designer and developer should know and use. Its ability to intuitively adjust colors and its practical applications in responsive and dynamic design make it indispensable for creating effective color palettes.
For more information on web development and design topics, be sure to visit and subscribe to my blog. If you have questions or want to discuss how to implement HLS in your own projects, feel free to contact me. Color is a language in itself, and HLS gives you the vocabulary to master it in the world of web design.
English 
Spanish