{"id":1381,"date":"2024-08-01T19:36:09","date_gmt":"2024-08-01T17:36:09","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1381"},"modified":"2024-08-01T19:36:10","modified_gmt":"2024-08-01T17:36:10","slug":"04-colores-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-avanzado\/04-colores-css\/","title":{"rendered":"04. Colores CSS"},"content":{"rendered":"\n

Colores RGBA<\/h2>\n\n\n\n

Los valores de color RGBA<\/strong> son una extensi\u00f3n de los valores de color RGB<\/strong> con un canal alfa, que especifica la opacidad de un color. Un valor de color RGBA<\/strong> se especifica con: rgba(rojo, verde, azul, alfa)<\/em><\/strong>. El par\u00e1metro alfa es un n\u00famero entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).<\/p>\n\n\n\n\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

#p1 {background-color: rgba(255, 0, 0, 0.3);}  \/* red with opacity *\/\n#p2 {background-color: rgba(0, 255, 0, 0.3);}  \/* green with opacity *\/\n#p3 {background-color: rgba(0, 0, 255, 0.3);}  \/* blue with opacity *\/<\/pre>\n\n\n\n
Colores HSL<\/h2>\n\n\n\n
HSL<\/strong> significa Tono<\/strong>, Saturaci\u00f3n<\/strong> y Luminosidad<\/strong>. Un valor de color HSL<\/strong> se especifica con: hsl(tono, saturaci\u00f3n, luminosidad)<\/em><\/strong>.<\/p>\n\n\n\n
    \n
  • Hue (tono)<\/strong>: es un grado en la rueda de colores (de 0 a 360):\n
      \n
    • 0 (o 360) es rojo<\/li>\n\n\n\n
    • 120 es verde<\/li>\n\n\n\n
    • 240 es azul<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • Saturation (saturaci\u00f3n)<\/strong>. es un valor porcentual: 100% es el color completo.<\/li>\n\n\n\n
    • Lightness (luminosidad)<\/strong>: tambi\u00e9n es un porcentaje; 0% es oscuro (negro) y 100% es blanco.<\/li>\n<\/ul>\n\n\n\n
      Ejm<\/strong><\/p>\n\n\n\n
      #p1 {background-color: hsl(120, 100%, 50%);}  \/* green *\/\n#p2 {background-color: hsl(120, 100%, 75%);}  \/* light green *\/\n#p3 {background-color: hsl(120, 100%, 25%);}  \/* dark green *\/\n#p4 {background-color: hsl(120, 60%, 70%);}   \/* pastel green *\/<\/pre>\n\n\n\n
      Colores 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, que especifica la opacidad de un color. Un valor de color HSLA<\/strong> se especifica con: hsla(tono, saturaci\u00f3n, luminosidad, alfa)<\/em><\/strong>, donde el par\u00e1metro alfa define la opacidad. El par\u00e1metro alfa es un n\u00famero entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).<\/p>\n\n\n\n
      Ejm<\/strong><\/p>\n\n\n\n
      #p1 {background-color: hsla(120, 100%, 50%, 0.3);}  \/* green with opacity *\/\n#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  \/* light green with opacity *\/\n#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  \/* dark green with opacity *\/\n#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   \/* pastel green with opacity *\/<\/pre>\n\n\n\n
      Opacidad<\/h2>\n\n\n\n
      La propiedad CSS opacity<\/em> <\/strong>establece la opacidad de todo el elemento (tanto el color de fondo como el texto ser\u00e1n opacos\/transparentes). El valor de la propiedad opacity<\/em><\/strong> debe ser un n\u00famero entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).<\/p>\n\n\n\n
      Ejm<\/strong><\/p>\n\n\n\n
      #p1 {background-color:rgb(255,0,0);opacity:0.6;}  \/* red with opacity *\/\n#p2 {background-color:rgb(0,255,0);opacity:0.6;}  \/* green with opacity *\/\n#p3 {background-color:rgb(0,0,255);opacity:0.6;}  \/* blue with opacity *\/<\/pre>\n","protected":false},"excerpt":{"rendered":"
      Colores RGBA Los valores de color RGBA son una extensi\u00f3n de los valores de color RGB con un canal alfa, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1367,"menu_order":3,"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-1381","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":"Colores RGBA Los valores de color RGBA son una extensi\u00f3n de los valores de color RGB con un canal alfa, […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1381","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=1381"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1381\/revisions"}],"predecessor-version":[{"id":1384,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1381\/revisions\/1384"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1367"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}