Color del texto: color
La propiedad color permite establecer el color del texto. Las formas de expresar colores se comentan en la lección CSS: Colores.
h1 {
color: magenta;
}
p {
color: blue;
}
En esta lección se comentan las propiedades CSS y los códigos de colores definidos en la recomendación CSS Color Module Level 3, publicada en enero de 2022, y en la recomendación CSS Color Module Level 4, actualmente (octubre de 2022) en elaboración.
Estas propiedades permiten establecer el color y transparencia del texto o del fondo del elemento.
En esta lección se explica cómo expresar colores mediante códigos numéricos (RGB, HSL o HWB, utilizando la notación funcional, sin comas) o mediante nombres de colores (básicos, extendidos o de sistema). En la lección Esquemas de colores se explican alguna de las formas de obtener combinaciones de colores visualmente atractivas.
El siguiente convertidor permite obtener varios formatos de códigos de color a partir de alguno de ellos: RGB (en formato decimal o hexadecimal), HSL, HWB y los nombres de colores SVG, formatos que se comentan en esta lección.
|
Escriba aquí un código de color: Color:
|
HWB: | |
| RGB decimal: | ||
| RGB hexadecimal: | ||
| HSL: | ||
| nombre SVG: |
La propiedad color permite establecer el color del texto. Las formas de expresar colores se comentan en la lección CSS: Colores.
h1 {
color: magenta;
}
p {
color: blue;
}
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í. */
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;
}
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.
Este modelo de color es poco intuitivo. En general, no es fácil acertar la combinación de rojo, verde y azul necesaria para obtener un color concreto, ni tampoco es fácil acertar cómo modificar las tres componentes para obtener un color relacionado con otro (un color poco más claro o más oscuro que otro, por ejemplo).
El cuadro siguiente permite generar códigos de colores RGB moviendo los deslizadores:
| Decimal | Hexadecimal | ||
| Rojo: | |||
| Verde: | |||
| Azul: | |||
|
Códigos RGB: |
Los códigos de colores HSL se incorporaron a CSS en la primera edición (junio de 2011) de la recomendación CSS Color Module Level 3.
En el modelo de color HSL el color se define mediante tres valores:
p {
background-color: hsl(153 80% 40%);
}
El modelo HSL es más intuitivo que el modelo RGB, ya que el color depende únicamente de la componente Matiz y las componentes Saturación y Luminancia permiten aclarar o oscurecer el color.
El cuadro siguiente permite generar colores HSL moviendo los deslizadores:
| Valor | ||
| Matiz: | ||
| Saturación: | ||
| Luminosidad: | ||
|
Código HSL: |
||
Los códigos de colores HWB se definen en la recomendación CSS Color Module Level 4, actualmente (octubre de 2022) en elaboración.
En el modelo de color HWB el color se define mediante tres valores:
Los códigos HWB se expresan:
p {
background-color: hwb(153 10% 30%);
}
Nota: Safari admite el formato HWB desde la versión 15 (septiembre de 2021), Firefox desde la versión 98 (marzo de 2022) y Chrome desde la versión 101 (abril de 2022).
El modelo HWB es más intuitivo que el modelo HSL y su uso probablemente se generalice en el futuro. Como puede observarse en los cuadros siguientes, cuando la suma de las componentes blanco y negro suman más de 100%, el color resultante es un tono de gris.
El cuadro siguiente permite generar colores HWB moviendo los deslizadores:
| Valor | ||
| Matiz: | ||
| Blanco: | ||
| Negro: | ||
|
Código HWB: |
||
El canal alfa es un valor numérico que se puede añadir a los colores para expresar que el color tiene cierto grado de transparencia y que se puede ver lo que hay detrás de él. El canal alfa se escribe como porcentaje o como valor decimal entre 0 y 1, en el que el 0 significa completamente transparente y el 1 completamente opaco.
El canal alfa se añade como un cuarto valor separado con una barra de los tres componentes del color rgb(), hsl() o hwb().
El siguiente ejemplo muestra texto con diferentes grados de transparencia. Cuando la transparencia es 0, el texto es invisible porque tiene el mismo color que el fondo, aunque puede verse al seleccionarlo con el ratón.
p {
background-color: rgb(255 255 0);
color: rgb(255 0 0);
}
p.a000 { color: rgb(255 0 0 / 0%); }
p.a025 { color: rgb(255 0 0 / 25%); }
p.a050 { color: rgb(255 0 0 / 50%); }
p.a075 { color: rgb(255 0 0 / 75%); }
p.a100 { color: rgb(255 0 0 / 100%); }
El cuadro siguiente permite generar colores RGB con transparencia moviendo los deslizadores. Para poder apreciar el funcionamiento de la transparencia, el cuadro muestra tanto dos rectángulos de color superpuestos como un texto en color y con color de fondo:
| Decimal | ||
| Color trasero / Color de fondo | ||
|---|---|---|
| Rojo: | ||
| Verde: | ||
| Azul: | ||
| Color delantero / Color de texto | ||
| Rojo: | ||
| Verde: | ||
| Azul: | ||
| Transparencia: | ||
|
Códigos RGB: |
||
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 |
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 Color Module Level 3, aunque los navegadores los aceptaban desde mucho antes. Se muestran a continuación los 148 colores, sus nombres y códigos RGB, HSL y HWB.
Notas:
AliceBlue
#F0F8FF
rgb(240 248 255)
hsl(208 100% 97.1%)
hwb(208 94.2% 0%)
AntiqueWhite
#FAEBD7
rgb(250 235 215)
hsl(34 77.8% 91.2%)
hwb(34 84.4% 2%)
Aqua
#00FFFF
rgb(0 255 255)
hsl(180 100% 50%)
hwb(180 0% 0%)
Aquamarine
#7FFFD4
rgb(127 255 212)
hsl(160 100% 74.9%)
hwb(160 49.8% 0%)
Azure
#F0FFFF
rgb(240 255 255)
hsl(180 100% 97.1%)
hwb(180 94.2% 0%)
Beige
#F5F5DC
rgb(245 245 220)
hsl(60 55.6% 91.2%)
hwb(60 86.3% 3.9%)
Bisque
#FFE4C4
rgb(255 228 196)
hsl(32 100% 88.4%)
hwb(32 76.8% 0%)
Black
#000000
rgb(0 0 0)
hsl(0 0% 0%)
hwb(0 0% 100%)
BlanchedAlmond
#FFEBCD
rgb(255 235 205)
hsl(36 100% 90.2%)
hwb(36 80.4% 0%)
Blue
#0000FF
rgb(0 0 255)
hsl(240 100% 50%)
hwb(240 0% 0%)
BlueViolet
#8A2BE2
rgb(138 43 226)
hsl(271 75.9% 52.7%)
hwb(271 16.8% 11.4%)
Brown
#A52A2A
rgb(165 42 42)
hsl(0 59.4% 40.6%)
hwb(0 16.5% 35.3%)
BurlyWood
#DEB887
rgb(222 184 135)
hsl(34 56.9% 70%)
hwb(34 52.9% 12.9%)
CadetBlue
#5F9EA0
rgb(95 158 160)
hsl(182 25.5% 50%)
hwb(182 37.2% 37.2%)
Chartreuse
#7FFF00
rgb(127 255 0)
hsl(90 100% 50%)
hwb(90 0% 0%)
Chocolate
#D2691E
rgb(210 105 30)
hsl(25 75% 47.1%)
hwb(25 11.8% 17.6%)
Coral
#FF7F50
rgb(255 127 80)
hsl(16 100% 65.7%)
hwb(16 31.4% 0%)
CornflowerBlue
#6495ED
rgb(100 149 237)
hsl(218 79.2% 66.1%)
hwb(218 39.3% 7.1%)
Cornsilk
#FFF8DC
rgb(255 248 220)
hsl(48 100% 93.1%)
hwb(48 86.2% 0%)
Crimson
#DC143C
rgb(220 20 60)
hsl(348 83.3% 47.1%)
hwb(348 7.9% 13.7%)
Cyan
#00FFFF
rgb(0 255 255)
hsl(180 100% 50%)
hwb(180 0% 0%)
DarkBlue
#00008B
rgb(0 0 139)
hsl(240 100% 27.3%)
hwb(240 0% 45.4%)
DarkCyan
#008B8B
rgb(0 139 139)
hsl(180 100% 27.3%)
hwb(180 0% 45.4%)
DarkGoldenrod
#B8860B
rgb(184 134 11)
hsl(43 88.7% 38.2%)
hwb(43 4.3% 27.9%)
DarkGray
#A9A9A9
rgb(169 169 169)
hsl(0 0% 66.3%)
hwb(0 66.3% 33.7%)
DarkGreen
#006400
rgb(0 100 0)
hsl(120 100% 19.6%)
hwb(120 0% 60.8%)
DarkGrey
#A9A9A9
rgb(169 169 169)
hsl(0 0% 66.3%)
hwb(0 66.3% 33.7%)
DarkKhaki
#BDB76B
rgb(189 183 107)
hsl(56 38.3% 58%)
hwb(56 41.9% 25.9%)
DarkMagenta
#8B008B
rgb(139 0 139)
hsl(300 100% 27.3%)
hwb(300 0% 45.4%)
DarkOliveGreen
#556B2F
rgb(85 107 47)
hsl(82 39% 30.2%)
hwb(82 18.4% 58%)
DarkOrange
#FF8C00
rgb(255 140 0)
hsl(33 100% 50%)
hwb(33 0% 0%)
DarkOrchid
#9932CC
rgb(153 50 204)
hsl(280 60.6% 49.8%)
hwb(280 19.6% 20%)
DarkRed
#8B0000
rgb(139 0 0)
hsl(0 100% 27.3%)
hwb(0 0% 45.4%)
DarkSalmon
#E9967A
rgb(233 150 122)
hsl(15 71.6% 69.6%)
hwb(15 47.8% 8.6%)
DarkSeaGreen
#8FBC8F
rgb(143 188 143)
hsl(120 25.1% 64.9%)
hwb(120 56.1% 26.3%)
DarkSlateBlue
#483D8B
rgb(72 61 139)
hsl(248 39% 39.2%)
hwb(248 23.9% 45.5%)
DarkSlateGray
#2F4F4F
rgb(47 79 79)
hsl(180 25.4% 24.7%)
hwb(180 18.4% 69%)
DarkSlateGrey
#2F4F4F
rgb(47 79 79)
hsl(180 25.4% 24.7%)
hwb(180 18.4% 69%)
DarkTurquoise
#00CED1
rgb(0 206 209)
hsl(181 100% 41%)
hwb(181 0% 18%)
DarkViolet
#9400D3
rgb(148 0 211)
hsl(282 100% 41.4%)
hwb(282 0% 17.2%)
DeepPink
#FF1493
rgb(255 20 147)
hsl(328 100% 53.9%)
hwb(328 7.8% 0%)
DeepSkyBlue
#00BFFF
rgb(0 191 255)
hsl(195 100% 50%)
hwb(195 0% 0%)
DimGray
#696969
rgb(105 105 105)
hsl(0 0% 41.2%)
hwb(0 41.2% 58.8%)
DimGrey
#696969
rgb(105 105 105)
hsl(0 0% 41.2%)
hwb(0 41.2% 58.8%)
DodgerBlue
#1E90FF
rgb(30 144 255)
hsl(210 100% 55.9%)
hwb(210 11.8% 0%)
FireBrick
#B22222
rgb(178 34 34)
hsl(0 67.9% 41.6%)
hwb(0 13.4% 30.2%)
FloralWhite
#FFFAF0
rgb(255 250 240)
hsl(40 100% 97.1%)
hwb(40 94.2% 0%)
ForestGreen
#228B22
rgb(34 139 34)
hsl(120 60.7% 33.9%)
hwb(120 13.3% 45.5%)
Fuchsia
#FF00FF
rgb(255 0 255)
hsl(300 100% 50%)
hwb(300 0% 0%)
Gainsboro
#DCDCDC
rgb(220 220 220)
hsl(0 0% 86.3%)
hwb(0 86.3% 13.7%)
GhostWhite
#F8F8FF
rgb(248 248 255)
hsl(240 100% 98.6%)
hwb(240 97.2% 0%)
Gold
#FFD700
rgb(255 215 0)
hsl(51 100% 50%)
hwb(51 0% 0%)
Goldenrod
#DAA520
rgb(218 165 32)
hsl(43 74.4% 49%)
hwb(43 12.5% 14.5%)
Gray
#808080
rgb(128 128 128)
hsl(0 0% 50.2%)
hwb(0 50.2% 49.8%)
Green
#008000
rgb(0 128 0)
hsl(120 100% 25.1%)
hwb(120 0% 49.8%)
GreenYellow
#ADFF2F
rgb(173 255 47)
hsl(84 100% 59.2%)
hwb(84 18.4% 0%)
Grey
#808080
rgb(128 128 128)
hsl(0 0% 50.2%)
hwb(0 50.2% 49.8%)
Honeydew
#F0FFF0
rgb(240 255 240)
hsl(120 100% 97.1%)
hwb(120 94.2% 0%)
HotPink
#FF69B4
rgb(255 105 180)
hsl(330 100% 70.6%)
hwb(330 41.2% 0%)
IndianRed
#CD5C5C
rgb(205 92 92)
hsl(0 53.1% 58.2%)
hwb(0 36% 19.6%)
Indigo
#4B0082
rgb(75 0 130)
hsl(275 100% 25.5%)
hwb(275 0% 49%)
Ivory
#FFFFF0
rgb(255 255 240)
hsl(60 100% 97.1%)
hwb(60 94.2% 0%)
Khaki
#F0E68C
rgb(240 230 140)
hsl(54 76.9% 74.5%)
hwb(54 54.9% 5.9%)
Lavender
#E6E6FA
rgb(230 230 250)
hsl(240 66.7% 94.1%)
hwb(240 90.2% 2%)
LavenderBlush
#FFF0F5
rgb(255 240 245)
hsl(340 100% 97.1%)
hwb(340 94.2% 0%)
LawnGreen
#7CFC00
rgb(124 252 0)
hsl(90 100% 49.4%)
hwb(90 0% 1.2%)
LemonChiffon
#FFFACD
rgb(255 250 205)
hsl(54 100% 90.2%)
hwb(54 80.4% 0%)
LightBlue
#ADD8E6
rgb(173 216 230)
hsl(195 53.3% 79%)
hwb(195 67.8% 9.8%)
LightCoral
#F08080
rgb(240 128 128)
hsl(0 78.9% 72.2%)
hwb(0 50.3% 5.9%)
LightCyan
#E0FFFF
rgb(224 255 255)
hsl(180 100% 93.9%)
hwb(180 87.8% 0%)
LightGoldenrodYellow
#FAFAD2
rgb(250 250 210)
hsl(60 80% 90.2%)
hwb(60 82.4% 2%)
LightGray
#D3D3D3
rgb(211 211 211)
hsl(0 0% 82.7%)
hwb(0 82.7% 17.3%)
LightGreen
#90EE90
rgb(144 238 144)
hsl(120 73.4% 74.9%)
hwb(120 56.5% 6.7%)
LightGrey
#D3D3D3
rgb(211 211 211)
hsl(0 0% 82.7%)
hwb(0 82.7% 17.3%)
LightPink
#FFB6C1
rgb(255 182 193)
hsl(351 100% 85.7%)
hwb(351 71.4% 0%)
LightSalmon
#FFA07A
rgb(255 160 122)
hsl(17 100% 73.9%)
hwb(17 47.8% 0%)
LightSeaGreen
#20B2AA
rgb(32 178 170)
hsl(177 69.5% 41.2%)
hwb(177 12.6% 30.2%)
LightSkyBlue
#87CEFA
rgb(135 206 250)
hsl(203 92% 75.5%)
hwb(203 53% 2%)
LightSlateGray
#778899
rgb(119 136 153)
hsl(210 14.3% 53.3%)
hwb(210 46.6% 40%)
LightSlateGrey
#778899
rgb(119 136 153)
hsl(210 14.3% 53.3%)
hwb(210 46.6% 40%)
LightSteelBlue
#B0C4DE
rgb(176 196 222)
hsl(214 41.1% 78%)
hwb(214 69% 13%)
LightYellow
#FFFFE0
rgb(255 255 224)
hsl(60 100% 93.9%)
hwb(60 87.8% 0%)
Lime
#00FF00
rgb(0 255 0)
hsl(120 100% 50%)
hwb(120 0% 0%)
LimeGreen
#32CD32
rgb(50 205 50)
hsl(120 60.8% 50%)
hwb(120 19.6% 19.6%)
Linen
#FAF0E6
rgb(250 240 230)
hsl(30 66.7% 94.1%)
hwb(30 90.2% 2%)
Magenta
#FF00FF
rgb(255 0 255)
hsl(300 100% 50%)
hwb(300 0% 0%)
Maroon
#800000
rgb(128 0 0)
hsl(0 100% 25.1%)
hwb(0 0% 49.8%)
MediumAquamarine
#66CDAA
rgb(102 205 170)
hsl(160 50.7% 60.2%)
hwb(160 40% 19.6%)
MediumBlue
#0000CD
rgb(0 0 205)
hsl(240 100% 40.2%)
hwb(240 0% 19.6%)
MediumOrchid
#BA55D3
rgb(186 85 211)
hsl(288 58.9% 58%)
hwb(288 33.3% 17.3%)
MediumPurple
#9370DB
rgb(147 112 219)
hsl(260 59.8% 64.9%)
hwb(260 43.9% 14.1%)
MediumSeaGreen
#3CB371
rgb(60 179 113)
hsl(147 49.8% 46.9%)
hwb(147 23.5% 29.7%)
MediumSlateBlue
#7B68EE
rgb(123 104 238)
hsl(248 79.8% 67.1%)
hwb(248 40.8% 6.6%)
MediumSpringGreen
#00FA9A
rgb(0 250 154)
hsl(157 100% 49%)
hwb(157 0% 2%)
MediumTurquoise
#48D1CC
rgb(72 209 204)
hsl(178 59.8% 55.1%)
hwb(178 28.2% 18%)
MediumVioletRed
#C71585
rgb(199 21 133)
hsl(322 80.9% 43.1%)
hwb(322 8.2% 22%)
MidnightBlue
#191970
rgb(25 25 112)
hsl(240 63.5% 26.9%)
hwb(240 9.8% 56%)
MintCream
#F5FFFA
rgb(245 255 250)
hsl(150 100% 98%)
hwb(150 96% 0%)
MistyRose
#FFE4E1
rgb(255 228 225)
hsl(6 100% 94.1%)
hwb(6 88.2% 0%)
Moccasin
#FFE4B5
rgb(255 228 181)
hsl(38 100% 85.5%)
hwb(38 71% 0%)
NavajoWhite
#FFDEAD
rgb(255 222 173)
hsl(36 100% 83.9%)
hwb(36 67.8% 0%)
Navy
#000080
rgb(0 0 128)
hsl(240 100% 25.1%)
hwb(240 0% 49.8%)
OldLace
#FDF5E6
rgb(253 245 230)
hsl(39 85.2% 94.7%)
hwb(39 90.2% 0.8%)
Olive
#808000
rgb(128 128 0)
hsl(60 100% 25.1%)
hwb(60 0% 49.8%)
OliveDrab
#6B8E23
rgb(107 142 35)
hsl(80 60.5% 34.7%)
hwb(80 13.7% 44.3%)
Orange
#FFA500
rgb(255 165 0)
hsl(39 100% 50%)
hwb(39 0% 0%)
OrangeRed
#FF4500
rgb(255 69 0)
hsl(16 100% 50%)
hwb(16 0% 0%)
Orchid
#DA70D6
rgb(218 112 214)
hsl(302 58.9% 64.7%)
hwb(302 43.9% 14.5%)
PaleGoldenrod
#EEE8AA
rgb(238 232 170)
hsl(55 66.7% 80%)
hwb(55 66.7% 6.7%)
PaleGreen
#98FB98
rgb(152 251 152)
hsl(120 92.5% 79%)
hwb(120 59.6% 1.6%)
PaleTurquoise
#AFEEEE
rgb(175 238 238)
hsl(180 64.9% 81%)
hwb(180 68.7% 6.7%)
PaleVioletRed
#DB7093
rgb(219 112 147)
hsl(340 59.8% 64.9%)
hwb(340 43.9% 14.1%)
PapayaWhip
#FFEFD5
rgb(255 239 213)
hsl(37 100% 91.8%)
hwb(37 83.6% 0%)
PeachPuff
#FFDAB9
rgb(255 218 185)
hsl(28 100% 86.3%)
hwb(28 72.6% 0%)
Peru
#CD853F
rgb(205 133 63)
hsl(30 58.7% 52.5%)
hwb(30 24.6% 19.6%)
Pink
#FFC0CB
rgb(255 192 203)
hsl(350 100% 87.6%)
hwb(350 75.2% 0%)
Plum
#DDA0DD
rgb(221 160 221)
hsl(300 47.3% 74.7%)
hwb(300 62.7% 13.3%)
PowderBlue
#B0E0E6
rgb(176 224 230)
hsl(187 51.9% 79.6%)
hwb(187 69% 9.8%)
Purple
#800080
rgb(128 0 128)
hsl(300 100% 25.1%)
hwb(300 0% 49.8%)
RebeccaPurple
#663399
rgb(102 51 153)
hsl(270 50% 40%)
hwb(270 20% 40%)
Red
#FF0000
rgb(255 0 0)
hsl(0 100% 50%)
hwb(0 0% 0%)
RosyBrown
#BC8F8F
rgb(188 143 143)
hsl(0 25.1% 64.9%)
hwb(0 56.1% 26.3%)
RoyalBlue
#4169E1
rgb(65 105 225)
hsl(225 72.7% 56.9%)
hwb(225 25.6% 11.8%)
SaddleBrown
#8B4513
rgb(139 69 19)
hsl(25 75.9% 31%)
hwb(25 7.5% 45.5%)
Salmon
#FA8072
rgb(250 128 114)
hsl(6 93.2% 71.4%)
hwb(6 44.7% 1.9%)
SandyBrown
#F4A460
rgb(244 164 96)
hsl(28 87.1% 66.7%)
hwb(28 37.7% 4.3%)
SeaGreen
#2E8B57
rgb(46 139 87)
hsl(146 50.3% 36.3%)
hwb(146 18% 45.4%)
Seashell
#FFF5EE
rgb(255 245 238)
hsl(25 100% 96.7%)
hwb(25 93.4% 0%)
Sienna
#A0522D
rgb(160 82 45)
hsl(19 56.1% 40.2%)
hwb(19 17.6% 37.2%)
Silver
#C0C0C0
rgb(192 192 192)
hsl(0 0% 75.3%)
hwb(0 75.3% 24.7%)
SkyBlue
#87CEEB
rgb(135 206 235)
hsl(197 71.4% 72.5%)
hwb(197 52.9% 7.9%)
SlateBlue
#6A5ACD
rgb(106 90 205)
hsl(248 53.5% 57.8%)
hwb(248 35.2% 19.6%)
SlateGray
#708090
rgb(112 128 144)
hsl(210 12.6% 50.2%)
hwb(210 43.9% 43.5%)
SlateGrey
#708090
rgb(112 128 144)
hsl(210 12.6% 50.2%)
hwb(210 43.9% 43.5%)
Snow
#FFFAFA
rgb(255 250 250)
hsl(0 100% 99%)
hwb(0 98% 0%)
SpringGreen
#00FF7F
rgb(0 255 127)
hsl(150 100% 50%)
hwb(150 0% 0%)
SteelBlue
#4682B4
rgb(70 130 180)
hsl(207 44% 49%)
hwb(207 27.4% 29.4%)
Tan
#D2B48C
rgb(210 180 140)
hsl(34 43.7% 68.6%)
hwb(34 54.9% 17.7%)
Teal
#008080
rgb(0 128 128)
hsl(180 100% 25.1%)
hwb(180 0% 49.8%)
Thistle
#D8BFD8
rgb(216 191 216)
hsl(300 24.3% 79.8%)
hwb(300 74.9% 15.3%)
Tomato
#FF6347
rgb(255 99 71)
hsl(9 100% 63.9%)
hwb(9 27.8% 0%)
Turquoise
#40E0D0
rgb(64 224 208)
hsl(174 72.1% 56.5%)
hwb(174 25.1% 12.1%)
Violet
#EE82EE
rgb(238 130 238)
hsl(300 76.1% 72.2%)
hwb(300 51% 6.6%)
Wheat
#F5DEB3
rgb(245 222 179)
hsl(39 76.7% 83.1%)
hwb(39 70.1% 3.9%)
White
#FFFFFF
rgb(255 255 255)
hsl(0 0% 100%)
hwb(0 100% 0%)
WhiteSmoke
#F5F5F5
rgb(245 245 245)
hsl(0 0% 96.1%)
hwb(0 96.1% 3.9%)
Yellow
#FFFF00
rgb(255 255 0)
hsl(60 100% 50%)
hwb(60 0% 0%)
YellowGreen
#9ACD32
rgb(154 205 50)
hsl(80 60.8% 50%)
hwb(80 19.6% 19.6%)
Los colores del sistema se introdujeron en la recomendación CSS 2 y hacían referencia a los colores utilizados en los elementos del interfaz del sistema operativo. En la primera edición de la recomendación CSS Color Module Level 3 (junio 2011) todos estos nombres pasaron a considerarse obsoletos, en favor de la propiedad appearance definida únicamente para elementos de formularios en la futura recomendación CSS 4: Interfaz de usuario básico, actualmente (octubre de 2022) en elaboración.
Desde noviembre de 2019, la futura recomendación CSS Color Module Level 4, actualmente (octubre de 2022) en elaboración, incluye una lista distinta de colores de sistema, que hacen referencia a los colores predeterminados de elementos de las páginas web y a los que afecta el esquema de colores (claro u oscuro) del sistema operativo. La lista de colores de sistema es la siguiente:
| Color (en modo claro) | Color (en modo oscuro) | Nombre | Concepto | |
| Canvas | Fondo de la aplicación o de los documentos | |||
| CanvasText | Texto de la aplicación o de los documentos | |||
| LinkText | Texto de los enlaces todavía no visitados | |||
| VisitedText | Texto de los enlaces ya visitados | |||
| ActiveText | Texto de los enlaces activos | |||
| ButtonFace | Fondo de los botones | |||
| ButtonText | Texto de los botones | |||
| ButtonBorder | Borde de los botones | |||
| Field | Fondo de los campos de texto de formularios | |||
| FieldText | Texto de los campos de texto de formularios | |||
| Highlight | Fondo del texto seleccionado | |||
| HighlightText | Texto seleccionado | |||
| SelectedItem | Fondo de los elementos seleccionados (por ejemplo una casilla de verificación de un formulario) | |||
| SelectedItemText | Texto de los elementos seleccionados | |||
| Mark | Fondo de un texto marcado de forma especial | |||
| MarkText | Texto marcado de forma especial | |||
| GrayText | Texto deshabilitado | |||
| AccentColor | Fondo de controles del interfaz de usuario con foco | |||
| AccentColorText | Texto de controles del interfaz de usuario con foco |
La futura recomendación CSS Color Module Level 4, actualmente (octubre de 2022) en elaboración, ha adoptado la notación funcional (sin comas) para expresar los colores, notación que se utiliza en los apartados anteriores de esta lección. Firefox admite la notación funcional desde la versión 52 (marzo de 2017), Chrome desde la versión 65 (marzo de 2018) y Safari desde la versión 12.1 (marzo de 2019).
En las recomendaciones CSS 2 y CSS Color Module Level 3 los tres componentes de los códigos de color expresados mediante las funciones rgb() y hsl() se separaban mediante comas. Esta notación se puede seguir utilizando, como muestra el siguiente ejemplo:
p {
background-color: rgb(20, 183, 110);
}
En las recomendaciones CSS 2 y CSS Color Module Level 3 los colores con transparencia se expresaban mediante las funciones rgba() y hsla(), en la que los cuatro valores se separaban mediante comas. Estas funciones se pueden seguir utilizando, como muestra el siguiente ejemplo:
p {
background-color: rgb(255, 255, 0);
color: rgba(255, 0, 0, 50%);
}
Pero las nuevas funciones (como hwb()) sólo admiten la notación funcional, como muestra el siguiente ejemplo:
p {
background-color: hwb(60, 0%, 0%);
color: hwb(0, 0%, 0%, 50%);
}