{"id":122,"date":"2024-05-21T08:47:25","date_gmt":"2024-05-21T06:47:25","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=122"},"modified":"2024-05-21T08:47:26","modified_gmt":"2024-05-21T06:47:26","slug":"14-colores-html-hsl-y-hsla","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/14-colores-html-hsl-y-hsla\/","title":{"rendered":"14. Colores HTML HSL y HSLA"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">En <strong>HTML<\/strong>, un color se puede especificar usando <strong>tono<\/strong>, <strong>saturaci\u00f3n<\/strong> y <strong>luminosidad<\/strong> (<strong>HSL<\/strong>) en la forma:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">hsl (tono, saturaci\u00f3n, luminosidad)<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">El <strong>tono<\/strong> es un grado en la rueda de colores de 0 a 360. 0 es rojo, 120 es verde y 240 es azul.&nbsp;La <strong>saturaci\u00f3n<\/strong> es un valor porcentual, 0 % significa un tono de gris y 100 % es el color completo.&nbsp;La <strong>luminosidad<\/strong> tambi\u00e9n es un valor porcentual, 0 % es negro y 100 % es blanco.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"299\" src=\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/05\/Colores-1.png\" alt=\"\" class=\"wp-image-123\" srcset=\"https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Colores-1.png 710w, https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Colores-1-300x126.png 300w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Saturaci\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La <strong>saturaci\u00f3n<\/strong> se puede describir como la intensidad de un color. 100% es color puro, sin tonos de gris. 50% es 50% gris, pero a\u00fan se puede ver el color. 0% es completamente gris, ya no se puede ver el color.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"705\" height=\"304\" src=\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/05\/Colores-2.png\" alt=\"\" class=\"wp-image-124\" srcset=\"https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Colores-2.png 705w, https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Colores-2-300x129.png 300w\" sizes=\"auto, (max-width: 705px) 100vw, 705px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Brillo \/ luminosidad<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La <strong>luminosidad<\/strong> de un color se puede describir como la cantidad de luz que deseas darle al color, donde 0 % significa que no hay luz (negro), 50 % significa 50 % luz (ni oscuro ni claro) 100 % significa luminosidad total (blanco).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"713\" height=\"293\" src=\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/05\/Colores-3.png\" alt=\"\" class=\"wp-image-125\" srcset=\"https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Colores-3.png 713w, https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Colores-3-300x123.png 300w\" sizes=\"auto, (max-width: 713px) 100vw, 713px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Tonos de gris<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Los <strong>tonos de gris<\/strong> a menudo se definen estableciendo el tono y la saturaci\u00f3n en 0, y ajustando la luminosidad de 0 % a 100 % para obtener tonos m\u00e1s oscuros\/claros:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"298\" src=\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/05\/Colores-4.png\" alt=\"\" class=\"wp-image-126\" srcset=\"https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Colores-4.png 710w, https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Colores-4-300x126.png 300w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Valores de color HSLA<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Los valores de color <strong>HSLA<\/strong> son una extensi\u00f3n de los valores de color <strong>HSL<\/strong> con un <strong>canal alfa<\/strong>, que especifica la <strong>opacidad<\/strong> de un color. Un valor de color <strong>HSLA<\/strong> se especifica con:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">hsla(tono, saturaci\u00f3n, luminosidad, alfa)<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">El par\u00e1metro <strong>alfa<\/strong> es un n\u00famero entre 0.0 (totalmente transparente) y 1.0 (nada transparente):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"737\" height=\"291\" src=\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/05\/Colores-5.png\" alt=\"\" class=\"wp-image-127\" srcset=\"https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Colores-5.png 737w, https:\/\/sutilweb.eu\/wp-content\/uploads\/2024\/05\/Colores-5-300x118.png 300w\" sizes=\"auto, (max-width: 737px) 100vw, 737px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>En HTML, un color se puede especificar usando tono, saturaci\u00f3n y luminosidad (HSL) en la forma: hsl (tono, saturaci\u00f3n, luminosidad) El tono&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":13,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-122","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En HTML, un color se puede especificar usando tono, saturaci\u00f3n y luminosidad (HSL) en la forma: hsl (tono, saturaci\u00f3n, luminosidad) El tono...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=122"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/122\/revisions"}],"predecessor-version":[{"id":128,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/122\/revisions\/128"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}