Este documento explica los conceptos básicos de los sistemas de color RGB y HSL utilizados en diseño gráfico. Define los colores primarios, secundarios y terciarios, y cómo se pueden combinar para crear otros colores. También describe la representación de los colores a través del círculo cromático y códigos hexadecimales de color HTML.
2. Colores
Con esta Tabla de coloresHTML dinámicapuede conseguircódigosHTML para loscoloresbásicos.
Haga clic encualquiercuadrode colorpara conseguirsuCódigode colorHTML. A continuaciónhay
unalistade loscoloresseleccionadosrecientemente.ParaguardaruncolorHTML para unapróxima
visita haga clic en su chincheta.
Selector de colores HTML
Desplace labarrade desplazamientovertical paraelegirel colorydespuéshagaclicenel cuadrode
coloresa la izquierdaparaconseguirel Códigode colorHTML para elegirel tonode colordeseado.
Puede empezarconsupropiocolorescribiendosucódigode colorenelcampode entradasuperior.
La paletade coloresRGB (RVA en español) consta,básicamente,de trescoloresprimariosaditivos:
Rojo-Verde-Azul. Estos colores primarios aditivos, en HTML, están representados por tres pares
hexadecimalesdeltipo0xHH-HH-HHsegúnelsiguienteformato:(loscoloresbásicosoprimarios,no
aquellos que son resultantes de mezclas).
#RRGGBB (= #RRVVAA)
Los valores que puede adaptar cada uno de los tres pares hexadecimales van del 0x00 (0 decimal)
al 0xFF (255 decimal). Cuanto mayor sea el valor del par, tanto mayor será también la intensidad
(matiz, brillo o claridad) del color correspondiente a ese par (y viceversa). Esto implica que el
extremoinferiorde laescalacromáticaparte de unaintensidad(grado) de colormínima(nulo=par
0x00), pasa por una intensidad de color media (mediano = par 0x80 [128 decimal]) hasta llegar a
una intensidadde colormáxima(saturado=par0xFF).El grado de más altapureza(absoluto) de un
colorprimarioaditivoestarádeterminadoporlapresenciatotal delmismo(saturación=0xFF) junto
con la ausencia total (nulidad = 0x00) de los otros dos colores primarios aditivos.
Ademásde estostrescoloresprimariosaditivos(RVA),existentrescoloresprimariossustractivoso
CMY (CMA en español): Cian-Magenta-Amarillo. Estos colores surgen de la siguiente combinación
(mezcla) de los primarios aditivos:
Cian = Verde + Azul
3. Magenta = Rojo + Azul
Amarillo = Rojo + Verde
En cuantoa su grado de pureza,ocurre algo inversoaloscoloresprimariosaditivos,yaque el grado
absolutoestarádeterminadoporlanulidadde unode suscomponentesylasaturaciónde losotros
dos. Los colores complementarios de los primarios, tanto aditivos como sustractivos, serán
recíprocamente:
Rojo ↔ Cian
Verde ↔ Magenta
Azul ↔ Amarillo
La combinación simultánea de los tres primarios aditivos saturados produce el blanco (0xFFFFFF).
Contrariamente, la combinación simultánea de los tres primarios sustractivos nulos produce el
negro (0x000000). Resulta claro también que la combinación de dos colores mutuamente
complementariosproduciráel blanco,de igual modoque lasustracción(absorción) de ambosdará
lugaral negro(ausenciatotal de color).Así,p.ej.,elrojo(0xFF0000) mássu complementarioquees
el cian(0x00FFFF),generanelblanco(0xFFFFFF).De hecho,elciannoesotracosaque lasustracción
del rojo al blanco. Obsérvense los siguientes gráficos:
Porsu parte,el grismediano(0x808080),que esel exactotérminomedioentreel negroyel blanco,
se obtendrá a partir de la combinación simultánea de los tres primarios aditivos medianos.
Análogamente, el gris semisaturado (claro) se obtendrá a partir de la combinación 0xC0C0C0,
mientrasque el grisseminulo(oscuro)mediante0x404040. De este modo,tenemosque el restode
loscolores,que estáncomprendidosentre el negro(0x000000) y el blanco(0xFFFFFF),surgende la
combinación de los tres primarios aditivos en distintos grados. En otras palabras: bastará con
reemplazar cada uno de los pares 0xHH-HH-HH por un valor comprendido entre 0x00 y 0xFF para
obtener cualquiera de los colores posibles.
Existen16 777 216 combinacionesdistintasenel sistemaRGBde 24 bits y, por lo tanto, 16 777 216
colores: 256 × 256 × 256 = 16 777 216. En la práctica, sin embargo, puede haber algunas
combinaciones que no sean válidas. Eso pasaba antiguamente, cuando la paleta de colores más
grande tenía 256 colores (8 bits). Por eso, existen 216 colores seguros, que serán visibles en
cualquierdispositivo sinnecesidadde tramado,reservándose losotros40 colorespara el sistema,
de los cuales algunos se muestran aquí.
4. HSL
En el sistemade coloresHSL los coloresse midenpor tres parámetros(hue,saturationylight) que
determinan la posición del color en el cilindro de colores HSL. El primer parámetro es el ángulo
horizontal, el segundo es la distancia horizontal del centro de la base y el tercero es la distancia
vertical (altura) del centro de la base.
Equivalencias
Entre lossistemaswebhayalgunas contradicciones que se pueden resumir en la siguiente tabla.
CÍRCULO CROMÁTICO
El círculo cromáticoes unarepresentaciónvisual de loscoloresprimarios,rojo,amarilloyazul,ysu
combinación para crear todos los demás colores visibles. Ayuda a las personas a comprender las
relacionesentreloscoloresparael arte yla planificacióndeldiseño,porejemplolascombinaciones
de colores. Recuerde que el negro y el blanco no aparecen en el círculo. El efecto del negro y el
blanco en relación al espacio de color se trata en la página de CARACTERÍSTICAS DEL COLOR y se
denomina "valor".
COLORES PRIMARIOS
Comoya mencionamos,loscoloresprimariossonel rojo,amarilloyazul. Se denominan primarios
5. porque no se basan en algún otro color. Pueden combinarse para crear cualquiera de los otros
coloresdel círculocromático.La mezclade pigmentosde los tres colores primarios forma el color
café.
COLORES SECUNDARIOS
Los coloressecundariossontres.Se creanmediante lamezclaencantidadesigualesde doscolores
primarios. Aparecen en el círculo cromático entre los dos colores primarios que los componen.
Naranja = rojo + amarillo
Verde = azul + amarillo
Morado = rojo + azul
COLORES COMPLEMENTARIOS
El color primario directamente al frente de un color secundario en el círculo se denomina color
“opuesto” o “complementario”. Tienen efectos interesantes entre sí, los que trataremos después.
Recuerde que cadaparcomplementarioconsisteenuncolorcálidoyunofrío.Losgruposde colores
complementarios son:
Rojo y verde
Azul y naranja
Amarillo y morado
COLORES TERCIARIOS
6. Terciariose refiere a"tercero".Estosseis colores son el tercer nivel de mezcla de colores RYB. Se
formanmediante lamezclade uncolorsecundarioconuno de loscoloresprimariosadyacentesen
el círculo cromático. Todos los colores del rojo al amarillo puro se denominan “cálidos”. Del
amarillo-verde al rojo-morado se denominan “fríos”. Entre los colores terciarios están:
Azul-verde
Rojo-naranja
Amarillo-naranja
Amarillo-verde
Rojo-morado
Azul-morado
EL CÍRCULO CROMÁTICO EN LA INDUSTRIA DE LA PINTURA
En la industria de la pintura, el círculo cromático se utiliza para ayudar a los diseñadores y
consumidores a tener el suficiente conocimiento para crear combinaciones de colores para
hogares y negocios. Aunque los químicos no lo utilizan directamente para formular colores
específicos, es muy útil para planificar combinaciones.
Estas sonalgunasnormassencillasparautilizarel círculocromáticoparacrear combinaciones.Pero
tal como con cualquier conjunto de normas sobre el color, se aplican en la mayoría de los casos,
7. pero no siempre. Por medio de la práctica puede aprender a confiar en sus ojos para decidir qué
colores combinan.
Todos los rojos combinan
Todos los azules combinan
Todos los verdes combinan
Los naranjas suaves crean una sensación de calidez
El amarillo combina con los verdes y naranjas
Los verdes pueden utilizarse como color neutral
El violeta combina con el verde
Los grises y colores neutrales combinan bien
De modo que utilice el círculo para ayudar a sus clientes a darse cuenta de que la selecciónde
coloresno estan difícil comopuedaparecer.Es una gran herramientaparafacilitarlaplanificación
de las combinaciones.