{"id":1444,"date":"2024-05-22T18:02:56","date_gmt":"2024-05-22T18:02:56","guid":{"rendered":"https:\/\/orpot.com\/blog\/?p=1444"},"modified":"2024-05-22T18:02:56","modified_gmt":"2024-05-22T18:02:56","slug":"css-colores","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/css-colores\/","title":{"rendered":"CSS: Colores"},"content":{"rendered":"<header class=\"article-header\">\n<p class=\"title\"><span style=\"font-size: 16px;\">Por defecto, una p\u00e1gina HTML se muestra en los navegadores web de manera bastante aburrida en cuanto a los colores utilizados.<\/span><\/p>\n<\/header>\n<article class=\"article-content\">Tenemos un fondo blanco, color negro y enlaces azules. Eso es todo.<\/p>\n<p>En el ejemplo anterior, usamos la regla CSS<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">p {\r\n\u00a0 color: red;\r\n}<\/pre>\n<p>Intuitivamente sabes que esto aplica el color rojo a las etiquetas p.<\/p>\n<p>Antes de adentrarnos en temas m\u00e1s complejos de CSS, hablemos un poco m\u00e1s sobre los colores.<\/p>\n<p>Trabajar\u00e1s con colores todo el tiempo.<\/p>\n<p>Las dos propiedades principales que usar\u00e1s son color y background-color.<\/p>\n<p>Ambas aceptan un valor de color, que puede estar en diferentes formas.<\/p>\n<p>Colores nombrados<br \/>\nPrimero, tenemos palabras clave CSS que definen colores.<\/p>\n<p>\u00a1Tenemos muchos! Como blanco, negro, rojo, azul, amarillo, pero tambi\u00e9n otros m\u00e1s sofisticados como darkviolet, floralwhite, forestgreen.<\/p>\n<p>En mi blog, tengo este art\u00edculo https:\/\/flaviocopes.com\/rgb-color-codes\/ con la lista completa de colores y conversiones entre nombres, RGB y notaciones hexadecimales.<\/p>\n<p>RGB y RGBa (rgb() \/ rgba())<br \/>\nLos colores nombrados no son la \u00fanica opci\u00f3n.<\/p>\n<p>Puedes usar rgb() para calcular un color a partir de su c\u00f3digo de color RGB, que establece el color basado en sus partes de rojo-verde-azul que van de 0 a 255:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">p {\r\n\u00a0 color: rgb(255, 255, 255); \/* blanco *\/\r\n\u00a0 background-color: rgb(0, 0, 0); \/* negro *\/\r\n}<\/pre>\n<p>rgba() te permite agregar el canal alfa para introducir una parte transparente, por lo que la imagen puede ser transl\u00facida. Eso puede ser un n\u00famero de 0 a 1:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">p {\r\n\u00a0 background-color: rgba(0, 0, 0, 0.5);\r\n}<\/pre>\n<h3>Notaci\u00f3n hexadecimal (#nnnnnn)<\/h3>\n<p>Otra opci\u00f3n com\u00fanmente utilizada es expresar las partes RGB de los colores en notaci\u00f3n hexadecimal, que est\u00e1 compuesta por 3 bloques.<\/p>\n<p>Negro, que es rgb(0,0,0) en RGB se expresa como #000000 . Podemos abreviar los 2 n\u00fameros en cada par a 1 si son iguales, por lo que se convierte en #000 .<\/p>\n<p>Blanco, rgb(255,255,255) puede expresarse como #ffffff o #fff.<\/p>\n<p>La notaci\u00f3n hexadecimal permite expresar un n\u00famero de 0 a 255 en solo 2 d\u00edgitos ya que pueden ir de 0 a \u00ab15\u00bb (f).<\/p>\n<p>Puedes ver una calculadora aqu\u00ed.<\/p>\n<p>Podemos agregar el canal alfa para admitir transparencia u opacidad agregando 1 o 2 d\u00edgitos m\u00e1s al final, por ejemplo, #00000033. No todos los navegadores admiten la notaci\u00f3n abreviada, por lo que usa los 6 d\u00edgitos para expresar la parte RGB.<\/p>\n<p>Tambi\u00e9n tenemos otras notaciones, pero creo que esas son las m\u00e1s comunes que debes conocer.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Por defecto, una p\u00e1gina HTML se muestra en los navegadores web de manera bastante aburrida&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[181,178],"tags":[],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1444"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=1444"}],"version-history":[{"count":1,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1444\/revisions"}],"predecessor-version":[{"id":1445,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1444\/revisions\/1445"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=1444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=1444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=1444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}