CSS 3: Colores

La recomendación CSS 3 Color (2º ed) (junio de 2018) 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.

p {
  background-color: #14B76E;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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 primera edición (junio de 2011) de la recomendación CSS 3 Color (2º ed) (junio de 2018).

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 primera edición (junio de 2011) de la recomendación CSS 3 Color (2º ed) (junio de 2018).

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

p {
  background-color: hsl(153, 80%, 40%);
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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 primera edición (junio de 2011) de la recomendación CSS 3 Color (2º ed) (junio de 2018).

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
black #000000 gray #808080
white #FFFFFF silver #C0C0C0

Rueda de colores HTML 3.2

Nombres de colores SVG / X11

Los códigos de colores SVG (o X11) se incorporaron a CSS en la primera edición (junio de 2011) de la recomendación CSS 3 Color (2º ed) (junio de 2018), aunque los navegadores los aceptaban desde hacía tiempo. Se muestran a continuación los 147 colores, sus nombres y códigos RGB y HSL.

Notas:

AliceBlue

#F0F8FF

rgb(240, 248, 255)

hsl(208, 100%, 97.1%)

AntiqueWhite

#FAEBD7

rgb(250, 235, 215)

hsl(34, 77.8%, 91.2%)

Aqua

#00FFFF

rgb(0, 255, 255)

hsl(180, 100%, 50%)

Aquamarine

#7FFFD4

rgb(127, 255, 212)

hsl(160, 100%, 74.9%)

Azure

#F0FFFF

rgb(240, 255, 255)

hsl(180, 100%, 97.1%)

Beige

#F5F5DC

rgb(245, 245, 220)

hsl(60, 55.6%, 91.2%)

Bisque

#FFE4C4

rgb(255, 228, 196)

hsl(33, 100%, 88.4%)

Black

#000000

rgb(0, 0, 0)

hsl(0, 0%, 0%)

BlanchedAlmond

#FFEBCD

rgb(255, 235, 205)

hsl(36, 100%, 90.2%)

Blue

#0000FF

rgb(0, 0, 255)

hsl(240, 100%, 50%)

BlueViolet

#8A2BE2

rgb(138, 43, 226)

hsl(271, 75.9%, 52.7%)

Brown

#A52A2A

rgb(165, 42, 42)

hsl(0, 59.4%, 40.6%)

BurlyWood

#DEB887

rgb(222, 184, 135)

hsl(34, 56.9%, 70%)

CadetBlue

#5F9EA0

rgb(95, 158, 160)

hsl(182, 25.5%, 50%)

Chartreuse

#7FFF00

rgb(127, 255, 0)

hsl(90, 100%, 50%)

Chocolate

#D2691E

rgb(210, 105, 30)

hsl(25, 75%, 47.1%)

Coral

#FF7F50

rgb(255, 127, 80)

hsl(16, 100%, 65.7%)

CornflowerBlue

#6495ED

rgb(100, 149, 237)

hsl(219, 79.2%, 66.1%)

Cornsilk

#FFF8DC

rgb(255, 248, 220)

hsl(48, 100%, 93.1%)

Crimson

#DC143C

rgb(220, 20, 60)

hsl(348, 83.3%, 47.1%)

Cyan

#00FFFF

rgb(0, 255, 255)

hsl(180, 100%, 50%)

DarkBlue

#00008B

rgb(0, 0, 139)

hsl(240, 100%, 27.3%)

DarkCyan

#008B8B

rgb(0, 139, 139)

hsl(180, 100%, 27.3%)

DarkGoldenrod

#B8860B

rgb(184, 134, 11)

hsl(43, 88.7%, 38.2%)

DarkGray

#A9A9A9

rgb(169, 169, 169)

hsl(0, 0%, 66.3%)

DarkGreen

#006400

rgb(0, 100, 0)

hsl(120, 100%, 19.6%)

DarkGrey

#A9A9A9

rgb(169, 169, 169)

hsl(0, 0%, 66.3%)

DarkKhaki

#BDB76B

rgb(189, 183, 107)

hsl(56, 38.3%, 58%)

DarkMagenta

#8B008B

rgb(139, 0, 139)

hsl(300, 100%, 27.3%)

DarkOliveGreen

#556B2F

rgb(85, 107, 47)

hsl(82, 39%, 30.2%)

DarkOrange

#FF8C00

rgb(255, 140, 0)

hsl(33, 100%, 50%)

DarkOrchid

#9932CC

rgb(153, 50, 204)

hsl(280, 60.6%, 49.8%)

DarkRed

#8B0000

rgb(139, 0, 0)

hsl(0, 100%, 27.3%)

DarkSalmon

#E9967A

rgb(233, 150, 122)

hsl(15, 71.6%, 69.6%)

DarkSeaGreen

#8FBC8F

rgb(143, 188, 143)

hsl(120, 25.1%, 64.9%)

DarkSlateBlue

#483D8B

rgb(72, 61, 139)

hsl(248, 39%, 39.2%)

DarkSlateGray

#2F4F4F

rgb(47, 79, 79)

hsl(180, 25.4%, 24.7%)

DarkSlateGrey

#2F4F4F

rgb(47, 79, 79)

hsl(180, 25.4%, 24.7%)

DarkTurquoise

#00CED1

rgb(0, 206, 209)

hsl(181, 100%, 41%)

DarkViolet

#9400D3

rgb(148, 0, 211)

hsl(282, 100%, 41.4%)

DeepPink

#FF1493

rgb(255, 20, 147)

hsl(328, 100%, 53.9%)

DeepSkyBlue

#00BFFF

rgb(0, 191, 255)

hsl(195, 100%, 50%)

DimGray

#696969

rgb(105, 105, 105)

hsl(0, 0%, 41.2%)

DimGrey

#696969

rgb(105, 105, 105)

hsl(0, 0%, 41.2%)

DodgerBlue

#1E90FF

rgb(30, 144, 255)

hsl(210, 100%, 55.9%)

FireBrick

#B22222

rgb(178, 34, 34)

hsl(0, 67.9%, 41.6%)

FloralWhite

#FFFAF0

rgb(255, 250, 240)

hsl(40, 100%, 97.1%)

ForestGreen

#228B22

rgb(34, 139, 34)

hsl(120, 60.7%, 33.9%)

Fuchsia

#FF00FF

rgb(255, 0, 255)

hsl(300, 100%, 50%)

Gainsboro

#DCDCDC

rgb(220, 220, 220)

hsl(0, 0%, 86.3%)

GhostWhite

#F8F8FF

rgb(248, 248, 255)

hsl(240, 100%, 98.6%)

Gold

#FFD700

rgb(255, 215, 0)

hsl(51, 100%, 50%)

Goldenrod

#DAA520

rgb(218, 165, 32)

hsl(43, 74.4%, 49%)

Gray

#808080

rgb(128, 128, 128)

hsl(0, 0%, 50.2%)

Green

#008000

rgb(0, 128, 0)

hsl(120, 100%, 25.1%)

GreenYellow

#ADFF2F

rgb(173, 255, 47)

hsl(84, 100%, 59.2%)

Grey

#808080

rgb(128, 128, 128)

hsl(0, 0%, 50.2%)

Honeydew

#F0FFF0

rgb(240, 255, 240)

hsl(120, 100%, 97.1%)

HotPink

#FF69B4

rgb(255, 105, 180)

hsl(330, 100%, 70.6%)

IndianRed

#CD5C5C

rgb(205, 92, 92)

hsl(0, 53.1%, 58.2%)

Indigo

#4B0082

rgb(75, 0, 130)

hsl(275, 100%, 25.5%)

Ivory

#FFFFF0

rgb(255, 255, 240)

hsl(60, 100%, 97.1%)

Khaki

#F0E68C

rgb(240, 230, 140)

hsl(54, 76.9%, 74.5%)

Lavender

#E6E6FA

rgb(230, 230, 250)

hsl(240, 66.7%, 94.1%)

LavenderBlush

#FFF0F5

rgb(255, 240, 245)

hsl(340, 100%, 97.1%)

LawnGreen

#7CFC00

rgb(124, 252, 0)

hsl(90, 100%, 49.4%)

LemonChiffon

#FFFACD

rgb(255, 250, 205)

hsl(54, 100%, 90.2%)

LightBlue

#ADD8E6

rgb(173, 216, 230)

hsl(195, 53.3%, 79%)

LightCoral

#F08080

rgb(240, 128, 128)

hsl(0, 78.9%, 72.2%)

LightCyan

#E0FFFF

rgb(224, 255, 255)

hsl(180, 100%, 93.9%)

LightGoldenrodYellow

#FAFAD2

rgb(250, 250, 210)

hsl(60, 80%, 90.2%)

LightGray

#D3D3D3

rgb(211, 211, 211)

hsl(0, 0%, 82.7%)

LightGreen

#90EE90

rgb(144, 238, 144)

hsl(120, 73.4%, 74.9%)

LightGrey

#D3D3D3

rgb(211, 211, 211)

hsl(0, 0%, 82.7%)

LightPink

#FFB6C1

rgb(255, 182, 193)

hsl(351, 100%, 85.7%)

LightSalmon

#FFA07A

rgb(255, 160, 122)

hsl(17, 100%, 73.9%)

LightSeaGreen

#20B2AA

rgb(32, 178, 170)

hsl(177, 69.5%, 41.2%)

LightSkyBlue

#87CEFA

rgb(135, 206, 250)

hsl(203, 92%, 75.5%)

LightSlateGray

#778899

rgb(119, 136, 153)

hsl(210, 14.3%, 53.3%)

LightSlateGrey

#778899

rgb(119, 136, 153)

hsl(210, 14.3%, 53.3%)

LightSteelBlue

#B0C4DE

rgb(176, 196, 222)

hsl(214, 41.1%, 78%)

LightYellow

#FFFFE0

rgb(255, 255, 224)

hsl(60, 100%, 93.9%)

Lime

#00FF00

rgb(0, 255, 0)

hsl(120, 100%, 50%)

LimeGreen

#32CD32

rgb(50, 205, 50)

hsl(120, 60.8%, 50%)

Linen

#FAF0E6

rgb(250, 240, 230)

hsl(30, 66.7%, 94.1%)

Magenta

#FF00FF

rgb(255, 0, 255)

hsl(300, 100%, 50%)

Maroon

#800000

rgb(128, 0, 0)

hsl(0, 100%, 25.1%)

MediumAquamarine

#66CDAA

rgb(102, 205, 170)

hsl(160, 50.7%, 60.2%)

MediumBlue

#0000CD

rgb(0, 0, 205)

hsl(240, 100%, 40.2%)

MediumOrchid

#BA55D3

rgb(186, 85, 211)

hsl(288, 58.9%, 58%)

MediumPurple

#9370DB

rgb(147, 112, 219)

hsl(260, 59.8%, 64.9%)

MediumSeaGreen

#3CB371

rgb(60, 179, 113)

hsl(147, 49.8%, 46.9%)

MediumSlateBlue

#7B68EE

rgb(123, 104, 238)

hsl(249, 79.8%, 67.1%)

MediumSpringGreen

#00FA9A

rgb(0, 250, 154)

hsl(157, 100%, 49%)

MediumTurquoise

#48D1CC

rgb(72, 209, 204)

hsl(178, 59.8%, 55.1%)

MediumVioletRed

#C71585

rgb(199, 21, 133)

hsl(322, 80.9%, 43.1%)

MidnightBlue

#191970

rgb(25, 25, 112)

hsl(240, 63.5%, 26.9%)

MintCream

#F5FFFA

rgb(245, 255, 250)

hsl(150, 100%, 98%)

MistyRose

#FFE4E1

rgb(255, 228, 225)

hsl(6, 100%, 94.1%)

Moccasin

#FFE4B5

rgb(255, 228, 181)

hsl(38, 100%, 85.5%)

NavajoWhite

#FFDEAD

rgb(255, 222, 173)

hsl(36, 100%, 83.9%)

Navy

#000080

rgb(0, 0, 128)

hsl(240, 100%, 25.1%)

OldLace

#FDF5E6

rgb(253, 245, 230)

hsl(39, 85.2%, 94.7%)

Olive

#808000

rgb(128, 128, 0)

hsl(60, 100%, 25.1%)

OliveDrab

#6B8E23

rgb(107, 142, 35)

hsl(80, 60.5%, 34.7%)

Orange

#FFA500

rgb(255, 165, 0)

hsl(39, 100%, 50%)

OrangeRed

#FF4500

rgb(255, 69, 0)

hsl(16, 100%, 50%)

Orchid

#DA70D6

rgb(218, 112, 214)

hsl(302, 58.9%, 64.7%)

PaleGoldenrod

#EEE8AA

rgb(238, 232, 170)

hsl(55, 66.7%, 80%)

PaleGreen

#98FB98

rgb(152, 251, 152)

hsl(120, 92.5%, 79%)

PaleTurquoise

#AFEEEE

rgb(175, 238, 238)

hsl(180, 64.9%, 81%)

PaleVioletRed

#DB7093

rgb(219, 112, 147)

hsl(340, 59.8%, 64.9%)

PapayaWhip

#FFEFD5

rgb(255, 239, 213)

hsl(37, 100%, 91.8%)

PeachPuff

#FFDAB9

rgb(255, 218, 185)

hsl(28, 100%, 86.3%)

Peru

#CD853F

rgb(205, 133, 63)

hsl(30, 58.7%, 52.5%)

Pink

#FFC0CB

rgb(255, 192, 203)

hsl(350, 100%, 87.6%)

Plum

#DDA0DD

rgb(221, 160, 221)

hsl(300, 47.3%, 74.7%)

PowderBlue

#B0E0E6

rgb(176, 224, 230)

hsl(187, 51.9%, 79.6%)

Purple

#800080

rgb(128, 0, 128)

hsl(300, 100%, 25.1%)

Red

#FF0000

rgb(255, 0, 0)

hsl(0, 100%, 50%)

RosyBrown

#BC8F8F

rgb(188, 143, 143)

hsl(0, 25.1%, 64.9%)

RoyalBlue

#4169E1

rgb(65, 105, 225)

hsl(225, 72.7%, 56.9%)

SaddleBrown

#8B4513

rgb(139, 69, 19)

hsl(25, 75.9%, 31%)

Salmon

#FA8072

rgb(250, 128, 114)

hsl(6, 93.2%, 71.4%)

SandyBrown

#F4A460

rgb(244, 164, 96)

hsl(28, 87.1%, 66.7%)

SeaGreen

#2E8B57

rgb(46, 139, 87)

hsl(146, 50.3%, 36.3%)

Seashell

#FFF5EE

rgb(255, 245, 238)

hsl(25, 100%, 96.7%)

Sienna

#A0522D

rgb(160, 82, 45)

hsl(19, 56.1%, 40.2%)

Silver

#C0C0C0

rgb(192, 192, 192)

hsl(0, 0%, 75.3%)

SkyBlue

#87CEEB

rgb(135, 206, 235)

hsl(197, 71.4%, 72.5%)

SlateBlue

#6A5ACD

rgb(106, 90, 205)

hsl(248, 53.5%, 57.8%)

SlateGray

#708090

rgb(112, 128, 144)

hsl(210, 12.6%, 50.2%)

SlateGrey

#708090

rgb(112, 128, 144)

hsl(210, 12.6%, 50.2%)

Snow

#FFFAFA

rgb(255, 250, 250)

hsl(0, 100%, 99%)

SpringGreen

#00FF7F

rgb(0, 255, 127)

hsl(150, 100%, 50%)

SteelBlue

#4682B4

rgb(70, 130, 180)

hsl(207, 44%, 49%)

Tan

#D2B48C

rgb(210, 180, 140)

hsl(34, 43.8%, 68.6%)

Teal

#008080

rgb(0, 128, 128)

hsl(180, 100%, 25.1%)

Thistle

#D8BFD8

rgb(216, 191, 216)

hsl(300, 24.3%, 79.8%)

Tomato

#FF6347

rgb(255, 99, 71)

hsl(9, 100%, 63.9%)

Turquoise

#40E0D0

rgb(64, 224, 208)

hsl(174, 72.1%, 56.5%)

Violet

#EE82EE

rgb(238, 130, 238)

hsl(300, 76.1%, 72.2%)

Wheat

#F5DEB3

rgb(245, 222, 179)

hsl(39, 76.7%, 83.1%)

White

#FFFFFF

rgb(255, 255, 255)

hsl(0, 0%, 100%)

WhiteSmoke

#F5F5F5

rgb(245, 245, 245)

hsl(0, 0%, 96.1%)

Yellow

#FFFF00

rgb(255, 255, 0)

hsl(60, 100%, 50%)

YellowGreen

#9ACD32

rgb(154, 205, 50)

hsl(80, 60.8%, 50%)

Nombres de colores del sistema

Los colores del sistema se introdujeron en la recomendación CSS 2 y hacen referencia a los colores utilizados por el interfaz del sistema operativo.

Los navegadores interpretaban e interpretan correctamente estos nombres de colores, pero en estos apuntes estos colores ya no se comentan en esta lección, sino en la lección de elementos obsoletos, porque en la primera edición (junio de 2011) de la recomendación CSS 3 Color (2º ed) (junio de 2018) estos nombres pasaron a considerarse obsoletos, en favor de la propiedad appearance.

El problema es que la propiedad appearance no está incluida en ninguna recomendación ya aprobada. Esta propiedad se encuentra definida únicamente para elementos de formularios en la futura recomendación CSS 4: Interface de usuario básico, actualmente (octubre de 2018) en elaboración, pero parece que esta propiedad tiene serios problemas de incompatibilidad entre navegadores.

Mientras los navegadores los admitan, los nombres de colores de sistema se pueden utilizar, pero nada garantizada que los navegadores dejen de aceptarlos en un futuro.

Opacidad (transparencia): 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:

p.p1 {
  background-color: yellow;
}

p.p2 {
  background-color: red;
  color: white;
  opacity: 0.5;
}

/* En el ejemplo también se utilizan propiedades
de posicionamiento que no aparecen aquí. */
ERROR (no puede mostrarse el objeto)
Enlace externo