Volver al índiceColores

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:

Para combinar los colores de las páginas, se puede recurrir a sitios como Color Scheme Designer.


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 Los 16 Colores HTML 4.0
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 CSS 3:Color (aprobado 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


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 CSS 2, pero se consideran obsoletos en la recomendación CSS 3:Color, en favor de otros términos (llamados valores de apariencia) definidos en la futura recomendación CSS 3: Interface de usuario básico, actualmente (octubre de 2014) en elaboració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

CSS 3La recomendación CSS 3: Color permite define los colores mediante el modelo de color HSL (Hue, Saturation, Lightness, es decir, Tonalidad, Saturación, Luminancia).

Correcto en FirefoxCorrecto en IE9Incorrecto en IE8 Correcto en Chrome
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.

Hue: 0
S \ L 0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Hue: 51
S \ L 0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Hue: 102
S \ L 0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Hue: 153
S \ L 0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Hue: 204
S \ L 0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%
Hue: 255
S \ L 0% 20% 40% 60% 80% 100%
0%
20%
40%
60%
80%
100%

Volver al principio de la página


Opacidad: opacity

CSS 3La propiedad opacity incluida en la recomendación CSS 3: 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:

Correcto en FirefoxCorrecto en IE9Incorrecto en IE8Correcto en Chrome
p1 { 
  background-color: lightblue; 
}
p2 { background-color: lightyellow; opacity: 0.5; }
/* En el ejemplo también se utilizan propiedades de posicionamiento que no aparecen aquí. */

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

Nota: Internet Explorer 9 admite la propiedad opacity, pero Internet Explorer 8 no lo hacía, como se comenta en la página de diferencias entre IE9 e IE8.

Volver al principio de la página

Última modificación de esta página: 9 de octubre de 2014

Licencia de Creative Commons
Páginas web HTML / XHTML y hojas de estilo CSS por Bartolomé Sintes Marco
se distribuye bajo una Licencia Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional (CC BY-SA 4.0).