|
Entendiendo el color y el sistema RGB
Copyright © 2002 Ernesto De Spirito
Este artículo fue primero publicado en el Boletín para Desarrolladores de
Software
Índice
Colores primarios de la luz
La luz tiene tres colores primarios: rojo, verde y azul. Combinando esos
colores primarios en diversas intensidades podemos conseguir todos los
colores visibles.
Si representamos la intensidad de cada color primario con un número,
entonces podemos representar los colores con tres números (uno para el
rojo, uno para el verde y uno para el azul). Esta forma de representar
los colores con números para la intensidad de los componentes rojo,
verde y azul de la luz se conoce como el sistema de color RGB (del
inglés Red, Green y Blue, que en castellano suele referirse como RVA:
Rojo, Verde y Azul).
El sistema de color RGB (RVA)
Asumiendo que utilizamos números enteros en el rango 0..255 (un byte),
es decir 256 valores posibles para cada color primario, entonces con
tres bytes podemos representar 256 x 256 x 256 combinaciones diferentes
de los colores primarios, es decir una gama de más de 16 millones de
colores (frecuentemente referida como "color verdadero"). En particular,
este sistema de color RGB se conoce como RGB-256.
Algunos programas utilizan un sistema conocido como RGB-100, que utiliza
números en el rango 0..100 para indicar un porcentaje de intensidad
(0%=apagado; 100%=máximo). En los ejemplos vamos a utilizar RGB-256
porque es el más popular.
Tonos de grises
El negro es la ausencia de color (o la ausencia de luz) y se representa
como RGB(0,0,0) (Rojo=0, Verde=0, Azul=0). El blanco es la presencia de
todos los colores (en su intensidad máxima) y se representa entonces
como RGB(255,255,255) (Rojo=255, Verde=255, Azul=255). Todos los tonos
de grises del negro al blanco se representan con tres valores iguales
para los componentes rojo, verde y azule (ningún color predomina), es
decir que tienen la forma RGB(x, x, x). Por ejemplo, el color definido
en la jerga como "gris claro" se representa como RGB(192,192,192), y el
"gris oscuro" es RGB(128,128,128).
 |
