{"id":1211,"date":"2024-07-31T12:09:01","date_gmt":"2024-07-31T10:09:01","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1211"},"modified":"2024-07-31T12:09:03","modified_gmt":"2024-07-31T10:09:03","slug":"09-colores-css-hsl","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/09-colores-css-hsl\/","title":{"rendered":"09. Colores CSS HSL"},"content":{"rendered":"\n

HSL<\/strong> significa tono<\/strong>, saturaci\u00f3n<\/strong> y luminosidad<\/strong> (hue<\/strong>, saturation<\/strong>, y lightness<\/strong>.)<\/p>\n\n\n\n\n\n\n\n

hsl(hue<\/em>, saturation<\/em>, lightness<\/em>)<\/pre>\n\n\n\n
El tono<\/strong> es un grado en la rueda de colores de 0 a 360. 0 es rojo, 120 es verde y 240 es azul. La saturaci\u00f3n<\/strong> es un valor porcentual, 0 % significa un tono de gris y 100 % es el color completo. La luminosidad<\/strong> tambi\u00e9n es un porcentaje, el 0 % es negro, el 50 % no es ni claro ni oscuro, el 100 % es blanco.<\/p>\n\n\n\n
Saturaci\u00f3n<\/h2>\n\n\n\n
La saturaci\u00f3n<\/strong> se puede describir como la intensidad de un color.<\/p>\n\n\n\n
    \n
  • 100% es color puro, sin tonos de gris.<\/li>\n\n\n\n
  • 50% es 50% gris, pero a\u00fan se puede ver el color.<\/li>\n\n\n\n
  • 0% es completamente gris, ya no se puede ver el color.<\/li>\n<\/ul>\n\n\n\n
    Luminosidad<\/h2>\n\n\n\n
    La luminosidad<\/strong> de un color se puede describir como la cantidad de luz que desea darle al color, donde 0 % significa que no hay luz (negro), 50 % significa 50 % luz (ni oscuro ni claro) 100 % significa luminosidad total<\/strong> (blanco).<\/p>\n\n\n\n
    Tonos de gris<\/h2>\n\n\n\n
    Los 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
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>
    <html>
    <body><\/p>\n\n\n\n
    <h1>Shades of gray<\/h1><\/p>\n\n\n\n
    <p>With HSL, shades of gray are made by setting the saturation to 0%, and adjusting the lightness from 0% to 100%:<\/p><\/p>\n\n\n\n
    <h2 style=\u00bbbackground-color:hsl(0, 0%, 0%);\u00bb>hsl(0, 0%, 0%)<\/h2>
    <h2 style=\u00bbbackground-color:hsl(0, 0%, 24%);\u00bb>hsl(0, 0%, 24%)<\/h2>
    <h2 style=\u00bbbackground-color:hsl(0, 0%, 47%);\u00bb>hsl(0, 0%, 47%)<\/h2>
    <h2 style=\u00bbbackground-color:hsl(0, 0%, 71%);\u00bb>hsl(0, 0%, 71%)<\/h2>
    <h2 style=\u00bbbackground-color:hsl(0, 0%, 94%);\u00bb>hsl(0, 0%, 94%)<\/h2>
    <h2 style=\u00bbbackground-color:hsl(0, 0%, 100%);\u00bb>hsl(0, 0%, 100%)<\/h2><\/p>\n\n\n\n
    <\/body>
    <\/html><\/p>\n\n\n\n
    Valores HSLA<\/h2>\n\n\n\n
    Los valores de color HSLA<\/strong> son una extensi\u00f3n de los valores de color HSL<\/strong> con un canal alfa<\/strong>, que especifica la opacidad<\/strong> de un color. Un valor de color HSLA<\/strong> se especifica con:<\/p>\n\n\n\n
    hsla(hue,<\/em> saturation<\/em>, lightness, alpha<\/em>)<\/pre>\n\n\n\n
    El par\u00e1metro alfa<\/strong> es un n\u00famero entre 0.0 (totalmente transparente) y 1.0 (nada transparente):<\/p>\n","protected":false},"excerpt":{"rendered":"
    HSL significa tono, saturaci\u00f3n y luminosidad (hue, saturation, y lightness.)<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1211","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":"HSL significa tono, saturaci\u00f3n y luminosidad (hue, saturation, y lightness.)","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1211","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=1211"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1211\/revisions"}],"predecessor-version":[{"id":1212,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1211\/revisions\/1212"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}