{"id":18790,"date":"2024-04-25T13:00:00","date_gmt":"2024-04-25T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=18790"},"modified":"2024-04-26T14:41:28","modified_gmt":"2024-04-26T12:41:28","slug":"colores-html","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/colores-html\/","title":{"rendered":"Colores HTML"},"content":{"rendered":"\n

Como en todas las \u00e1reas del dise\u00f1o, el color tiene un papel fundamental. Comprenderlo y usar los modos de color adecuados es crucial para un resultado profesional. En este art\u00edculo abordamos los colores HTML<\/strong>, qu\u00e9 tipos hay, c\u00f3mo declararlos… En este campo, m\u00e1s que nunca, la creatividad y la tecnolog\u00eda se encuentran para hacer del dise\u00f1o gr\u00e1fico<\/a> algo m\u00e1s que una simple imagen visual. Vamos con ello.<\/p>\n\n\n\n

C\u00f3mo declarar colores HTML<\/h2>\n\n\n\n

Para declarar colores en HTML, recurrimos a diferentes c\u00f3digos de color que pueden entender los navegadores<\/strong> para identificar las caracter\u00edsticas de cada tono.<\/p>\n\n\n\n

Lo primero, antes de la declaraci\u00f3n de colores en HTML, tenemos que entender c\u00f3mo se muestra el color en una pantalla<\/strong>: Siguen el modelo RGB<\/strong>. Las siglas se corresponden a los colores primarios usados: Rojo (red), verde (green) y azul (blue). Es la forma en que una pantalla nos muestra los colores, es entendiendo cada p\u00edxel con un valor num\u00e9rico de estos tres canales<\/strong>.<\/p>\n\n\n\n

Con estos tres colores se crea toda la paleta que es capaz de mostrar un monitor. Cada p\u00edxel estar\u00e1 compuesto de tres peque\u00f1as luces, cada una de uno de estos colores primarios. Estas luces son capaces de brillar con diferente intensidad. La manera en que se iluminan determina el color con que percibimos ese pixel.<\/p>\n\n\n\n

Por ejemplo, si los tres est\u00e1n totalmente apagados, el p\u00edxel ser\u00e1 negro; si est\u00e1n totalmente iluminados lo veremos blanco; si el rojo est\u00e1 totalmente iluminado, el verde al 50% y el azul apagado, el color resultante ser\u00e1 el naranja. Visualmente, percibimos los colores RGB mezclados y vemos el resultado de esa suma de luz, pero, si observas la pantalla bajo una lupa, podr\u00e1s ver los tres canales separados en cada pixel. Seguramente ya lo hayas visto alguna vez, al consultar el m\u00f3vil bajo la lluvia una peque\u00f1a gota hace efecto lupa y se aprecian los colores primarios.<\/p>\n\n\n

\n
\"Colores
Zoom sobre pantalla. La primera imagen corresponde a una captura, las otras dos son fotos haciendo zoom hasta apreciarse las luces RGB<\/figcaption><\/figure>\n<\/div>\n\n\n

Aunque el valor de salida se defina siempre bajo los valores RGB, los valores de entrada los podemos definir bajo varios modos diferentes. Veamos los m\u00e1s comunes.<\/p>\n\n\n\n

\n
\"Efecto
Efecto lupa en p\u00edxeles RGB<\/figcaption><\/figure>\n\n\n\n
\"P\u00edxel
Colores RGB bajo gotas de agua<\/figcaption><\/figure>\n<\/figure>\n\n\n\n

Hexadecimal<\/h3>\n\n\n\n

Qu\u00e9 es hexadecimal<\/h4>\n\n\n\n

Podemos decir que el valor de entrada \u00abnatural\u00bb para web es el formato hexadecimal. Ya sabemos que el valor de salida va a ser en qu\u00e9 medida se iluminan esas tres lucecitas de colores. El sistema hexadecimal es una notaci\u00f3n para registrar, directamente, esos valores. <\/p>\n\n\n\n

Color hexadecimal en HTML<\/h4>\n\n\n\n

Se define con # y un c\u00f3digo de 6 d\u00edgitos<\/strong>. Los dos primeros indican la luminosidad del rojo, los dos del medio los del verde y los dos \u00faltimos indican c\u00f3mo se ilumina el azul. La numeraci\u00f3n m\u00e1s baja es el 0, increment\u00e1ndose hasta el 9. Una vez llegado este, la notaci\u00f3n contin\u00faa con letras, comenzando con la a y terminando con f, que ser\u00eda el valor m\u00e1s alto. Es decir, la escala ser\u00eda:<\/p>\n\n\n\n

\n

0 1 2 3 4 5 6 7 8 9 a b c d e f<\/p>\n<\/blockquote>\n\n\n\n

Con estas notaciones podemos crear parejas, con lo que la escala ser\u00eda:<\/p>\n\n\n\n

\n

00 01 02 03 04 05 06 07 08 09 0a 0b 0c 0d 0e 0f 10 11 [..] fd fe ff<\/p>\n<\/blockquote>\n\n\n\n

Veamos c\u00f3mo definir\u00edamos un color naranja para un texto:<\/p>\n\n\n\n

<style>\n    p{\n        color: #ff8000;\n    }\n<\/style><\/code><\/pre>\n\n\n\n
Evidentemente, es un sistema poco intuitivo, pero puedes encontrar selectores online para definir tus colores hexadecimales. Al final del art\u00edculo te dejamos un selector de color<\/a> muy completo.<\/p>\n\n\n\n
RGB<\/h3>\n\n\n\n
Qu\u00e9 es RGB<\/h4>\n\n\n\n
La  notaci\u00f3n RGB apunta, de una manera m\u00e1s intuitiva, los valores de cada uno de los colores primarios. La escala, en vez de ser alfanum\u00e9rica, empieza en 0 y acaba en 255. <\/p>\n\n\n\n
Declarar RGB en HTML<\/h4>\n\n\n\n
Se declara con la instrucci\u00f3n rgb y los tres valores entre par\u00e9ntesis<\/strong>. Por ejemplo, el mismo naranja que declar\u00e1bamos como hexadecimal se declarar\u00eda como rgb de la siguiente manera:<\/p>\n\n\n\n
<style>\n    p{\n        color: rgb(255,128,0);\n    }\n<\/style><\/code><\/pre>\n\n\n\n
RGBA<\/h3>\n\n\n\n
Qu\u00e9 es RGBA<\/h4>\n\n\n\n
Como extensi\u00f3n del modelo RGB podemos mencionar RGBA, donde a\u00f1adimos un nuevo canal<\/strong> (alfa), que determina la transparencia de ese color<\/strong>.<\/p>\n\n\n\n
Declarar RGB en HTML<\/h4>\n\n\n\n
Lo declaramos igual que el rgb, pero indicando rgba y a\u00f1adiendo un nuevo valor num\u00e9rico, entre 0 (transparente) y 1 (opaco). A nuestro ejemplo le vamos a dar una trasparencia del 50%.<\/p>\n\n\n\n
<style>\n    p{\n        color: rgba(255,128,0.5);\n    }\n<\/style><\/code><\/pre>\n\n\n\n
Transparencias en hexadecimal<\/h3>\n\n\n\n
Una vez vistas las transparencias en RGB, con el canal alfa, volvemos atr\u00e1s para a\u00f1adir que el color hexadecimal tambi\u00e9n puede incluir transparencias<\/strong>, no obstante, el modo rgba es m\u00e1s compatible que este, por lo que no te recomendamos utilizarlo. <\/p>\n\n\n\n
El canal alfa en hexadecimal se usar\u00eda a\u00f1adiendo dos d\u00edgitos m\u00e1s, que indican la transparencia, en este caso al 50%.<\/p>\n\n\n\n
<style>\n    p{\n        color: #ff800080;\n    }\n<\/style><\/code><\/pre>\n\n\n\n
Nombres de colores HTML<\/h3>\n\n\n\n
Esta es la manera m\u00e1s sencilla de declarar colores en HTML. Se trata de, simplemente, usar el nombre del color. Evidentemente, hay una lista predefinida con valores concretos<\/strong>, no trates de poner \u00abamarillo lim\u00f3n maduro\u00bb. Al final de este art\u00edculo te dejamos una lista de los colores HTML predefinidos y sus correspondencias hexadecimales<\/a>.<\/p>\n\n\n\n
Declarar un color HTM por nombre<\/h4>\n\n\n\n
Para nuestro ejemplo, de color naranja, no tenemos un nombre exacto para ese color, el m\u00e1s parecido ser\u00eda el DarkOrange.<\/p>\n\n\n\n
<style>\n    p{\n        color: DarkOrange;\n    }\n<\/style><\/code><\/pre>\n\n\n\n
HSL<\/h3>\n\n\n\n
Qu\u00e9 es HSL<\/h4>\n\n\n\n
El modelo HSL anota, en vez de la luminosidad de cada canal de color, tres valores que definen el color.<\/p>\n\n\n\n