RGB(0,0,0) = Negro |
|
RGB(128,128,128) = Gris oscuro |
|
RGB(192,192,192) = Gris claro |
|
RGB(255,255,255) = Blanco |
Colores primarios
Ahora pasemos a los colores. Para comenzar, los colores primarios se
representan de esta manera:
|
RBG(255,0,0) = Rojo claro (o rojo brillante, o rojo intenso) |
|
RBG(0,255,0) = Verde claro (o verde brillante, o verde intenso) |
|
RBG(0,0,255) = Azul claro (o azul brillante, o azul intenso) |
Sus versiones oscuras serían:
|
RBG(128,0,0) = Rojo oscuro |
|
RBG(0,128,0) = Verde oscuro |
|
RBG(0,0,128) = Azul oscuro |
Como puede estar adivinando, las diferentes intensidades de rojo tienen
la forma RBG(x,0,0), las de verde tienen la forma RGB(0,x,0) y las de
azul son de la forma RGB(0,0,x).
Colores secundarios
Los colores secundarios de la luz son cian, magenta y amarillo, y
resultan de la combinación de diferentes pares de los colores
primarios en iguales intensidades. Por ejemplo, sus versiones
brillantes serían:
|
RBG(0,255,255) = Cian claro = verde claro + azul claro |
|
RBG(255,0,255) = Magenta claro = rojo claro + azul claro |
|
RBG(255,255,0) = Amarillo claro = rojo claro + verde claro |
La versiones oscuras de los colores secundarios serían:
|
RBG(0,128,128) = Cian oscuro = verde oscuro + azul oscuro |
|
RBG(128,0,128) = Magenta oscuro = rojo oscuro + azul oscuro |
|
RBG(128,128,0) = Amarillo oscuro = rojo oscuro + verde oscuro |
Como puede ver, las diferentes intensidades de cian son de la forma
RBG(0,x,x), las de magenta tienen la forma RGB(x,0,x) y las de azul
son de la forma RGB(x,x,0).
Otros colores
¿Cómo podemos hacer otros colores? Tomemos el naranja por ejemplo.
Como probablemente sabrá, el naranja intenso es un color que está
entre el rojo intenso y el amarillo intenso, es decir, entre el
RGB(255,0,0) y el RGB(255,255,0), y esto significa que el naranja
intenso es RGB(255,128,0). ¿Cómo obtuvimos este valor? Simplemente
tomando el promedio de los componentes del rojo intenso y el amarillo
intenso:
Rojo claro Amarillo claro
Rojo = ( 255 + 255 ) / 2 = 255
Verde = ( 0 + 255 ) / 2 = 128
Azul = ( 0 + 0 ) / 2 = 0
|
RGB(255,0,0) = Rojo claro |
|
RBG(255,128,0) = Naranja claro |
|
RBG(255,255,0) = Amarillo claro |
Diferentes intensidades de naranja tienen la forma RGB(x,x/2,0), es
decir, guardan la relación entre rojo y verde (dos partes del primero
y uno del segundo).
Colores puros
Los colores puros o saturados combinan sólo dos colores primarios y
tienen la forma RGB(x,y,0), RGB(y,x,0), RGB(0,x,y), RGB(0,y,x),
RGB(x,y,0) o RGB(y,x,0) donde x <> 0 y x >= y:
- Cuando y = 0, tenemos un color primario.
- Cuando x = y, tenemos un color secundario.
- Cuando y = x/2 tenemos un color exactamente entre un color primario y
un color secundario. Por ejemplo RGB(255,128,0) es un naranja
exactamente entre el rojo y el amarillo.
- Cuando y < x/2 tenemos un color más cercano a un color primario que
a uno secundario. Por ejemplo el RGB(255,116,0) es un naranja más
tirando a rojo que a amarillo.
- Cuando y > x/2 tenemos un color más cercano a un color secundario que
a uno primario. Por ejemplo el RGB(255,140,0) es un naranja más cerca
del amarillo que del rojo.
Matiz y luminosidad
Los colores de la misma forma que tienen la misma relación x/y se dice
que tienen el mismo "matiz". Por ejemplo, RBG(255,128,0) y RGB(192,96,0)
son de la misma forma (RGB(x,y,0)) y tienen la misma relación x/y
(255/128 = 192/96), así que tienen el mismo matiz. El "matiz" es lo que
incorrectamente con frecuencia referimos como "color". Por ejemplo, en
este caso el matiz de ambos colores es "naranja", pero es naranja
brillante y el otro es naranja oscuro, es decir, comparten el mismo
"matiz", pero difieren en la "luminosidad". La luminosidad mide cuán
cercano un color está del blanco, y se representa usualmente como un
porcentaje. Por ejemplo, RGB(192,96,0) es un naranja con una luminosidad
de 75%, y RBG(128,64,0) es un naranja con una luminosidad de 50%.
|
RBG(255,128,0) = Naranja 100% luminosidad |
|
RGB(192,96,0) = Naranja 75% luminosidad |
|
RBG(128,64,0) = Naranja 50% luminosidad |
El matiz de RBG(0,0,128) y de RGB(0,0,64) es el azul, pero el segundo
color tiene un 50% de la luminosidad del primero (tienen una luminosidad
de 50% y 25% respectivamente).
Saturación
Aparte del matiz y la luminosidad, los colores se definen por un tercer
parámetro conocido como "saturación", que mide la pureza de un color.
Hasta aquí hemos tratado con colores 100% puros. Los colores impuros son
colores puros mezclados con gris. Mientras menos mezclado con gris, más
saturado es un color. Por ejemplo, RGB(192,128,64) tiene el mismo matiz
y luminosidad que el naranja brillante RGB(255,128,0), pero un 50% de
saturación, y resulta de mezclar el naranja brillante con el gris medio
RGB(128,128,128):
naranja gris
Rojo = ( 255 + 128 ) / 2 = 192
Verde = ( 128 + 128 ) / 2 = 128
Azul = ( 0 + 128 ) / 2 = 64
Si nuevamente mezclamos el resultado con gris medio, obtendríamos un
naranja con 25% de saturación RGB(160,128,96), aún más cercano al gris
medio. Si lo mezclamos con gris otra vez, obtendremos un naranja con
una saturación de sólo un 12,5% RGB(144,128,112), casi un gris medio.
|
RBG(255,128,0) = Naranja claro 100% saturación |
|
RGB(192,128,64) = Naranja claro 50% saturación |
|
RGB(160,128,96) = Naranja claro 25% saturación |
|
RGB(144,128,112) = Naranja claro 12,5% saturación |
|
RGB(128,128,128) = Gris medio |
Nótese que un color es más saturado cuando la diferencia entre los
valores RGB es más grande. Cuando los valores RGB son más cercanos unos
de otros, el color es menos saturado (es decir, es más grisáceo, o
podemos decir que es menos "saturado", "vivo", "vívido" o "puro").
La saturación se puede calcular con la siguiente fórmula:
Saturación = ((máximo-medio) + (medio-mínimo)) / 255 * 100%
Por ejemplo:
Saturación(160,128,96) = ((160-128) + (128-96)) / 255 * 100%
= (32 + 32) / 255 * 100%
= 64 / 255 * 100%
Saturación(160,128,96) = 25%
Representación entera
Los tres bytes que representan un color se pueden combinar en una
constante entera de 32-bit, representada normalmente en notación hexadecimal.
Por ejemplo, RGB(160,128,96) es 6080A0:
Rojo (RR) = 160 decimal = A0 hexadecimal
Verde (GG) = 128 decimal = 80 hexadecimal
Azul (BB) = 96 decimal = 60 hexadecimal
Nótese que las constantes de color tienen la forma BBGGRR, donde BB es
el byte (dos dígitos hexadecimales) para el azul (blue), GG es el byte
para el verde (green) y RR es el byte para el rojo (red). La razón es
que los enteros se almacenan con el byte menos significativo primero,
así que BBGGRR se almacena como RRGGBB, el orden en que se esperan los
valores RGB (por ejemplo 6080A0 se almacena internamente como A08060).
En Visual Basic, RGB(160,128,96) se representa como &H6080A0&, en C/C++
es 0x6080A0 y en Delphi es $6080A0.
Añadiendo color a sus aplicaciones
El uso de los colores del sistema de Windows garantiza que el usuario
puede ajustar los colores de su aplicación a aquellos que él/ella puede
ver (su aplicación simplemente usará los colores establecidos en el
Panel de Control). Considere este hecho antes de pensar en usar sus
propios colores. A propósito, puede encontrar algunas pautas útiles
sobre el uso del colores en la MSDN Library:
http://msdn.microsoft.com/library/en-us/dnwue/html/ch14b.asp
Está bien, a veces queremos que nuestra aplicación tenga un pequeño
toque de color, pero por otra parte no queremos que se vea cirquera. El
secreto es limitarse a un puñado de colores, ser consistentes, y elegir
colores muy impuros con poco contraste entre fondos adyacentes (y altos
contrastes entre las letras y los fondos).
Por ejemplo, para el fondo de sus botones puede utilizar un color como
RGB(192,192,200), que es como el gris claro original, pero con un poco
de azul. Recuerde que cuando usted no utiliza un color del sistema para
el fondo de un elemento, no debe utilizar un color del sistema para el
primer plano. Por ejemplo, probablemente usted ve que las letras de una
etiqueta son negras, que contrasta muy bien contra el fondo gris azulado
claro que ha establecido, pero éste puedo no ser el caso en la PC del
usuario. ¿Qué pasa si el usuario tiene establecido en el Panel de
Control un color claro para las letras sobre un fondo oscuro para los
colores de los botones? En su aplicación, el resultado serían letras
claras (establecidas por el usuario) sobre un fondo claro (establecido
por usted). Por esta razón, usted debe establecer explícitamente el
color de las letras para asegurarse que las mismas contrastarán muy bien
contra el fondo. En este caso, RGB(0,0,0) -negro- sería la mejor opción.
Puede agrupar diversos elementos de su formulario en paneles, y establecer
el color de fondo de estos paneles por ejemplo a RGB(192,200,200),
un gris claro con un poco de cian. Si lo desea poco un más verde, puede
establecerlo por ejemplo a RGB(192,202,199), y si lo desea poco un más
azul, puede establecerlo a RGB(192,199,202). Recuerde establecer
explícitamente el color de los letras de las etiquetas que tenga sobre
estos paneles a un color que ponga contraste mucho con el fondo
(típicamente negro).
Si desea más color, puede establecer el color del fondo de los cuadros
de texto a un color luminoso como RGB(255,255,239), un amarillo claro
insaturado, y establecer el color del texto a un color muy oscuro
(generalmente negro).
|
RGB(192,192,200) = gris claro con un poco de azul |
|
RGB(192,200,200) = gris claro con un poco de cian |
|
RGB(192,203,198) = ídem, más verde |
|
RGB(192,198,203) = ídem, más azulado |
|
RGB(255,255,239) = un amarillo claro insaturado |
Si desea algo radicalmente diferente, en vez del gris claro estándar
RGB(192,192,192) para el fondo de su formulario, puede establecer un
color mucho más brillante, como RGB(245,245,255), un muy luminoso e
insaturado azul claro, casi blanco. Esto permitiría que usted utilizara
colores no tan oscuros para algunas etiquetas (típicamente en negrita),
como por ejemplo un cian oscuro RGB(0,80,80), etc., mientras que se
sigue manteniendo un buen contraste. En vez de un color como
RGB(192,200,200) para un panel, debería ahora utilizar un color
como RGB(248,242,255) para que el fondo del panel no contraste mucho con
el fondo del formulario, y para los botones puede utilizar un color como
RGB(232,242,255) por la misma razón.
|
RGB(192,192,192) = Gris claro |
|
RGB(245,245,255) = Gris más claro con un poco de azul |
|
RGB(248,242,255) |
|
RGB(232,242,255) |
Con estos pequeños toques de color y algunos gráficos como decoraciones,
su aplicación tendrá un look diferente.
Paleta de seguridad
La paleta de seguridad se usa para asegurar que los colores sean
"sólidos" (sin "dithering") en tarjetas de video y monitores capaces
solamente de 256 colores. Si quiere que su aplicación se vea bien en
estos monitores, debería usar la paleta de seguridad.
La paleta de seguridad se compone de 216 colores que resultan de todas
las combinaciones posibles de los valores 0, 51, 102, 153, 204 y 255 (o
$00, $33, $66, $99, $CC, y $FF en notación hexadecimal) para los componentes
rojo, verde y azul. Por ejemplo, el color RGB(204,153,102) o
$6699CC es uno de los colores seguros.
La paleta de seguridad deja 40 colores sin usar (256 - 216 = 40).
Windows reserva 20 colores de sistema, dejándole otros 20 colores que
podría usar en su aplicación, pero debería estar consciente que esos 20
colores pueden cambiar cuando el usuario cambia a otra aplicación, así
que se recomienda que no los use.
|
