{"id":24736,"date":"2024-03-09T01:29:04","date_gmt":"2024-03-09T00:29:04","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/descubre-la-magia-del-color-hsl-en-css-para-disenos-web-unicos\/"},"modified":"2024-06-03T17:37:18","modified_gmt":"2024-06-03T16:37:18","slug":"descubre-la-magia-del-color-hsl-en-css-para-disenos-web-unicos","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/","title":{"rendered":"Discover the Magic of HSL Color in CSS for Unique Web Designs"},"content":{"rendered":"<p>The art of web design is constantly and rapidly evolving. As designers or developers, it is essential to stay up to date with the latest trends and tools that allow us to create attractive and functional visual experiences. One of these powerful tools is the HSL color model, which translates not only color theory but also its practice into styling with CSS. In this article, we will delve into how to understand and apply HSL to power our web projects.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#%C2%BFQue_es_el_Modelo_de_Color_HSL\" >What is the HSL Color Model?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#El_Tono_Hue\" >The Hue<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#La_Saturacion_Saturation\" >Saturation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#La_Luminosidad_Lightness\" >Luminosity (Lightness)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#Beneficios_de_Usar_HSL_en_Diseno_Web\" >Benefits of Using HSL in Web Design<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#Facilidad_Para_Crear_Paletas_de_Colores\" >Ease of Creating Color Palettes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#Mejoras_en_la_Accesibilidad\" >Accessibility Improvements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#Manipulacion_Dinamica_de_Colores\" >Dynamic Color Manipulation<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#Aplicando_HSL_en_CSS\" >Applying HSL in CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#Trucos_y_Consejos_para_el_Diseno_con_HSL\" >Tips and Tricks for Designing with HSL<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#Uso_del_Tono_para_Variaciones_de_Color\" >Using Tone for Color Variations<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#Creacion_de_Sombras_y_Tintes\" >Creation of Shadows and Tints<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#Mejorando_la_Interactividad\" >Improving Interactivity<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#Armonizando_la_Interfaz\" >Harmonizing the Interface<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#Transiciones_de_Color_Suaves\" >Smooth Color Transitions<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#Herramientas_y_Recursos_para_Trabajar_con_HSL\" >Tools and Resources for Working with HSL<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nelkodev.com\/en\/blog\/discover-the-magic-of-hsl-color-in-css-for-unique-web-designs\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_el_Modelo_de_Color_HSL\"><\/span>What is the HSL Color Model?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>HSL stands for Hue, Saturation and Lightness respectively. This color model is an alternative to the better known RGB (Red, Green, Blue) and offers a more intuitive way of working with colors for many designers.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"El_Tono_Hue\"><\/span>The Hue<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Speaking in HSL terms, hue represents the pure color itself, without adding whiteness or blackness (tint or shade). It is expressed in degrees, with each value corresponding to a color on the color wheel: 0\u00b0 is red, 120\u00b0 is green, and 240\u00b0 is blue, with all other colors somewhere in between.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"La_Saturacion_Saturation\"><\/span>Saturation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Saturation refers to the intensity or purity of the tone. At its maximum value of 100%, you get the purest color, while reducing it to 0%, you end up with a gray tone (absence of saturation).<\/p>\n<h3><span class=\"ez-toc-section\" id=\"La_Luminosidad_Lightness\"><\/span>Luminosity (Lightness)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Lightness indicates how light or dark a color is. A value of 0% gives us pure black, since there is no light, and a value of 100% gives us pure white, since the light is at maximum. A luminosity 50% would give us the pure tone, according to the established saturation.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Beneficios_de_Usar_HSL_en_Diseno_Web\"><\/span>Benefits of Using HSL in Web Design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Facilidad_Para_Crear_Paletas_de_Colores\"><\/span>Ease of Creating Color Palettes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Since HSL is closer to how humans perceive colors, it is much easier to adjust and match colors based on comparable hues, saturations, and luminosities.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Mejoras_en_la_Accesibilidad\"><\/span>Accessibility Improvements<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Contrast and color clarity are crucial for web accessibility. By adjusting brightness and saturation you can ensure that your site is usable and enjoyable for people with different types of vision.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Manipulacion_Dinamica_de_Colores\"><\/span>Dynamic Color Manipulation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>With JavaScript, it&#039;s easy to dynamically change HSL properties of a color, making it easy to create interactive effects and animations.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Aplicando_HSL_en_CSS\"><\/span>Applying HSL in CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To apply HSL in your projects, you use the function <code>hsl()<\/code> o <code>hsla()<\/code> within the properties related to colors in CSS, where <code>a<\/code> represents the alpha (transparency) of the color. For example:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">body { background-color: hsl(210, 50%, 60%); } h1 { color: hsla(360, 100%, 50%, 0.8); }<\/code><\/pre>\n<p>In the example, the <code>bodysuit<\/code> It has a blue background with a certain luminosity and saturation. He <code>h1<\/code> It is set with a red, fully saturated and semi-transparent color.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Trucos_y_Consejos_para_el_Diseno_con_HSL\"><\/span>Tips and Tricks for Designing with HSL<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Uso_del_Tono_para_Variaciones_de_Color\"><\/span>Using Tone for Color Variations<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To create variations of the same color, you can maintain the lightness and saturation and simply change the hue. This is useful for generating harmonious color schemes.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Creacion_de_Sombras_y_Tintes\"><\/span>Creation of Shadows and Tints<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>By adjusting the luminosity, we can obtain lighter tints or darker shadows of a particular color. If various sections of your site use the same primary color, this allows you to create visual depth and hierarchy.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Mejorando_la_Interactividad\"><\/span>Improving Interactivity<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>It uses HSL to change states of interactive elements such as buttons or links. Changing the saturation or lightness when the user hovers can provide effective feedback.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Armonizando_la_Interfaz\"><\/span>Harmonizing the Interface<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>By maintaining a base tone and playing with saturation and luminosity, you can create harmonized interfaces that are pleasing to the eye and consistent throughout the user experience.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Transiciones_de_Color_Suaves\"><\/span>Smooth Color Transitions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For animations, changes to HSL properties can result in more natural and pleasing color transitions than using RGB or hexadecimal.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Herramientas_y_Recursos_para_Trabajar_con_HSL\"><\/span>Tools and Resources for Working with HSL<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There are several online tools that allow you to select and adjust HSL colors visually. Pages like NelkoDev provide resources and tutorials that can help you better understand how to implement this model in your projects.<\/p>\n<p>If you have specific questions about working with HSL or want to share your project and ask for advice, you can always visit <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">NelkoDev Contact<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The HSL color model is a powerful tool for web designers and developers looking to have finer, more natural control over the color palette of their projects. By understanding and skillfully applying HSL in CSS, you can significantly improve the aesthetics, accessibility, and interactivity of your websites. So don&#039;t be afraid to experiment and see how even small adjustments in hue, saturation, and lightness can radically transform your design.<\/p>\n<p>We hope this guide has given you a clear and practical understanding of working with HSL colors in CSS and that you are ready to apply these techniques to your next web project. Remember, practice makes perfect, so let&#039;s get to code and color the web world with HSL!<\/p>","protected":false},"excerpt":{"rendered":"<p>The art of web design is constantly and rapidly evolving. As designers or developers, it is essential to stay up to date with the latest trends and tools that allow us to create engaging and functional visual experiences. One of these powerful tools is the HSL color model, which translates not only color theory but also [\u2026]<\/p>","protected":false},"author":1,"featured_media":24737,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420],"tags":[205,747,519,172,140,592,1130,1543,60,1542,47],"class_list":["post-24736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-blog","tag-color","tag-css","tag-del","tag-descubre","tag-disenos","tag-hsl","tag-magia","tag-para","tag-unicos","tag-web"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/24736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=24736"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/24736\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/24737"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=24736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=24736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=24736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}