# Colores

En una página web o en una hoja de estilo se puede definir los colores mediante códigos numéricos o mediante nombres de colores. Existen varios códigos numéricos, aunque lo habitual es utilizar códigos RGB.

En esta página se tratan los siguientes temas:

## Códigos de colores RGB

Las pantallas de ordenador consiguen los colores mezclando tres colores básicos (rojo - verde - azul). Cada color admite 256 niveles de intensidad, lo que hace un total de 256 x 256 x 256 = 16.777.216 colores distintos. Para codificar un color es suficiente indicar las intensidades de cada uno de los tres colores. Como las intensidades van de 0 a 255, se suelen expresar en notación hexadecimal (de 00 a FF) en vez de en notación decimal. El código de un color se escribe #RRGGBB, donde RR, GG y BB son los valores (hexadecimales) de la intensidad de los colores rojo, verde y azul respectivamente.

El color negro se consigue con la ausencia de cualquier color, así que su código RGB es #000000. El color blanco se consigue mezclando los tres colores con la máxima intensidad, así que su código RGB es #FFFFFF.

Volver al principio de la página

## Nombres de colores HTML 3.2

En la recomendación HTML 3.2 (aprobada el 14 de enero de 1997) se incluyeron dieciséis nombres de colores: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow. Estos colores son los colores de la paleta VGA de Windows. La tabla e ilustración siguientes muestran estos 16 colores, sus nombres y códigos RGB.

Color | Nombre | Código RGB |  | Color | Nombre | Código RGB |
| blue | #0000FF |  |  | navy | #000080
| fuchsia | #FF00FF |  |  | purple | #800080
| red | #FF0000 |  |  | maroon | #800000
| yellow | #FFFF00 |  |  | olive | #808000
| lime | #00FF00 |  |  | green | #008000
| aqua | #00FFFF |  |  | teal | #008080
| gray | #808080 |  |  | black | #000000
| white | #FFFFFF |  |  | silver | #C0C0C0

Volver al principio de la página

## Nombres de colores X11 / SVG

En el módulo CSS3:Color (que actualmente -octubre de 2009-, se encuentra en fase de documento de trabajo) se permiten los nombres de colores X11 (o SVG), que la mayoría de navegadores son capaces de representar desde hace tiempo. La tabla siguiente muestra los 140 colores, sus nombres y códigos RGB.

Nota: Los colores Fuchsia y Magenta son el mismo color y los colores Aqua y Cyan son también el mismo color, por lo que la tabla contiene en realidad 138 colores distintos.
También están duplicados los nombres de los colores grises, que pueden incluir los términos "gray" o "grey" (DarkGrey/DarkGray, etc). En X11 sólo era válida una de las dos variantes, pero en la recomendación SVG 1.0 ya se admitían ambas variantes.

