Colores hexadecimales
Teoría sobre los códigos de colores HTML
Seguramente se está preguntando: « ¿Tiene algún significado esta extraña
combinación de letras y números?» Pues la respuesta es «Sí» y así es
como funciona:)
Formato de los códigos HTML:
Cada código HTML comprende el símbolo «#» y 6 letras o números. Estos números se expresan en el sistema de numeración hexadecimal. Por ejemplo «FF» en hexadecimal representa el número 255 en Decimal.
Significado de los símbolos:
Significado de los símbolos: Los dos primeros símbolos del código de color HTML representan la intensidad del color rojo. 00 es el menos intenso y FF es el más intenso. El tercer y el cuarto número representan la intensidad del verde y el quinto y el sexto representan la intensidad del azul. Así, con esta combinación de la intensidad del rojo, verde y azul podemos mezclar cualquier color que deseemos de corazón;)
Ejemplos:
#FF0000 - Con este código HTML le decimos al navegador que muestre la máxima cantidad de rojo y nada de verde ni de azul. El resultado es evidentemente el color rojo puro:
#00FF00 - Este código HTML muestra solo el verde y nada de rojo ni de azul. El resultado es:
#0000FF - Este código HTML muestra solo el azul y nada de rojo ni de verde. El resultado es:
#FFFF00 - Con la combinación de color rojo y verde obtenemos el amarillo:
#CCEEFF - Cogemos un poco de rojo, un poco más de verde y el máximo de azul para obtener el color del cielo:
Formato de los códigos HTML:
Cada código HTML comprende el símbolo «#» y 6 letras o números. Estos números se expresan en el sistema de numeración hexadecimal. Por ejemplo «FF» en hexadecimal representa el número 255 en Decimal.
Significado de los símbolos:
Significado de los símbolos: Los dos primeros símbolos del código de color HTML representan la intensidad del color rojo. 00 es el menos intenso y FF es el más intenso. El tercer y el cuarto número representan la intensidad del verde y el quinto y el sexto representan la intensidad del azul. Así, con esta combinación de la intensidad del rojo, verde y azul podemos mezclar cualquier color que deseemos de corazón;)
Ejemplos:
#FF0000 - Con este código HTML le decimos al navegador que muestre la máxima cantidad de rojo y nada de verde ni de azul. El resultado es evidentemente el color rojo puro:
#00FF00 - Este código HTML muestra solo el verde y nada de rojo ni de azul. El resultado es:
#0000FF - Este código HTML muestra solo el azul y nada de rojo ni de verde. El resultado es:
#FFFF00 - Con la combinación de color rojo y verde obtenemos el amarillo:
#CCEEFF - Cogemos un poco de rojo, un poco más de verde y el máximo de azul para obtener el color del cielo:
RGB
Fundamento teórico
La paleta de colores RGB (RVA en español) consta, básicamente, de tres colores primarios aditivos: Rojo-Verde-Azul. Estos colores primarios aditivos, en HTML, están representados por tres pares hexadecimales del tipo 0xHH-HH-HH según el siguiente formato: (los colores básicos o primarios, 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 extremo inferior de la escala cromática
parte de una intensidad (grado) de color mínima (nulo = par 0x00), pasa por una intensidad de color media (mediano = par 0x80 [128 decimal]) hasta llegar a una intensidad de color máxima (saturado = par 0xFF). El grado de más alta pureza (absoluto) de un color primario aditivo estará determinado por la presencia total del mismo (saturación = 0xFF) junto con la ausencia total (nulidad = 0x00) de los otros dos colores primarios aditivos.
Además de estos tres colores primarios aditivos (RVA), existen tres colores primarios sustractivos o CMY (CMA en español): Cian-Magenta-Amarillo. Estos colores surgen de la siguiente combinación (mezcla) de los primarios aditivos:
- Cian = Verde + Azul
- Magenta = Rojo + Azul
- Amarillo = Rojo + Verde
En cuanto a su grado de pureza, ocurre algo inverso a los colores primarios aditivos, ya que el grado absoluto estará determinado por la nulidad de uno de sus componentes y la saturación de los otros 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 complementarios producirá el blanco, de igual
modo que la sustracción (absorción) de ambos dará lugar al negro (ausencia total de color).
Así, p. ej., el rojo (0xFF0000) más su complemetario que es el cian
(0x00FFFF), generan el blanco (0xFFFFFF). De hecho, el cian no es otra
cosa que la sustracción del rojo al blanco. Obsérvense los siguientes
gráficos:
Por su parte, el gris mediano (0x808080), que es el exacto término medio entre el negro y el 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, mientras que el gris seminulo (oscuro) mediante 0x404040. De este modo, tenemos que el resto de los colores, que están comprendidos entre el negro (0x000000) y el blanco (0xFFFFFF), surgen de 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.
Existen 16 777 216 combinaciones distintas en el sistema RGB de 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 cualquier dispositivo sin necesidad de tramado, reservándose los otros 40 colores para el sistema, de los cuales algunos se muestran aquí.
En el campo del diseño gráfico, se han definido varios modelos para
hacer referencia a los colores. Los dos modelos más conocidos son RGB y
CMYK. Simplificando su explicación, el modelo RGB consiste en definir un
color indicando la cantidad de color rojo, verde y azul que se debe mezclar
para obtener ese color. Técnicamente, el modelo RGB es un modelo de
tipo "aditivo", ya que los colores se obtienen sumando sus componentes.
Por lo tanto, en el modelo RGB un color se define indicando sus tres
componentes R (rojo), G (verde) y B (azul). Cada una de las componentes
puede tomar un valor entre cero y un valor máximo. De esta forma, el
color rojo puro en RGB se crea mediante el máximo valor de la componente
R y un valor de
0 para las componentes G y B.
Si todas las componentes valen
0, el color creado es el
negro y si todas las componentes toman su valor máximo, el color
obtenido es el blanco. En CSS, las componentes de los colores definidos
mediante RGB decimal pueden tomar valores entre 0 y 255. El siguiente ejemplo establece el color del texto de un párrafo:p { color: rgb(71, 98, 176); }
La sintaxis que se utiliza para indicar los colores es
rgb()
y entre paréntesis se indican las tres componentes RGB, en ese mismo
orden y separadas por comas. El color del ejemplo anterior se obtendría
mezclando las componentes R=71, G=98, B=176, que se corresponde con un color azul claro.
Si se indica un valor menor que
0 para una componente, automáticamente se transforma su valor en 0. Igualmente, si se indica un valor mayor que 255, se transforma automáticamente su valor a 255.3.2.3. RGB porcentual
Las componentes RGB de un color también se pueden indicar mediante un
porcentaje. El funcionamiento y la sintaxis de este método es el mismo
que el del RGB decimal. La única diferencia es que en este caso el valor
de las componentes RGB puede tomar valores entre
0% y 100%.
Por tanto, para transformar un valor RGB decimal en un valor RGB
porcentual, es preciso realizar una regla de tres considerando que 0 es igual a 0% y 255 es igual a 100%.
El mismo color del ejemplo anterior se puede representar de forma porcentual:
p { color: rgb(27%, 38%, 69%); }
Al igual que sucede con el RGB decimal, si se indica un valor inferior a
0%, se transforma automáticamente en 0% y si se indica un valor superior a 100%, se trunca su valor a 100%.3.2.4. RGB hexadecimal
Aunque es el método más complicado para indicar los colores, se trata
del método más utilizado con mucha diferencia. De hecho, prácticamente
todos los sitios web reales utilizan exclusivamente este método.
Para entender el modelo RGB hexadecimal, en primer lugar es preciso introducir un concepto matemático llamado sistema numérico hexadecimal. Cuando realizamos operaciones matemáticas, siempre utilizamos 10 símbolos para representar los números (del
0 al 9). Por este motivo, se dice que utilizamos un sistema numérico decimal.
No obstante, el sistema decimal es solamente uno de los muchos
sistemas numéricos que se han definido. Entre los sistemas numéricos
alternativos más utilizados se encuentra el sistema hexadecimal, que
utiliza 16 símbolos para representar sus números.
Como sólo conocemos 10 símbolos numéricos, el sistema hexadecimal utiliza también seis letras (de la
A a la F) para representar los números. De esta forma, en el sistema hexadecimal, después del 9 no va el 10, sino la A. La letra B equivale al número 11, la C al 12, la D al 13, la E al 14 y la F al número 15.
Definir un color en CSS con el método RGB hexadecimal requiere realizar los siguientes pasos:
- Determinar las componentes RGB decimales del color original, por ejemplo: R =
71, G = 98, B = 176
- Transformar el valor decimal de cada componente al sistema numérico
hexadecimal. Se trata de una operación exclusivamente matemática, por lo
que puedes utilizar una calculadora. En el ejemplo anterior, el valor
hexadecimal de cada componente es: R = 47, G = 62, B = B0
- Para obtener el color completo en formato RGB hexadecimal, se
concatenan los valores hexadecimales de las componentes RGB en ese orden
y se les añade el prefijo #. De esta forma, el color del ejemplo anterior es #4762B0 en formato RGB hexadecimal.
Siguiendo el mismo ejemplo de las secciones anteriores, el color del
párrafo se indica de la siguiente forma utilizando el formato RGB
hexadecimal:
p { color: #4762B0; }
Recuerda que aunque es el método más complicado para definir un
color, se trata del método que utilizan la inmensa mayoría de sitios
web, por lo que es imprescindible dominarlo. Afortunadamente, todos los
programas de diseño gráfico convierten de forma automática los valores
RGB decimales a sus valores RGB hexadecimales, por lo que no tienes que
hacer ninguna operación matemática:
Colores hexadecimales
| Nombre del color | Código hex | Color "seguro para web" más cercano |
| BLANCO | #FFFFFF | #FFFFFF |
| AZUR | #F0FFFF | #FFFFFF |
| CREMA | #F5FFFA | #FFFFFF |
| NIEVE | #FFFAFA | #FFFFFF |
| MARFIL | #FFFFF0 | #FFFFFF |
| BLANCO FANTASMA | #F8F8FF | #FFFFFF |
| BLANCO FLORAL | #FFFAF0 | #FFFFFF |
| AZUL ALICIA | #F0F8FF | #FFFFFF |
| CIAN CLARO | #E0FFFF | #CCFFFF |
| MELÓN VERDE | #F0FFF0 | #FFFFFF |
| AMARILLO CLARO | #FFFFE0 | #FFFFFF |
| CONCHA | #FFF5EE | #FFFFFF |
| SONROJO LAVANDA | #FFF0F5 | #FFFFFF |
| HUMO BLANCO | #F5F5F5 | #FFFFFF |
| ENCAJE ANTIGUO | #FDF5E6 | #FFFFFF |
| SEDA DE MAÍZ | #FFF8DC | #FFFFCC |
| LINO | #FAF0E6 | #FFFFFF |
| AMARILLO ALAMBRE DORADO CLARO | #FAFAD2 | #FFFFCC |
| GASA LIMÓN | #FFFACD | #FFFFCC |
| BEIGE | #F5F5DC | #FFFFCC |
| LAVANDA | #E6E6FA | #CCCCFF |
| BATIDO DE PAPAYA | #FFEFD5 | #FFFFCC |
| ROSA BRUMOSA | #FFE4E1 | #FFCCCC |
| BLANCO ANTIGUO | #FAEBD7 | #FFFFCC |
| BLANCO ALMENDRA | #FFEBCD | #FFFFCC |
| SOPA | #FFE4C4 | #FFFFCC |
| TURQUESA PÁLIDO | #AFEEEE | #99FFFF |
| MOCASÍN | #FFE4B5 | #FFCCCC |
| GAINSBORO | #DCDCDC | #CCCCCC |
| SOPLIDO MELOCOTÓN | #FFDAB9 | #FFCCCC |
| BLANCO NAVAJO | #FFDEAD | #FFCC99 |
| DORADO ALAMBRE PÁLIDO | #EEE8AA | #FFFF99 |
| TRIGO | #F5DEB3 | #FFCCCC |
| POLVO AZUL | #B0E0E6 | #CCCCFF |
| AGUAMARINA | #7FFFD4 | #66FFCC |
| GRIS CLARO | #D3D3D3 | #CCCCCC |
| ROSA | #FFC0CB | #FFCCCC |
| AZUL CLARO | #ADD8E6 | #99CCFF |
| CARDO | #D8BFD8 | #CCCCCC |
| ROSA CLARO | #FFB6C1 | #FFCCCC |
| AZUL CIELO CLARO | #87CEFA | #99CCFF |
| VERDE PÁLIDO | #98FB98 | #99FF99 |
| AZUL ACERO CLARO | #B0C4DE | #99CCCC |
| CAQUI | #F0D58C | #FFCC99 |
| AZUL CIELO | #87CEEB | #99CCFF |
| AGUA | #00FFFF | #00FFFF |
| CIAN | #00FFFF | #00FFFF |
| PLATA | #C0C0C0 | #CCCCCC |
| CIRUELA | #DDA0DD | #CC99CC |
| GRIS | #BEBEBE | #CCCCCC |
| VERDE CLARO | #90EE90 | #99FF99 |
| VIOLETA | #EE82EE | #FF99FF |
| AMARILLO | #FFFF00 | #FFFF00 |
| TURQUESA | #40E0D0 | #33CCCC |
| MADERA FORNIDA | #DEB887 | #CCCC99 |
| AMARILLO VERDE | #ADFF2F | #99FF33 |
| BRONCEADO | #D2B48C | #CCCC99 |
| TURQUESA MEDIO | #48D1CC | #33CCCC |
| SALMÓN CLARO | #FFA07A | #FF9966 |
| AGUAMARINA MEDIO | #66CDAA | #66CC99 |
| GRIS OSCURO | #A9A9A9 | #999999 |
| ORQUÍDEA | #DA70D6 | #CC66CC |
| VERDE MAR INTENSO | #8FBC8F | #99CC99 |
| AZUL CIELO INTENSO | #00BFFF | #00CCFF |
| MARRÓN ARENA | #F4A460 | #FF9966 |
| DORADO | #FFD700 | #FFCC00 |
| VERDE PRIMAVERA MEDIO | #00FA9A | #00FF99 |
| CAQUI OSCURO | #BDB76B | #CCCC66 |
| ACIANO AZUL | #6495ED | #6699FF |
| ROSA CALIENTE | #FF69B4 | #FF66CC |
| SALMÓN OSCURO | #E9967A | #FF9966 |
| TURQUESA OSCURO | #00CED1 | #00CCCC |
| VERDE PRIMAVERA | #00FF7F | #00FF66 |
| CORAL CLARO | #F08080 | #FF9999 |
| MARRÓN ROSADO | #BC8F8F | #CC9999 |
| SALMÓN | #FA8072 | #FF9966 |
| CHARTREUSE | #7FFF00 | #66FF00 |
| PÚRPURA MEDIO | #9370DB | #9966CC |
| VERDE CÉSPED | #7CFC00 | #66FF00 |
| AZUL DODGER | #1E90FF | #3399FF |
| VERDE AMARILLO | #9ACD32 | #99CC33 |
| VIOLETA ROJO PÁLIDO | #DB7093 | #CC6699 |
| AZUL PIZARRA MEDIO | #7B68EE | #6666FF |
| ORQUÍDEA MEDIO | #BA55D3 | #CC66CC |
| CORAL | #FF7F50 | #FF6666 |
| AZUL CADETE | #5F9EA0 | #669999 |
| VERDE MAR CLARO | #20B2AA | #339999 |
| DORADO ALAMBRE | #DAA520 | #CC9933 |
| NARANJA | #FFA500 | #FF9900 |
| GRIS PIZARRA CLARO | #778899 | #669999 |
| FUCSIA | #FF00FF | #FF00FF |
| MAGENTA | #FF00FF | #FF00FF |
| VERDE MAR MEDIO | #3CB371 | #33CC66 |
| PERÚ | #CD853F | #CC9933 |
| AZUL ACERO | #4682B4 | #3399CC |
| AZUL REAL | #4169E1 | #3366CC |
| GRIS PIZARRA | #708090 | #669999 |
| TOMATE | #FF6347 | #FF6633 |
| NARANJA OSCURO | #FF8C00 | #FF9900 |
| AZUL PIZARRA | #6A5ACD | #6666CC |
| VERDE LIMA | #32CD32 | #33CC33 |
| LIMA | #00FF00 | #00FF00 |
| ROJO INDIO | #CD5C5C | #CC6666 |
| ORQUÍDEA OSCURO | #9932CC | #9933CC |
| AZUL VIOLETA | #8A2BE2 | #9933FF |
| ROSA INTENSO | #FF1493 | #FF0099 |
| DORADO ALAMBRE OSCURO | #B8860B | #CC9900 |
| CHOCOLATE | #D2691E | #CC6633 |
| CIAN OSCURO | #008B8B | #009999 |
| GRIS DIFUSO | #696969 | #666666 |
| GRIS ACEITUNA | #6B8E23 | #669933 |
| VERDE MAR | #2E8B57 | #339966 |
| VERDE CERCETA | #008080 | #009999 |
| VIOLETA OSCURO | #9400D3 | #9900CC |
| VIOLETA ROJO MEDIO | #C71585 | #CC0066 |
| NARANJA ROJO | #FF4500 | #FF3300 |
| ACEITUNA | #808000 | #999900 |
| SIENA | #A0522D | #996633 |
| AZUL PIZARRA OSCURO | #483D8B | #333399 |
| VERDE ACEITUNA OSCURO | #556B2F | #666633 |
| VERDE BOSQUE | #228B22 | #339933 |
| CARMESÍ | #DC143C | #CC0033 |
| AZUL | #0000FF | #0000FF |
| MAGENTA OSCURO | #8B008B | #990099 |
| GRIS PIZARRA OSCURO | #2F4F4F | #336666 |
| MARRÓN MONTURA | #8B4513 | #993300 |
| MARRÓN | #A52A2A | #993333 |
| LADRILLO REFRACTARIO | #B22222 | #993333 |
| PÚRPURA | #800080 | #990099 |
| VERDE | #008000 | #009900 |
| ROJO | #FF0000 | #FF0000 |
| AZUL MEDIO | #0000CD | #0000CC |
| ÍNDIGO | #4B0082 | #330099 |
| AZUL MEDIANOCHE | #191970 | #000066 |
| VERDE OSCURO | #006400 | #006600 |
| AZUL OSCURO | #00008B | #000099 |
| AZUL MARINO | #000080 | #000099 |
| ROJO OSCURO | #8B0000 | #990000 |
| GRANATE | #800000 | #990000 |
| NEGRO | #000000 | #000000 |
No hay comentarios:
Publicar un comentario