Los colores en RGB y CMYK

Hoy vamos a hablar un poco de los colores RGB y CMYK, es decir, de cómo se muestran y definen los diferentes colores que vemos en la pantalla de nuestro ordenador o móvil, pero también en los libros y revistas impresos. De los colores en RGB y CMYK. ¿Te animas?, te aseguro que es muy interesante.
Para entenderlo bien, necesitamos empezar hablando de los colores primarios.

¿Qué son los colores primarios?

Los colores primarios son aquellos que, al combinarse en distintas proporciones entre sí, nos permiten formar cualquiera de los demás colores. Es decir, mezclamos los colores primarios en distintas proporciones para obtener cualquier otro color.

¿Cuáles son los colores primarios?

Pues, depende. Existen dos maneras de mezclar colores: mediante mezclas aditivas y mediante mezclas sustractivas. Ya te estoy liando ¿no?. Tranquilidad, que es mucho más sencillo de lo que parece.

Cuando cogemos unos lapiceros, acuarelas o tintas de distintos colores y los mezclamos entre sí para pintar sobre una hoja de papel blanco, estamos realizando una mezcla sustractiva. Esto quiere decir que, al añadir más colores siempre oscurecemos el resultado final, y si no añadimos ningún color, obtenemos el blanco puro que nos proporciona la propia hoja de papel.

Los colores primarios en mezclas sustractivas son el Azul claro (cian), Magenta y Amarillo. Se supone que mezclándo los tres en idénticas proporciones obtenemos el color negro, pero el resultado no suele ser un negro intenso debido a que raramente utilizamos tintes perfectos, por lo que suele añadirse un cuarto “color”, el Negro puro, para reforzar esa oscuridad y obtener toda la gama de tonalidades posibles al mezclarlos entre sí.

Por eso, en tu impresora a color o en las imprentas, se utiliza el denominado modelo de color CMYK (Cyan, Magenta, Yellow y Key o Black) que son esos mismos colores en inglés.

Los colores primarios en las mezclas aditivas son el Rojo, Verde y Azul. Las mezclas aditivas son las que podemos ver en las pantallas, donde estos tres colores primarios son en realidad luces que se iluminan en distinto grado para conseguir así, al mezclarse, toda la gama de colores RGB (Red, Green, Blue), también en inglés. Si las tres luces están completamente apagadas, obtenemos el negro propio de la pantalla sin encender. Si las tres luces se iluminan con la máxima intensidad, conseguiremos el color blanco. Y esa es la diferencia entre los colores en RGB y CMYK.

¿A que ahora resulta mucho más fácil?. Pero sigamos, que la cosa se pone interesante.

¿Cómo se representan los colores RGB?

Los colores en informática se representan mediante tres números, uno para cada color primario. Uno para el rojo, otro para el verde y otro para el azul. Cuanto más elevado es el valor numérico para un color, con más intensidad se enciende la luz correspondiente, y si es cero, estará completamente apagada.

Cada uno de estos números toma valores entre cero y doscientos cincuenta y cinco (0 – 255). Esto es 256 valores diferentes. La razón es que 256 es justo el resultado de elevar 2 a 8, o lo que es lo mismo, multiplicar 2 por si mismo 8 veces: 2x2x2x2x2x2x2x2=256. Y esto es así porque en informática la mínima cantidad de información es el “bit” que puede tomar dos valores diferentes (encendido o apagado, on u off, 1 ó 0). De ahí el 2. Un “byte“, la siguiente unidad de información, está compuesto de 8 bits y por tanto puede almacenar hasta 256 valores diferentes como acabamos de ver.

Así, por ejemplo, el rojo se representa como rgb(255, 0,0), el blanco como rgb(255,255,255) y el negro como rgb(0,0,0). Un byte de información para cada color.

¿Me has seguido hasta aquí?. ¡Genial! :-). Pues vamos un paso más allá para tratar de entender por qué se utiliza a menudo la notación hexadecimal para representar los colores RGB.

¿Que es la notación hexadecimal?

Estoy seguro que a poco contacto que hayas tenido con programas de diseño o retoque fotográfico, habrás visto colores representados de forma similar a estos: #F23478, #2D3F7A, #4c8535…
¡No son sólo números!, dirás… Y tienes razón (en parte) porque se trata de una mezcla extraña de números y letras. Aunque en realidad SI son números. Lo que pasa es que son números en sistema hexadecimal (en lugar del habitual decimal), al que no estamos tan acostumbrados en nuestra vida cotidiana pero que son muy útiles a la hora de mostrar colores.

El sistema hexadecimal se diferencia del decimal en que se compone de 16 dígitos diferentes en lugar de los 10 del sistema decimal.  Al 0,1,2,3,4,5,6,7,8 y 9, se les añaden A,B,C,D,E y F.

Esto parece muuuuy raro, lo se. Pero en realidad es más sencillo de lo que parece.
En el sistema decimal, después del número 9, viene el 10 y necesitamos dos dígitos para representarlo: el 1 y el 0. Y a partir de ahí vamos combinando el 1 con los demás para representar el 11,12,13… hasta llegar al 19. Después combinamos el 2 con todos los demás: 20, 21,22,23… después el 3 para formar el 30,31,32… y así hasta que llegamos al 99, momento en el cual necesitaremos echar mano de tres dígitos para representar el 100.

Con los hexadecimales, después del 9 no viene el 10, sino el A, después B,C,D,E y finalmente F (que en decimal corresponde al 15). ¿Lo pillas?. Si es así, ¿cual dirías que es el número 16 en hexadecimal?.
Exácto, es el “10”, tras el cual vendrían el 11,12,13,14,15,16,17,18,19,1A,1B,1C,1D,1F,20,21…

¡Qué locura! ¿no?. Bueno en realidad todo esto tiene un sentido y es que el número 255 se corresponde en hexadecimal con el FF. Es decir, sólo necesitamos dos dígitos para representar cualquier valor del rojo, el verde o el azul, en lugar de los tres que necesitábamos en décimal y que además debíamos separar con comas para saber donde terminaba uno y empezaba el siguiente. Esto no sucede en hexadecimal ya que siempre utilizamos dos dígitos para cada color, y si es necesario ponemos un cero a la izquierda.

Así el blanco sería #FFFFFF, exáctamente igual que rgb(255,255,255). En hexadecimal bastan seis dígitos para representar cualquiera de los 16 millones de colores posibles (256x256x256=16 millones).

Por cierto, la almohadilla (el símbolo #) se utiliza para avisar que lo que viene a continuación es un valor hexadecimal.

¿Cómo se representa el negro en hexadecimal? ¿Lo tienes?: #000000. ¿Y el rojo?: #FF0000. ¿El verde?: #00FF00. ¡Bien!.

Definiendo los colores con transparencia

A veces es interesante definir un valor de transparencia para los colores. Esto sucede cuando colocamos unos gráficos encima de otros, en capas, y queremos que a través del que está encima podamos ver con mayor o menor transparencia, el que está debajo.

Para ello se define el valor de Alpha o de transparencia. En alguna ocasión verás colores de este tipo: rgba(255,234,123,30). Esa a detrás de rgb se refiere a alpha, la transparencia. Si vale 0, el color será complpetamente transparente y si vale 255, completamente opaco. Entre medias tienes toda la gama de posibles transparencias.

En hexadecimal, simplemente se añaden dos dígitos adicionales, como por ejemplo: #FF000066.

¿Tienes ya un poco más claro que son los colores en RGB y CMYK?. Si no es así y necesitas alguna aclaración, no dudes en utilizar el hilo de comentarios y trataré de ayudarte.