Para gustos los colores.
¿Como lo trasladamos a una página web?
Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento.
Básicamente necesitamos saber la diferencia entre CMYK y RGB y que significan.
Dominar los colores RGB, RGBa y Hexadecimal.
También existen los sistemas HSL y HSLa pero yo no los voy a mencionar en esta publicación.
Índice de contenidos de esta publicación
- Diferencias entre RGB y CMYK
- Esquema de color RGB y aplicación al CSS
- Esquema de color RGBa y aplicación al CSS
- Esquema de color HEX y aplicación al CSS
- Safe colors
Diferencia entre RGB y CMYK
Se explica este concepto porqué es prácticamente de lo primero que verás si alguna vez has abierto photoshop.
Es interesante saber que significa cada cosa y no quedar como un «petardo» cuando vayas a ver un cliente.
RGB y CMYK son diferentes esquemas para representar los colores.
- RGB es el acrónimo de Red, Green, Blue.. Para web usaremos siempre RGB.
- CMYK es el acrónimo de Cian, Magenta, Yellow y Black. Para impresión en papel física usaremos siempre CMYK. Esto es flyers, tarjetas de visita, carpetas, proyectos, etc.
Para profundizar sobre el porqué de CMYK deberíamos preguntárselo a alguien que se dedique al mundo de la imprenta. Os recomiendo esta entrada.
Demos a continuación un poquito de forma al RGB.
Esquema de color RGB aplicado al CSS
RGB son el acrónimo que representa el esquema de color Red, Green, Blue.
Todo color en una pantalla se puede representar como una mezcla de estos 3 colores, indicando la proporción de cada uno con un número del 0 al 255.Por ejemplo:
- El rojo se representaría como rgb(255,0,0)
- El verde se representaría como rgb(0,255,0)
- El azul se representaría como rgb(0,0,255)
Y de las mezclas anteriores obtendríamos
- El amarillo se representaría como rgb(255,255,0)
- El azul cyan se representaría como rgb(0,255,255)
- El rosa magenta se representaría como rgb(255,0,255)
- El blanco se representaría como rgb(255,255,255)
- El negro se representaría como rgb(0,0,0)
Hasta aquí la teoria. ¿Como lo aplicamos a CSS?
Veamos algunos ejemplos en la imagen contigua.
Esquema de color RGBa aplicado al CSS
RGBa es una derivada de RGB en la que se incluye un cuarto parámetro «a» que indica el grado de transparencia – alpha channel.
Indica de una escala de 0 a 1 el porcentaje de puntos que vamos a dejar de «pintar».
- 0, significa que no vamos a pintar nada, es decir transparencia total.
- 1, significa que vamos a pintar todo, es decir el máximo grado de relleno de color posible.
Veamos algunos ejemplos de como se utiliza en CSS:
Esquema de color HEXADECIMAL aplicado al CSS
Hexadecimal significa que vamos a utilizar un sistema de numeración con los carácteres 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
16 letras. De aquí el número.
Siendo 0 la unidad mínima y F el valor de orden máximo.
Hexadecimal tiene la misma filosofía que RGB. Representamos los colores a partir de 3 bloques de rojo, verde y azul salvo que esta vez con los carácteres 0-F.
Delante de cada color se usa el símbolo hashtag #
Los más fácil es ver ejemplos:Por ejemplo:
- El rojo se representaría como #ff0000
- El verde se representaría como#00ff00
- El azul se representaría como#0000ff
Y de las mezclas anteriores obtendríamos
- El amarillo se representaría como #ffff00
- El azul cyan se representaría como#00ffff
- El rosa magenta se representaría como #ff00ff
- El blanco se representaría como #ffffff
- El negro se representaría como #000000
El hexadecimal tiene una particularidad que es cuando dos letras o números contiguos (dentro del bloque rojo, verde o azul) van a ser idénticos entonces podemos omitir una de las dos letras o números.
Por ejemplo
- El rojo se representaría como #ff0000 pero de forma resumida también se puede representar como #f00
- El verde se representaría como#00ff00 pero de forma resumida también se puede representar como #0f0
- El azul se representaría como#0000ff pero de forma resumida también se puede representar como #00f
Hasta aquí la teoria. ¿Como lo aplicamos a CSS?
Veamos algunos ejemplos en la imagen contigua.
Safe colors
Habrás visto en viejos libros llenos de polvo que también se pueden indicar algunos colores directamente por su nombre en inglés.
Por ejemplo tenemos el red, el blue, el black, el white… y así hasta llegar a los 256 colores que se considera todos los monitores son capaces de representar.
Podríamos decir que este esquema de color es una reminiscencia del pasado.
Personalmente no me gustan.
Aunque son muy prácticos para hacer ejemplos rápidos de clase.
Yo los usaría para aprender pero no para un proyecto serio.
Hazlo como tu prefieras.
Recursos útiles para lidiar con los colores de una web
Para que te hagas una idea necesito pedir consejo para saber si unos pantalones y una camisa combinan.
No siempre puedo estar preguntando a mi diseñadora si algo le parece bien o no. ¡Viva los diseñadores!
Pero hay algunas herramientas que nos pueden ayudar.
- Para encontrar paletas de colores que combinen recomiendo la herramienta coolors.co
- Para saber los colores que se están usando en una página web lo mejor es el usar el inspector web. Sin embargo si quieres algo más rápido entonces usa la extensión de chrome colorZilla
Y esto es todo. Usa los colores con criterio, y ante la duda… ¡pregunta!
Consideraciones sobre el uso de los esquemas de colores
Si me permites una última consideración.
Sé consistente con el uso de los esquemas de colores.
Si vas a usar RGB úsalo siempre, no lo mezcles con Hexadecimal. Y viceversa. Ídem con los safe colors.
Mi esquema predilecto es el HEX.
Ejercicios recomendados
- Genera una escala cromática con css
- Ejercicio sobre web safe colors, rgb, rgba y colores hexadecimales
¡Hola querido lector!
Hasta aquí un nuevo capítulo de nuestro tutorial CSS.
¡Nos leemos mañana con un nuevo contenido en el blog!
Deja una respuesta