Entender RGB para conseguir el color que queremos

Actualizada el

Todos los sistemas de orden del color son posibles debido a una propiedad que tienen los colores y muchas veces se ignora. Esta propiedad de la que hablo la podríamos llamar convexidad, si estuviéramos en un entorno matemático. Fuera de este entorno no me atrevo a ponerle nombre y directamente la enunciaría:

Dados dos colores cualesquiera, existe una escala entre ambos, es decir, unos colores intermedios que nos permite pasar de uno al otro de forma continua o progresiva.

La imagen de abajo es un ejemplo de lo dicho anteriormente. Las celdas de arriba tienen los colores extremos de las celdas de abajo. Además, entre los extremos vemos 6 colores que forman la escala. Se podría haber elegido desde 1 color hasta el número que queramos.

Escala de colores entre un rojo y un azul.

El sistema RGB se diferencia de los demás por obtener cada color como suma de los colores primarios en luz. Por ello este sistema nos va a ser muy útil para elegir colores intermedios. Otros sistemas son mejores para obtener colores más luminosos o colores más saturados.

La lógica del RGB

El objetivo es colocar todos los colores de forma ordenada dentro de un cubo. Entonces, nos interesa elegir qué colores situar en los vértices. Para luego aplicar la propiedad de convexidad y, de ese modo, conseguir todos los colores. Empecemos por elegir los 3 colores más importantes, los primarios:

  • El Rojo (R)
  • El Verde (G)
  • El Azul (B)

Los situaremos cada uno en un eje distinto porque son totalmente diferentes y todos a la misma distancia del origen (0,0,0), ya que son igual de importantes. Aquí unos programas informáticos optan por el 1, otros por el 100 y algunos por el 255. En el fondo todos son iguales y fácilmente pasaríamos de una numeración a otra.

Caja vacía del RGB

En luz, la mezcla de los tres colores primarios es el blanco y su ausencia, el color negro. Así que tomaré estos dos colores para representar el cubo RGB. Además, si sumo los colores primarios una vez entre ellos obtengo los colores secundarios que son los colores de la impresora (Cían o GB, Magenta o RB y Amarillo o RG).

Cubo RGB con los vértices llenos

En la imagen de arriba tenemos la disposición de los ocho colores anteriores (Negro, Rojo, Azul, Verde, Cían, Magenta, Amarillo y Blanco) en sus vértices. ¡Qué mejor que el (0,0,0) para la ausencia de luz! El rojo como es el primero de las siglas RGB, le asigno el (1,0,0) (el uno en primer lugar). El verde es el segundo, siguiendo la misma lógica, el uno en segundo lugar (0,1,0). Por último el (0,0,1), el azul. Si proyecto sobre una pared blanca los tres colores, tendré el blanco, por otro lado si sumo las coordenadas de los primarios obtengo el (1,1,1). Así, obtengo el (1,1,0) para el Amarillo, el (1,0,1) para el Magenta y finalmente, el (0,1,1) para el Cían.

El resultado final, visto desde fuera, lo tenemos en la imagen animada de abajo.

Cubo RGB animado

Una idea para elegir el color que queremos con precisión

Muchas veces tenemos claro el color que queremos y no acertamos al elegirlo en el software. Si hemos encontrado dos colores y la intuición nos dice que está en medio, os propongo, como un método más a tener en la chistera, hacer una escala entre ellos, a pesar que no es muy original

Más de uno pensará que lo mejor sería tener un software que nos permitiera esta operación. Hay algo mejor. Hagan una búsqueda en la web y encontrarán multitud de herramientas online que permiten hacer esta tarea. Por ejemplo Colors Tutorial, HSL Color Picker – by Brandon Mathis o busca en Google (rgb color picker).

Sin embargo, para no dejar atrás en el olvido lo aprendido en nuestra etapa de estudiante y para tener cierta independencia del software, te propongo un poco de matemáticas. Como verás solo es una simple tabla de operaciones sencillas. Podrás usar Excel o Calc o la calculadora del móvil. Fácil.

Antes de empezar, debes saber que la forma de sumar los colores que hemos visto en el punto anterior solo sirve para los que están en los vértices. Para los colores intermedios mejor usar otras fórmulas que explicaré aquí. Para mí esto no debiera ser así, pero es lo que hay.

