¿Qué color es ese?
¿Estás empezando a programar y no entiendes cómo darle el color que quieres a un elemento en pantalla? Claro, puedes "googlear" o usar ChatGPT, pero ¿por qué no entenderlo?
Teoría de colores rápida
Sí, lo sé... has leído teoría y casi cierras el navegador, pero déjame explicarlo muy simplemente.
El modelo RGB (rojo, verde, azul) o RVA (rojo, verde, azul) combina estos tres colores para conseguir uno nuevo.
El sistema hexadecimal usa una escala de 0 a 15, donde los últimos 6 valores son representados por letras: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A(10), B(11), C(12), D(13), E(14), F(15)).
El sistema HSL (tono, saturación, luminosidad) o TSL (tono, saturación, luminosidad) usa estas tres propiedades de los colores para crear un color.
¿Cómo creo un color con RGB (RVA)?
Con este modelo, deberás mezclar distintas cantidades de rojo, verde y azul.
Solo necesitas aprender el formato: rgb(rojo, verde, azul).
La cantidad de color va de 0 (negro) a 255 (máximo rojo, verde o azul).
RGB Tester
Has acabado de ver gráficamente el modelo RGB. Para pantallas, los colores PRIMARIOS son ROJO, VERDE y AZUL. Para impresión, los colores PRIMARIOS son Cyan, Magenta, Yellow y blacK (modelo CMYK).
Para conseguir cada uno de los colores PRIMARIOS para PANTALLAS, prueba con dar el valor máximo (255) a uno de estos colores, y dejar el resto en el valor mínimo (0).
Para conseguir cada uno de los colores PRIMARIOS para IMPRESIÓN, prueba con dar el valor máximo (255) a dos de estos colores, y dejar el otro en el valor mínimo (0).
Si vuelves a la imagen del modelo RGB, verás que al juntar todos los colores primarios (valor 255), se obtiene el color blanco, y si no juntas ninguno (valor 0), se obtiene el negro.
¿Puedes imaginarte qué pasará si mezclamos la misma cantidad de cada uno de los colores sin llegar al máximo (255) ni al mínimo (0)?
¡Exacto! Si mezclamos la misma cantidad de todos, obtenemos el color gris. Cuanto más alto sea el valor, más claro será, y cuanto más bajo, más oscuro.
Los colores TERCIARIOS se obtienen al mezclar un COLOR PRIMARIO con un COLOR SECUNDARIO. Estos son: AMBER, VERMILLON, MAGENTA, VIOLETA, TEAL y CHARTREUSE.
remos de 1 en 1. Para conseguir el color AMBER, mezcla 255 de rojo, 191 de verde y 0 de azul.
Para conseguir el color VERMILLON, mezcla 227 de rojo, 66 de verde, y 52 de azul.
Para conseguir el color MAGENTA, mezcla 207 de rojo, 52 de verde, y 118 de azul.
Para conseguir el color TEAL, mezcla 0 de rojo, 127 de verde, y 127 de azul.
Para conseguir el color VIOLETA, mezcla 76 de rojo, 40 de verde, y 130 de azul.
Para conseguir el color CHARTREUSE, mezcla 127 de rojo, 255 de verde, y 0 de azul.
Como habrás podido ver, algunas mezclas para terciarios son más fáciles que otras, ya que mezclan el máximo de un color (255) con la mitad de otro (127).
Todo es cuestión de práctica. Con el tiempo, podrás encontrar el color que buscas en RGB, y si no, ¡puedes aprender el sistema HEXADECIMAL!
Muestra color:
Hexa(16) son los valores de este modelo: del 0 a la letra F.
La escala es 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, y las letras representan los números 10, 11, 12, 13, 14, 15.
El formato es: # + 6 números o 6 letras (p. ej., #000000 representa el negro).
Hexa Tester
Has acabado de ver gráficamente el modelo RGB expresado con notación hexadecimal. Puedes volver y copiar los colores de la imagen, pero es mejor entenderlo.
Cuando veas un color en formato "#000000", si has entendido el modelo RGB, es lo mismo escrito de forma distinta (#-00-00-00: cada par de números o letras representa la cantidad de ROJO, VERDE y AZUL).
Las cantidades de color en HEX se representan con números y letras: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A(10), B(11), C(12), D(13), E(14), F(15).
Para entender bien el modelo y cómo funciona, hay que entender su fórmula... No te asustes, no es complicada. Veamos un ejemplo con el color ROJO.
El color rojo en HEX es #FF0000. La cantidad de cada color es igual al primer valor multiplicado por 16 más el segundo valor. Así, FF sería: F (15*16=240) + F (15). En RGB, FF sería 255 (el máximo).
No te asustes si no lo has entendido. No es necesario memorizar la fórmula, solo saber que el primer valor suma más a la cantidad porque se multiplica por 16, mientras que el segundo valor solo se suma.
Los colores primarios de pantalla son fáciles de intuir. ¿Te atreves sin mirar la primera foto?
¡Genial! ROJO: #FF0000, VERDE: #00FF00 y AZUL: #0000FF.
El AMARILLO es #FFFF00 (rojo y verde al máximo). El CIAN es #00FFFF (verde y azul al máximo). El MAGENTA es #FF00FF (rojo y azul al máximo).
El BLANCO (#FFFFFF) y el NEGRO (#000000) son fáciles. ¿Pero y los grises?
Si lo recuerdas, para los grises, mezclamos la misma cantidad de todos los colores, así que seguro que se repetirán los mismos 2 números o letras.
Para un GRIS CLARO, podemos usar #D0D0D0 (D es 13*16 y le sumamos el segundo valor 0). #D0D0D0 es lo mismo que rgb(208,208,208).
Para un GRIS OSCURO, podemos usar #5E5E5E, que es igual a 80 (5*16)+14 (E), es decir, 94. rgb(94,94,94).
¿Recuerdas que dentro de los 3 pares de números o letras, "importa" más el primer valor que el segundo?
Veamos un ejemplo con el AZUL (#0000FF): Prueba de modificarlo así: #0000F2. Y luego modifícalo así: #00002F. ¿Cuál ha cambiado más?
¡Exacto! Ha cambiado POCO al tocar el segundo valor, pero MUCHO al darle un primer valor muy bajo (2), lo acercamos más al color negro (lo oscurecemos).
Ahora, ¡diviértete probando! Es cuestión de práctica dominar por completo el sistema HEX.
Muestra color:
HSL o TSL (Tono,Saturación, Luminosidad)
Este modelo usa estas tres propiedades de los colores para crear un color.
El formato es: HSL (número de color, saturación %, luminosidad %).
Para establecer el número del color, imagina un círculo donde el rojo está en 0º (número para rojo: 0), el verde está a 120º (verde: 120), y el azul está a 240º (azul: 240).
HSL Tester
Mostra color: