{"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, que especifica la opacidad de un color. Un valor de color RGBA se especifica con: rgba(rojo, verde, azul, alfa). El par\u00e1metro alfa es un n\u00famero entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).<\/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, que especifica la opacidad de un color. Un valor de color RGBA se especifica con: rgba(rojo, verde, azul, alfa). El par\u00e1metro alfa es un n\u00famero entre 0,0 (totalmente transparente) y 1,0 (totalmente opaco).","_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}]}}