Hay tres maneras distintas de definir un color. La manera más fácil es nombrar el color usando la palabra en inglés. Por ejemplo: black (negro), white (blanco), red (rojo), green (verde) y blue (azul). He juntado aquí los nombres de los colores que son soportados en HTML.
| Color | Hexa | Color | Hex | Color | Hex | Color | Hex |
|---|---|---|---|---|---|---|---|
| aqua | #00FFFF | green | #008000 | navy | #000080 | silver | #C0C0C0 |
| black | #000000 | gray | #808080 | olive | #808000 | teal | #008080 |
| blue | #0000FF | lime | #00FF00 | purple | #800080 | white | #FFFFFF |
| fuchsia | #FF00FF | maroon | #800000 | red | #FF0000 | yellow | #FFFF00 |
Antiguamente, solo Internet Explorer tenia soporte para los valores RGB en HTML. Pero hoy en día todos los navegadores lo usan. Ademas los colores en formato RGB se pueden usar y se usan mucho en CSS.
RGB es el acrónimo de: Red, Green, Blue. Cada color de estos puede tener un valor entre 0 (falta de color) y 255 (el valor máximo del color). Esta es la manera de cómo se deben construir los colores RGB.
| bgcolor="rgb(255,255,255)" | White |
| bgcolor="rgb(255,0,0)" | Red |
| bgcolor="rgb(0,255,0)" | Green |
| bgcolor="rgb(0,0,255)" | Blue |
El sistema hexadecimal parece bastante difícil a primera vista pero con todo esto te aseguro que con el paso del tiempo, y con un poco de práctica, podrás entenderlo en su totalidad. EL sistema de color hexadecimal es el sistema estándar para todos los navegadores. Es seguro y compatible no sólo en aplicaciones web.
El sistema hexadecimal es una representación de 6 caracteres de color. Los primeros dos caracteres (RR) representan el valor rojo, y los dos siguientes (GG) el verde, y los dos últimos (BB) el azul.
htmlbgcolor="#RRGGBB"| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
De esta manera las posibilidades son mayores y el sistema puede tener 16 valores.
Un ejemplo de un código hexadecimal sería:
htmlbgcolor="#FFFFFF"La letra "F" es el valor máximo que puede tomar el sistema. Cuando un navegador ve este código mostrará el color blanco. En caso de que quieras aprender un poco mas sobre como se forman los colores hexadecimales, tenemos la siguiente fórmula:
html(15 * 16) + (15) = 255htmlLa fórmula es muy simple. Tomamos el primer valor, "F" o 15 y ésta se multiplica por 16 y agregamos el segundo valor 15. El resultado es 255, el valor máximo que puede tener un color primario.htmlbgcolor="#CC7005"
CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)
(7 * 16) + (0) = 112
05(BB - Blue)
(0 * 16) + (5) = 5El sistema hexadecimal es bastante utilizado para crear páginas. Este es compatible con la mayoría de los navegadores, de esta manera los colores visualizados en una página web son siempre los mismos. Para estar seguro, usa los llamados colores TrueColors como: "#0011EE", "#44HHFF", o "#117788". Este tipo de colores no varían de un navegador a otro.
Aquí tenemos una lista de los colores TrueColors.
| *000 | 300 | 600 | 900 | C00 | *F00 |
| *003 | 303 | 603 | 903 | C03 | *F03 |
| 006 | 306 | 606 | 906 | C06 | F06 |
| 009 | 309 | 609 | 909 | C09 | F09 |
| 00C | 30C | 60C | 90C | C0C | F0C |
| *00F | 30F | 60F | 90F | C0F | *F0F |
| 030 | 330 | 630 | 930 | C30 | F30 |
| 033 | 333 | 633 | 933 | C33 | F33 |
| 036 | 336 | 636 | 936 | C36 | F36 |
| 039 | 339 | 639 | 939 | C39 | F39 |
| 03C | 33C | 63C | 93C | C3C | F3C |
| 03F | 33F | 63F | 93F | C3F | F3F |
| 060 | 360 | 660 | 960 | C60 | F60 |
| 063 | 363 | 663 | 963 | C63 | F63 |
| 066 | 366 | 666 | 966 | C66 | F66 |
| 069 | 369 | 669 | 969 | C69 | F69 |
| 06C | 36C | 66C | 96C | C6C | F6C |
| 06F | 36F | 66F | 96F | C6F | F6F |
| 090 | 390 | 690 | 990 | C90 | F90 |
| 093 | 393 | 693 | 993 | C93 | F93 |
| 096 | 396 | 696 | 996 | C96 | F96 |
| 099 | 399 | 699 | 999 | C99 | F99 |
| 09C | 39C | 69C | 99C | C9C | F9C |
| 09F | 39F | 69F | 99F | C9F | F9F |
| 0C0 | 3C0 | 6C0 | 9C0 | CC0 | FC0 |
| 0C3 | 3C3 | 6C3 | 9C3 | CC3 | FC3 |
| 0C6 | 3C6 | 6C6 | 9C6 | CC6 | FC6 |
| 0C9 | 3C9 | 6C9 | 9C9 | CC9 | FC9 |
| 0CC | 3CC | 6CC | 9CC | CCC | FCC |
| 0CF | 3CF | 6CF | 9CF | CCF | FCF |
| *0F0 | 3F0 | *6F0 | 9F0 | CF0 | *FF0 |
| 0F3 | *3F3 | *6F3 | 9F3 | CF3 | *FF3 |
| *0F6 | *3F6 | 6F6 | 9F6 | *CF6 | *FF6 |
| 0F9 | 3F9 | 6F9 | 9F9 | CF9 | FF9 |
| *0FC | *3FC | 6FC | 9FC | CFC | FFC |
| *0FF | *3FF | *6FF | 9FF | CFF | *FFF |
Por otro lado, de estos a estos 216 seguros, solamente 22 se muestran igual en todos los monitores. Los monitores de 8-bits eran más comunes de lo que son hoy en día, cuando fue desarrollada la paleta de 216-colores. Se ha descubierto que sólo 22 de los 216 colores son realmente vistos sin una re-asignación en los monitores de 16-bits.
Aquí adjuntamos una tabla con esos 22 que comentamos que se ven igual en cualquier monitor:
| *000 | *F00 |
| *003 | *F03 |
| *00F | *F0F |
| *FF0 | *FF3 |
| *CF6 | *FF6 |
| *0F0 | *6F0 |
| *3F3 | *6F3 |
| *0F6 | *3F6 |
| *0FC | *3FC |
| *0FF | *3FF |
| *6FF | *FFF |
Como puedes ver, hay muchos factores a tener en cuenta a la hora de elegir un color en la web. Estos dependen tanto del soporte electrónico donde se representa (monitor de ordenador de 8 bits o 16 bits, la luminosidad de esta, pantalla de un móvil, etc), como de la aplicación que los representa ( navegadores, aplicaciones de edición de fotos etc).