Color | Nombre | Código RGB | Color | Nombre | Código RGB
| AliceBlue | #F0F8FF |  | LightPink | #FFB6C1
| AntiqueWhite | #FAEBD7 |  | LightSalmon | #FFA07A
| Aqua | #00FFFF |  | LightSeaGreen | #20B2AA
| Aquamarine | #7FFFD4 |  | LightSkyBlue | #87CEFA
| Azure | #F0FFFF |  | LightSlateGray | #778899
| Beige | #F5F5DC |  | LightSlateGrey | #778899
| Bisque | #FFE4C4 |  | LightSteelBlue | #B0C4DE
| Black | #000000 |  | LightYellow | #FFFFE0
| BlanchedAlmond | #FFEBCD |  | Lime | #00FF00
| Blue | #0000FF |  | LimeGreen | #32CD32
| BlueViolet | #8A2BE2 |  | Linen | #FAF0E6
| Brown | #A52A2A |  | Magenta | #FF00FF
| BurlyWood | #DEB887 |  | Maroon | #800000
| CadetBlue | #5F9EA0 |  | MediumAquamarine | #66CDAA
| Chartreuse | #7FFF00 |  | MediumBlue | #0000CD
| Chocolate | #D2691E |  | MediumOrchid | #BA55D3
| Coral | #FF7F50 |  | MediumPurple | #9370DB
| CornflowerBlue | #6495ED |  | MediumSeaGreen | #3CB371
| Cornsilk | #FFF8DC |  | MediumSlateBlue | #7B68EE
| Crimson | #DC143C |  | MediumSpringGreen | #00FA9A
| Cyan | #00FFFF |  | MediumTurquoise | #48D1CC
| DarkBlue | #00008B |  | MediumVioletRed | #C71585
| DarkCyan | #008B8B |  | MidnightBlue | #191970
| DarkGoldenrod | #B8860B |  | MintCream | #F5FFFA
| DarkGray | #A9A9A9 |  | MistyRose | #FFE4E1
| DarkGrey | #A9A9A9 |  | Moccasin | #FFE4B5
| DarkGreen | #006400 |  | NavajoWhite | #FFDEAD
| DarkKhaki | #BDB76B |  | Navy | #000080
| DarkMagenta | #8B008B |  | OldLace | #FDF5E6
| DarkOliveGreen | #556B2F |  | Olive | #808000
| DarkOrange | #FF8C00 |  | OliveDrab | #6B8E23
| DarkOrchid | #9932CC |  | Orange | #FFA500
| DarkRed | #8B0000 |  | OrangeRed | #FF4500
| DarkSalmon | #E9967A |  | Orchid | #DA70D6
| DarkSeaGreen | #8FBC8F |  | PaleGoldenrod | #EEE8AA
| DarkSlateBlue | #483D8B |  | PaleGreen | #98FB98
| DarkSlateGray | #2F4F4F |  | PaleTurquoise | #AFEEEE
| DarkSlateGrey | #2F4F4F |  | PaleVioletRed | #DB7093
| DarkTurquoise | #00CED1 |  | PapayaWhip | #FFEFD5
| DarkViolet | #9400D3 |  | PeachPuff | #FFDAB9
| DeepPink | #FF1493 |  | Peru | #CD853F
| DeepSkyBlue | #00BFFF |  | Pink | #FFC0CB
| DimGray | #696969 |  | Plum | #DDA0DD
| DimGrey | #696969 |  | PowderBlue | #B0E0E6
| DodgerBlue | #1E90FF |  | Purple | #800080
| FireBrick | #B22222 |  | Red | #FF0000
| FloralWhite | #FFFAF0 |  | RosyBrown | #BC8F8F
| ForestGreen | #228B22 |  | RoyalBlue | #4169E1
| Fuchsia | #FF00FF |  | SaddleBrown | #8B4513
| Gainsboro | #DCDCDC |  | Salmon | #FA8072
| GhostWhite | #F8F8FF |  | SandyBrown | #F4A460
| Gold | #FFD700 |  | SeaGreen | #2E8B57
| Goldenrod | #DAA520 |  | Seashell | #FFF5EE
| Gray | #808080 |  | Sienna | #A0522D
| Grey | #808080 |  | Silver | #C0C0C0
| Green | #008000 |  | SkyBlue | #87CEEB
| GreenYellow | #ADFF2F |  | SlateBlue | #6A5ACD
| Honeydew | #F0FFF0 |  | SlateGray | #708090
| HotPink | #FF69B4 |  | SlateGrey | #708090
| IndianRed | #CD5C5C |  | Snow | #FFFAFA
| Indigo | #4B0082 |  | SpringGreen | #00FF7F
| Ivory | #FFFFF0 |  | SteelBlue | #4682B4
| Khaki | #F0E68C |  | Tan | #D2B48C
| Lavender | #E6E6FA |  | Teal | #008080
| LavenderBlush | #FFF0F5 |  | Thistle | #D8BFD8
| LawnGreen | #7CFC00 |  | Tomato | #FF6347
| LemonChiffon | #FFFACD |  | Turquoise | #40E0D0
| LightBlue | #ADD8E6 |  | Violet | #EE82EE
| LightCoral | #F08080 |  | Wheat | #F5DEB3
| LightCyan | #E0FFFF |  | White | #FFFFFF
| LightGoldenrodYellow | #FAFAD2 |  | WhiteSmoke | #F5F5F5
| LightGray | #D3D3D3 |  | Yellow | #FFFF00
| LightGreen | #90EE90 |  | YellowGreen | #9ACD32
| LightGrey | #D3D3D3 |  |  |

Volver al principio de la página

## Nombres de colores del sistema

Los colores del sistema hacen referencia a los colores utilizados por el interfaz del sistema operativo. Forman parte de la recomendación CSS2, pero están desaprobados en el módulo CSS3:Color (que actualmente -octubre de 2009-, se encuentra en fase de documento de trabajo), en favor de otros términos (llamados valores de apariencia) definidos en el módulo CSS3: Interface de usuario básico (que actualmente -octubre de 2009-, se encuentra en fase de candidata a recomendación)

Color | Nombre | Concepto |
| ActiveBorder | Borde de la ventana activa |
| ActiveCaption | Título de la ventana activa |
| AppWorkspace | Color de fondo del interfaz de múltiplesdocumentos |
| Background | Color de fondo del escritorio |
| ButtonFace | Color frontal de los elementos 3D |
| ButtonHighlight | Sombra oscura de los elementos 3D (bordes opuestos a la fuente de luz) |
| ButtonShadow | Sombra de los elementos 3D |
| ButtonText | Texto de los botones |
| CaptionText | Texto en título, caja de tamaño y caja de flecha de desplazamiento |
| GrayText | Texto en gris (desactivado). Este color es #000000 si no se puede mostrar un colo gris sólido |
| Highlight | Elemento(s) seleccionado(s) en un control |
| HighlightText | Texto de (de los) elemento(s) seleccionado(s) en un control |
| InactiveBorder | Borde de la ventana inactiva |
| InactiveCaption | Título de la ventana inactiva |
| InactiveCaptionText | Texto de un título inactivo |
| InfoBackground | Color de fondo de los tooltips |
| InfoText | Texto de los tooltips |
| Menu | Fondo de los menús |
| MenuText | Texto de los menús |
| Scrollbar | Área gris de la barra de desplazamiento |
| ThreeDDarkShadow | Sombra oscura de los elementos 3D |
| ThreeDFace | Color frontal de los elementos 3D |
| ThreeDHighlight | Color brillante de los elementos 3D |
| ThreeDLightShadow | Color claro de los elementos 3D (bordes frente a la fuente de luz) |
| ThreeDShadow | Sombra oscura de los elementos 3D |
| Window | Fondo de la ventana |
| WindowFrame | Marco de la ventana |
| WindowText | Texto en las ventanas |

Volver al principio de la página

## Códigos de colores HSL

La futura recomendación CSS Módulo de color 3, actualmente (noviembre de 2009) en fase de borrador, permitirá definir los colores mediante el modelo de color HSL (Hue, Saturation, Lightness, es decir, Tonalidad, Saturación, Luminancia). Se comenta en la lección de CSS3: futuras propiedades.

Volver al principio de la página