ColoresColoresEn 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:
Para combinar los colores de las páginas, se puede recurrir a sitios como Color Scheme Designer.
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
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
En el módulo CSS3:Color (apobado en septiembre de 2011) 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
Los colores del sistema hacen referencia a los colores utilizados por el interfaz del sistema operativo. Forman parte de la recomendación CSS2, pero se consideran obsoletos en el módulo CSS3:Color, en favor de otros términos (llamados valores de apariencia) definidos en el módulo CSS3: Interface de usuario básico (que actualmente -noviembre de 2011-, se encuentra en fase de candidata a recomendación desde mayo de 2004)
| 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
La recomendación CSS Módulo de color 3 permite define los colores mediante el modelo de color HSL (Hue, Saturation, Lightness, es decir, Tonalidad, Saturación, Luminancia).
    |
p {
background-color: hsl(153, 80%, 40%)
}
|
Si algo puede ir mal, irá mal. |
Nota: Internet Explorer 9 reconoce el modelo de color HSL. Las versiones anteriores no lo hacían, como se comenta en la página de diferencias entre IE9 e IE8.
Las tablas siguientes muestran los colores con el modelo HSL, por lo que sólo se ven los colores si el navegador admite el modelo hsl.
| S \ L | 0% | 20% | 40% | 60% | 80% | 100% |
| 0% | ||||||
| 20% | ||||||
| 40% | ||||||
| 60% | ||||||
| 80% | ||||||
| 100% |
| S \ L | 0% | 20% | 40% | 60% | 80% | 100% |
| 0% | ||||||
| 20% | ||||||
| 40% | ||||||
| 60% | ||||||
| 80% | ||||||
| 100% |
| S \ L | 0% | 20% | 40% | 60% | 80% | 100% |
| 0% | ||||||
| 20% | ||||||
| 40% | ||||||
| 60% | ||||||
| 80% | ||||||
| 100% |
| S \ L | 0% | 20% | 40% | 60% | 80% | 100% |
| 0% | ||||||
| 20% | ||||||
| 40% | ||||||
| 60% | ||||||
| 80% | ||||||
| 100% |
| S \ L | 0% | 20% | 40% | 60% | 80% | 100% |
| 0% | ||||||
| 20% | ||||||
| 40% | ||||||
| 60% | ||||||
| 80% | ||||||
| 100% |
| S \ L | 0% | 20% | 40% | 60% | 80% | 100% |
| 0% | ||||||
| 20% | ||||||
| 40% | ||||||
| 60% | ||||||
| 80% | ||||||
| 100% |
Volver al principio de la página
La propiedad opacity incluida en la recomendación CSS3: módulo de color permite hacer que un elemento sea parcialmente transparente. El valor de esta propiedad debe ser un valor decimal entre 0 y 1 (el valor 0 hace que el elemento sea completamente transparente y el valor 1 hace que el elemento sea completamente opaco).
Si un elemento parcialmente transparente se superpone a otro elemento de otro color, el navegador mezcla los colores de los elementos, como muestra el siguiente ejemplo:
|
p1 {
background-color: lightblue;
}
|
Este texto se encuentra situado a la izquierda, a la izquierda, a la izquierda, a la izquierda, a la izquierda, a la izquierda, a la izquierda, a la izquierda, a la izquierda Este texto se encuentra situado a la derecha, a la derecha, a la derecha, a la derecha, a la derecha, a la derecha, a la derecha, a la derecha, a la derecha |
Volver al principio de la página
Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Esta obra está bajo una licencia de Creative
Commons Reconocimiento-CompartirIgual 3.0 España.