CSS: Colores

La recomendación CSS 3: Color (junio de 2011) describe los sistemas de definición de colores (nombres o códigos numéricos) que se pueden utilizar en las hojas de estilo, así como la forma de definir la opacidad de los elementos.

Los colores se pueden expresar mediante varios sistemas de unidades: RGB, RGBA, HSL y HSLA, así como mediante nombre de colores (básicos o extendidos)

En esta lección se explica únicamente cómo se hace referencia a un color en una hoja de estilo. Para encontrar combinaciones de colores visualmente atractivas, se puede recurrir a sitios como Paletton o Coolors.

Códigos de colores RGB

Los códigos de colores RGB ya formaban parte de la recomendación CSS 1 (diciembre de 1996).

Las pantallas de ordenador consiguen los colores mezclando tres colores básicos (rojo, verde y 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 hacer referencia a un color concreto, basta con indicar las intensidades de cada uno de los tres colores básicos.

Los códigos RGB se pueden expresar de distintas formas:

Las más utilizadas son la tercera y la primera.

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p {
  background-color: #14B76E;
}

Si algo puede ir mal, irá mal.

El color negro se consigue con la ausencia de cualquier color, así que su código RGB es rgb(0, 0, 0), rgb(0%, 0%, 0%), #000000 o #000.

El color blanco se consigue mezclando los tres colores con la máxima intensidad, así que su código RGB es rgb(255, 255, 255), rgb(100%, 100%, 100%), #FFFFFF o #FFF.

Cuadros de colores RGB


El cuadro siguiente permite generar códigos de colores RGB moviendo los deslizadores:

Generador de códigos RGB
Decimal Hexadecimal
Rojo:
Verde:
Azul:

Códigos RGB:

Códigos de colores RGBA

Los códigos de colores RGBA se incorporaron a CSS en la recomendación CSS 3: Color (junio de 2011).

Estos códigos incorporan la transparencia alpha a los códigos RGB mediante un cuarto valor que indica la transparencia del elemento. La transparencia se expresa como un número decimal entre 0 y 1, en el que el 0 significa completamente transparente y el 1 completamente opaco.

Los códigos RGBA se pueden expresar de distintas formas:


El cuadro siguiente permite generar colores RGBA moviendo los deslizadores. Para poder apreciar el funcionamiento de la transparencia, el cuadro muestra dos rectángulos de color, en el que el color del rectángulo situado por delante permite transparencia:

Generador de códigos RGBA
Decimal
Color trasero
Rojo:
Verde:
Azul:
Color delantero
Rojo:
Verde:
Azul:
Transparencia:

Código RGBA:

Códigos de colores HSL

Los códigos de colores HSL se incorporaron a CSS en la recomendación CSS 3: Color (junio de 2011).

En el modelo de color HSL el color se define mediante tres valores:

Correcto en Firefox Correcto en Internet Explorer Correcto en Chrome
p {
  background-color: hsl(153, 80%, 40%)
}

Si algo puede ir mal, irá mal.

El modelo HSL es más intuitivo que el modelo RGB y su uso probablemente se generalice en el futuro.


El cuadro siguiente permite generar colores HSL moviendo los deslizadores:

Valor
Matiz:
Saturación:
Luminosidad:

Código HSL:

Códigos de colores HSLA

Los códigos de colores HSLA se incorporaron a CSS en la recomendación CSS 3: Color (junio de 2011).

Estos códigos incorporan la transparencia alpha a los códigos HSL mediante un cuarto valor que indica la transparencia del elemento. La transparencia se expresa como en el caso de los códigos RGBA con un número decimal entre 0 y 1, en el que el 0 significa completamente transparente y el 1 completamente opaco.

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

Nombres de colores X11 / SVG

Los nombres de colores SVG (o X11) se incluyeron en la recomendación CSS 3:Color (junio de 2011), aunque los navegadores los aceptaban desde hacía tiempo. La tabla siguiente muestra los 140 colores, sus nombres y códigos RGB.

Notas:

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

Nombres de colores del sistema

Los colores del sistema hacen referencia a los colores utilizados por el interfaz del sistema operativo. Formaban parte de la recomendación CSS 2, pero en la recomendación CSS 3:Color se consideran obsoletos, en favor de la propiedad appearance, definida únicamente para elementos de formularios en la futura recomendación CSS 4: Interface de usuario básico, actualmente (mayo de 2016) en elaboración.

Estos colores se comentan en la lección de elementos obsoletos

Opacidad: opacity

La propiedad opacity 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 Firefox Correcto en Internet Explorer Correcto en Chrome
p1 {
  background-color: lightblue;
}

p2 {
  background-color: coral;
  color: white;
  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