Primero, elegimos los dos colores cuyas coordenadas están entre 0 y 1. Por ejemplo, el color inicial (0.281, 0.535, 0.931), un azul, y el color final (0.942, 0.245, 0.323), un rojo.

Segundo, elegimos el número de colores intermedios queremos y le sumamos dos, los correspondientes a los extremos. En mi caso, elijo 6, más los dos extremos (el inicial y el final) son 8. Al primer color no le voy a hacer ningún cambio, por ello empezaré con el 0 y llegaré hasta el siete.

Tercero, se trata de pasar de la primera coordenada del primer color al la primera coordenada del segundo color y así con las demás coordenadas. Esto no es más que una fórmula que puedes consultar abajo:

\(CI – \frac{i}{(n-1)}(CF – CI)\)

donde i = 0, 1, 2, 3, 4, 5, 6, 7. n = 8. CI = color inicial. CF = color final

CIC1C2C3C4C5C6CF
0,2810,3760,4700,5650,6590,7530,8480,942
0,5350,4930,4520,4110,3690,3280,2860,245
0,9310,8440,7570,6700,5830,4960,4100,323

Dicho de otro modo, consiste en restar al color final el color inicial y dividir, esta resta, entre 7. Con ello, obtenemos tres números, uno por cada coordenada, que iremos sumando al color inicial empezando por 0 veces, 1 vez, 2 veces… hasta 7 veces.

En forma de hoja de cálculo tendríamos la siguiente tabla:

 

A

B

C

D

E

F

G

H

1

0

1

234567

2

0,281=A2 + (Color2-Color1)*B1/7      

3

0,535=A3 + (Color2-Color1)*B1/7      

4

0,931=A4 + (Color2-Color1)*B1/7      

Cuando escribamos las dos primeras columnas en la hoja de cálculo, tenemos la opción de seleccionar las tres celdas (en columna) que contienen fórmulas y, sin soltar, arrastrar hasta la columna H.

Lo hecho anteriormente es:

CICF
CIC1C2C3C4C5C6CF

El código hexadecimal de los colores

En informática es muy usado el sistema hexadecimal o base 16 debido a que los bytes están formados por ocho bits. Como estos bits tienen dos posibles valores (0 i 1) y hay ocho, podemos llegar del 0 al 255 (256=16×16 números). Para no liarnos con el 10 cuando es 9+1 y con el 10 cuando es 15+1 por ser base 16, usamos las letras A (10), B (11), C (12), D (13), E (14), F (15).

Todo lo anterior nos sirve para representar los byte en dos cifras, a lo sumo. Para tenerlo un poco más claro propongo contar en hexadecimal. La tabla siguiente nos ayuda bastante, debemos contar las celdas como si fuese texto y tendremos su equivalente en base 16:

0123456789ABCDEF
101112131415161718191A1B1C1D1E1F
20        2A   2F

Si has entendido lo anterior lo que falta es jauja. Pero si no, puedes preguntarme en los comentarios.

Como decía al principio, muchos sistemas informáticos en vez de tomar el 1 como referencia para los vértices, toman el 255. Esto se debe a que cada número representará un color de la escala entre el negro y el color primario correspondiente. Los demás colores surgen como he explicado anteriormente después de multiplicar por 255.

Para finalizar el código hexadecimal usa siempre dos cifras para cada número. Siempre veremos el 00 y no el 0 suelto. Ello nos permite omitir la comas. Así, los dos dígitos primeros serán para el rojo, los dos del medio, para el verde y la última pareja, para el azul. El símbolo, # (almohadilla), se usa para decir que es un color.

#RRGGBB

Los código de los colores usados en el ejemplo anterior sobre escala de colores anterior son:

#4888ED#607ED7#7873C1#9069AB#A85E95#C0547F#D84968#F03E52

Hay una forma matemática de pasar del sistema RGB entre 0 y 1, que consiste en multiplicar por 255. Si el color rgb lo tenemos entre 0 y 100, debes multiplicar entre 2,55. Al revés debes hacer el cambio de base. Como no es muy habitual, mejor completar la tabla anterior o usar algún software.

Espero que hayas entendido el funcionamiento interno de RGB. Ello te ayudará a manejar mejor los colores. Si no he conseguido el objetivo me será grato ayudarte en los comentarios.


entradas recientes

Deja un comentario