Resumen

El tipo de datos  CSS  <color> denota un color en el sRGB color space. Un color puede ser
descrito de cualquiera de las siguiente maneras:

Usando una palabra clave.

Usando el sistema RGB cubic-coordinate (usando #-hexadecimal o las notaciones
funcionales rgb() y rgba() )
Usando el sistema HSL cylindrical-coordinate (usando las notaciones
funcionales hsl() y hsla() )

Hay que destacar que la lista de valores de color aceptados ha ido creciendo conforme la
especificación evolucionaba, para acabar con la lista de colores de CSS3.

Asociado con el color en el espacio sRGB, un valor <color> también consiste en una
coordenada alpha-channel o valor de transparencia, indicando cómo se debe composite o
mezclar el color con su color de fondo.

Aunque los valores de colores en CSS son definidos de manera precisa existe la posibilidad de
que parezcan distintos en dispositivos diferentes. La mayoría de ellos no están calibrados y
algunos navegadores no soportan los color profile de algunos dispositivos de salidas. En esta
situación el color puede variar bastante.

Notas: La recomendación WCAG 2.0 de la W3C aconseja a los autores web de manera
clara que no usen color como el único medido para especificar una información, acción o
resultado concreto. Algunos usuarios tienen problemas para diferenciar colores y existe la
posibilidad de que la información transmitida no sea captada. Por supuesto esto no
impide que se use el color, sólo su uso como único medio para describir alguna
información.

Interpolación
Los valores del tipo de datos CSS <color> pueden ser interpolados para lograr animaciones
o para crear valores <gradient>. En este caso son interpolados en cada uno de sus
componentes rojo, verde y azul, conteniendo, cada uno de ellos, un número decimal con coma
flotante. Debe tenerse en cuenta que la interpolación del color sucede en el alpha-
premultiplied sRGBA color space para evitar que aparezcan grises inesperados. En las
animaciones, la velocidad de la interpolación viene determinada por la timing function asociada
con la animación.

Valores
Hay varias formas de describir un valor <color> .
 Palabras clave de colores
Las palabras clave de colores son identificadores en los que no hay distinción entre
mayúsculas y minúsculas y que sirven para representar un color concreto, por ejemplo red,
blue, brown, lightseagreen . El nombre describe el color aunque es mayormente
artificial. La lista de valores válidos cambia un montón de una especificación a otra:

CSS Nivel 1 sólo acepta 16 colores básicos, los llamados colores VGA ya que son
tomados de los colores que son capaces de mostrar las trajetas gráficas VGA.
CSS Nivel 2 añadió la palabra clave orange .
Desde el principio los navegadores aceptarons otros colores, sobre todo la lista de
colores X11 con unas pocas diferencias. ya que, los primeros navegadores, eran en su
mayoría aplicaciones X11. SVG 1.0 fué el primer estándar que definió formalmente
estas palabras clave. Con frecuencia nos referimos a ello como la lista extendida
de colores , los colores X11 o los colores SVG.

Hay algunas advertencias a tener en cuenta al usar las palabras clave relativas a colores:

A excepción de los 16 colores básicos, que son comunes en HTML, los otros no pueden
ser usados en HTML. HTML convertirá estos valores desconocidos usando un algoritmo
específico y se obtendrá colores totalmente diferentes. Estas palabras clave deberían
sólo usarse en SGV y CSS.
Colores desconocidos hacen que la propiedad CSS sea declarada inválida. Las
propiedades inválidas son ignoradas y , por tanto, el color no tendrá efecto. Esto es un
comportamiento diferente al del HTML
Ninguna palabra clave de color tiene transparencia en CSS, son colores planos y sólidos.
Algunas referencian el mismo color:
darkgray / darkgrey
darkslategray / darkslategrey
dimgray / dimgrey
lightgray / lightgrey
lightslategray / lightslategrey
gray / grey
slategray / slategrey
Aunque las palabras clave de colores han sido tomadas de los nombres de colores
usuales en X11, el color puede ser ligeramente diferente al color en X11 ya que son
adaptados por el fabricante para un hardware específico.

Valor RGB
Especificación Color Palabra clave Muestra
hexadecimal
CSS Level 1 black #000000

silver #c0c0c0

gray #808080
white #ffffff

maroon #800000

red #ff0000
purple #800080

fuchsia #ff00ff

green #008000
lime #00ff00

olive #808000

yellow #ffff00
 Valor RGB
Especificación Color Palabra clave Muestra
hexadecimal
navy #000080

blue #0000ff

teal #008080

aqua #00ffff
CSS Level 2 (Revision 1) orange #ffa500
CSS Color Module aliceblue #f0f8ff
Level 3
antiquewhite #faebd7
aquamarine #7fffd4
azure #f0ffff

beige #f5f5dc
bisque #ffe4c4
blanchedalmond #ffe4c4

blueviolet #8a2be2
brown #a52a2a
burlywood #deb887

cadetblue #5f9ea0
chartreuse #7fff00
chocolate #d2691e

coral #ff7f50
cornflowerblue #6495ed
cornsilk #fff8dc

crimson #dc143c
darkblue #00008b
darkcyan #008b8b

darkgoldenrod #b8860b
darkgray #a9a9a9
darkgreen #006400

darkgrey #a9a9a9
darkkhaki #bdb76b
darkmagenta #8b008b

darkolivegreen #556b2f
darkorange #ff8c00
darkorchid #9932cc

darkred #8b0000
darksalmon #e9967a

darkseagreen #8fbc8f
darkslateblue #483d8b
darkslategray #2f4f4f
 Valor RGB
Especificación Color Palabra clave Muestra
hexadecimal

darkslategrey #2f4f4f
darkturquoise #00ced1
darkviolet #9400d3

deeppink #ff1493
deepskyblue #00bfff
dimgray #696969

dimgrey #696969
dodgerblue #1e90ff
firebrick #b22222

floralwhite #fffaf0
forestgreen #228b22
gainsboro #dcdcdc

ghostwhite #f8f8ff
gold #ffd700
goldenrod #daa520

greenyellow #adff2f
grey #808080
honeydew #f0fff0

hotpink #ff69b4
indianred #cd5c5c
indigo #4b0082

ivory #fffff0
khaki #f0e68c
lavender #e6e6fa

lavenderblush #fff0f5
lawngreen #7cfc00
lemonchiffon #fffacd

lightblue #add8e6
lightcoral #f08080
lightcyan #e0ffff

lightgoldenrodyellow #fafad2
lightgray #d3d3d3
lightgreen #90ee90

lightgrey #d3d3d3
lightpink #ffb6c1
lightsalmon #ffa07a

lightseagreen #20b2aa
lightskyblue #87cefa
 Valor RGB
Especificación Color Palabra clave Muestra
hexadecimal
lightslategray #778899

lightslategrey #778899
lightsteelblue #b0c4de
lightyellow #ffffe0

limegreen #32cd32
linen #faf0e6
mediumaquamarine #66cdaa

mediumblue #0000cd
mediumorchid #ba55d3
mediumpurple #9370db
mediumseagreen #3cb371

mediumslateblue #7b68ee
mediumspringgreen #00fa9a
mediumturquoise #48d1cc
mediumvioletred #c71585
midnightblue #191970
mintcream #f5fffa

mistyrose #ffe4e1
moccasin #ffe4b5
navajowhite #ffdead
oldlace #fdf5e6
olivedrab #6b8e23
orangered #ff4500

orchid #da70d6
palegoldenrod #eee8aa
palegreen #98fb98
paleturquoise #afeeee
palevioletred #db7093
papayawhip #ffefd5

peachpuff #ffdab9
peru #cd853f
pink #ffc0cb
plum #dda0dd
powderblue #b0e0e6
rosybrown #bc8f8f

royalblue #4169e1
saddlebrown #8b4513
salmon #fa8072
 Valor RGB
Especificación Color Palabra clave Muestra
hexadecimal

sandybrown #f4a460
seagreen #2e8b57
seashell #fff5ee
sienna #a0522d
skyblue #87ceeb
slateblue #6a5acd

slategray #708090
slategrey #708090
snow #fffafa
springgreen #00ff7f
steelblue #4682b4
tan #d2b48c

thistle #d8bfd8
tomato #ff6347
turquoise #40e0d0
violet #ee82ee
wheat #f5deb3
whitesmoke #f5f5f5

yellowgreen #9acd32
CSS Color Module
rebeccapurple #663399
Level 4

El color rebeccapurple es equivalente al color #639 , y se puede encontrar información

adicional sobre por qué fue introducidoa en el blog Codepen blog en un post realizado por
Trezy "Honoring a Great Man."

Palabra clave transparent

La palaba transparent representa un color totalmente transparente, es decir, el color que
veremos será el colore de fondo. Técnicamente es un color negro con un valor mínimo en el
canal alfa y la manera de representarlo es rgba(0,0,0,0) .

Nota histórica
La palabra clave transparent no fue un color en CSS hasta CSS Nivel 2 (Revisión 1).
Podía ser usada en lugar de un valor <color> regular en dos propiedades
CSS: background y border . En esencia fue añadida para permitir sobreescribir valores
sólidos heredados.

Con el soporte de la opacidad que nos proporcionan los alpha channels, transparent
fue redefinido como un color verdadero más en CSS Nivel 3 permitiendo su use
en cualquier sitio donde de requiera un valor <color> , como la propiedad color .

Palabra clave currentColor

La palabra clave currentColor representa el valor calculado para la la propiedad del
elemento color . Permite hacer que las propiedades de color sean heredadas por los
elementos hijo, que no lo hacen por defecto.

También puede ser usada en propiedades que heredan el valor calculado de la propiedad del
elemento color , en este caso, será equivalente a la plabara clave inherit en estos
elementos, si es que la hubiera.

Ejemplo
El color de la una line (un div relleno de color) se adapta al color de su propiedad
{Cssxref("color")}} , heredada de su padre.

Live example 1

<div style="color:darkred">
EL color de este texto es el mism
Algo más de texto
</div>

Live example 2

<div style="color:blue; border-bot

El color de este texto es el mims
<div style="background:currentco
Algo más de texto.
</div>

rgb()
Los colores puede ser definidos usando el modelo RGB (rojo-verde-azul) de dos
maneras:ways:

Notación Hexadecimal #RRGGBB ay #RGB

" # ", seguido de seis caracteres hexadecimales (0-9, A-F).
" # ", seguido de tres caracteres hexadecimales (0-9, A-F).
La notación de tres dígitos ( #RGB ) y la de seis ( #RRGGBB ) son iguales.
Por ejemplo, #f03 y #ff0033 representan el mismo color.

Notación funcional rgb(R,G,B)

" rgb ", seguido por tres valores <integer> o tres <percentage> values.
El número entero 255 representa el 100%, y F o FF en notación hexadecimal.

/* Todos estos ejemplos son el mismo color RGB: */

#f03
#F03
#ff0033
#FF0033
rgb(255,0,51)
rgb(255, 0, 51)
rgb(255 0 51 2) /* ¡ERROR! No uses número decimales usa enteros*/
 rgb(255, 0, 51.2) / ¡ERROR! No uses número decimales , usa enteros /
rgb(100%,0%,20%)
rgb(100%, 0%, 20%)
rgb(100%, 0, 20%) /* ¡ERROR! No mezcles notaciones de enteros y de porcentajes*

hsl()
Los colores también puede ser definidos usando el modelo tono (hue) - saturación
(saturation) - brillo (lightness) (HSL) con la notación funcional hsl(). La ventaja del modelo HSL
sobre el modelo RGB es que es mucho más intuitivo: puedes adivinar los colores que
tú quieres y luego modificarlos. Es también más fácil crear conjuntos de colores (manteniendo
el tono (hue) igual y modificando el brillo y la saturación.

El tono (Hue) se representa como un ángulo del círculo de color (por así decir, el arco iris
representado en un círculo). El ángulo se proporciona como un <number> sin unidades. Por
definición rojo=0=360, y los demas colores están dispersos por el
círculo, verde=120, azul=240, etc. Al ser un ánguilo implítamente -120=240 y 480=120.

La saturación y el brillo son representados por porcentajes.

100% es saturacion completa, y 0% es una sombra de gris..
100% brillo es blanco, 0% negro, y 50% es brillo "normal".

hsl(0, 100%,50%) /* red */

hsl(30, 100%,50%)
hsl(60, 100%,50%)
hsl(90, 100%,50%)
hsl(120,100%,50%) /* green */
hsl(150,100%,50%)
hsl(180,100%,50%)
hsl(210,100%,50%)
hsl(240,100%,50%) /* blue */
hsl(270,100%,50%)
hsl(300,100%,50%)
hsl(330,100%,50%)
hsl(360,100%,50%) /* red */

hsl(120,100%,25%) /* dark green */

hsl(120,100%,50%) /* green */
hsl(120,100%,75%) /* light green */

hsl(120,100%,50%) /* green */
hsl(120, 67%,50%)
hsl(120, 33%,50%)
hsl(120, 0%,50%)

hsl(120, 60%,70%) /* pastel green */

rgba()
Podemos definir los colores con el modelo Rojo (red) - Verde (green) - Azul (blue) - alpha
(RGBa) usando la notación funcional rgba() . RGBa amplia el modelo RGA añadiendo un
canal alfa, permitiendo de esta manera especificar la opacidad de un color.
a representa opacidad: 0=transparente; 1=opaco;
 rgba(255,0,0,0.1) /* 10% opaque red */
rgba(255,0,0,0.4) /* 40% opaque red */
rgba(255,0,0,0.7) /* 70% opaque red */
rgba(255,0,0, 1) /* full opaque red */

hsla()
Podemos definir los colores usando el modelo saturación tono (hue) - (saturation) - brillo
(lightness) (HSLa) usando lla notación funcional hsla() . HSLa amplía el modelo HSL
incluyendo el canal alfa, permitiendo de esta manera especificar la opacidad de un color.
a es la opacidad: 0=transparente; 1=opaco;

hsla(240,100%,50%,0.05) /* 5% opaque blue */

hsla(240,100%,50%, 0.4) /* 40% opaque blue */
hsla(240,100%,50%, 0.7) /* 70% opaque blue */
hsla(240,100%,50%, 1) /* full opaque blue */

Colores de Sistema
No todos los colores de sistema son soportados por todos los sistemas. para usar en
páginas web públicas..

ActiveBorder GrayText
Borde de la ventana activa Gris para el texto deshabilitado:

ActiveCaption Highlight
Título de la ventana activa. Deb usarse Elemento(s) seleccionados en un control. Debe ser
con CaptionText como color de fondo usado con el color de frente HighlightText.

AppWorkspace HighlightText
Color de fondo para el interfaz de múltiples Texto de los elemento(s) seleccionados en un
documentos. control. Debe usar con el color de fondo Highlight .

Background InactiveBorder
Fondo de escritorio. Borde de ventana inactivo.

ButtonFace InactiveCaption
Color de fondo frontal para elementos 3-D que Inactive window caption. Should be used with
parecen 3-D debido a una capa del borde próximo. the InactiveCaptionText foreground color.
Debe usar con el color de frente ButtonText .
InactiveCaptionText
ButtonHighlight Color of text in an inactive caption. Should be used
The color of the border facing the light source for 3- with the InactiveCaption background color.
D elements that appear 3-D due to that layer of
surrounding border.
InfoBackground
Color de foBackground color for tooltip controls.
ButtonShadow Should be used with the InfoText foreground color.
The color of the border away from the light source
for 3-D elements that appear 3-D due to that layer of
InfoText
surrounding border.
Text color for tooltip controls. Should be used with
the InfoBackground background color.
ButtonText
Text on push buttons. Should be used with
Menu
the ButtonFace or ThreeDFace background color.
Fondo del menú. Debe ser usado Menu background.
Should be used with the MenuText or -moz-
CaptionText MenuBarText foreground color.
Text in caption, size box, and scrollbar arrow box.
Should be used with the ActiveCaption background
MenuText
color.
 Texto en el menú. Debe ser usado Text in menus.
Should be used with the Menu background color.
Scrollbar
Color de fondo para las barras de scroll.
ThreeDDarkShadow
The color of the darker (generally outer) of the two
borders away from the light source for 3-D elements
that appear 3-D due to two concentric layers of
surrounding border.
ThreeDFace
The face background color for 3-D elements that
appear 3-D due to two concentric layers of
surrounding border. Should be used with
the ButtonText foreground color.
ThreeDHighlight
The color of the lighter (generally outer) of the two
borders facing the light source for 3-D elements that
appear 3-D due to two
concentric layers of surrounding border.
Extensiones de Mozilla al Sistema de Colores
-moz-ButtonDefault
The border color that goes around buttons that
represent the default action for a dialog box.
-moz-ButtonHoverFace
The background color of a button that the mouse
pointer is over (which would
be ThreeDFace or ButtonFace when the mouse
pointer is not over it). Should be used with the -
moz-ButtonHoverText foreground color.
-moz-ButtonHoverText
The text color of a button that the mouse pointer is
over (which would be ButtonText when the mouse
pointer is not over it). Should be used with the -
moz-ButtonHoverFace background color.
-moz-CellHighlight
Background color for selected item in a tree widget.
Should be used with the -moz-
CellHighlightText foreground color. See also -
moz-html-CellHighlight .
-moz-CellHighlightText
Text color for a selected item in a tree. Should be
used with the -moz-CellHighlight
background color. See also -moz-html-
CellHighlightText .
-moz-Combobox
Background color for combo-boxes. Should be used
with the -moz-ComboboxText foreground color. In
versions prior to 1.9.2, use -moz-Field instead.
-moz-ComboboxText
Text color for combo-boxes. Should be used with
the -moz-Combobox background color. In versions
prior to 1.9.2, use -moz-FieldText instead.
-moz-Dialog
Color de fondo para cuadros de diálogo. Debe usarse
con el color de frente -moz-DialogText
ThreeDLightShadow
The color of the darker (generally inner) of the two
borders facing the light source for 3-D elements that
appear 3-D due to two
concentric layers of surrounding border.
ThreeDShadow
The color of the lighter (generally inner) of the two
borders away from the light source for 3-D elements
that appear 3-D due to two concentric layers of
surrounding border.
Window
Fondo de las ventanas. Debe usarse con el color de
frente WindowText .
WindowFrame
Marco de ventana
WindowText
Texto en las ventanas.Debe usarse con el color de
fono de ventana.
-moz-DialogText
Text color for dialog boxes. Should be used with
the -moz-Dialog background color.
-moz-dragtargetzone
-moz-EvenTreeRow
Background color for even-numbered rows in a tree.
Should be used with the -moz-
FieldText foreground color. In Gecko versions prior
to 1.9, use -moz-Field . See also -moz-
OddTreeRow .
-moz-Field
Text field background color. Should be used with
the -moz-FieldText foreground color.
-moz-FieldText
Text field text color. Should be used with the -moz-
Field , -moz-EvenTreeRow , or -moz-
OddTreeRow background color.
-moz-html-CellHighlight
Background color for highlighted item in
HTML <select> s. Should be used with the -moz-
html-CellHighlightText foreground color. Prior
to Gecko 1.9, use -moz-CellHighlight .
-moz-html-CellHighlightText
Text color for highlighted items in
HTML <select> s. Should be used with the -moz-
html-CellHighlight background color. Prior to
Gecko 1.9, use -moz-CellHighlightText .
-moz-mac-accentdarkestshadow
-moz-mac-accentdarkshadow
-moz-mac-accentface
-moz-mac-accentlightesthighlight
-moz-mac-accentlightshadow
-moz-mac-accentregularhighlight
-moz-mac-accentregularshadow
-moz-mac-chrome-active
-moz-mac-chrome-inactive
-moz-mac-focusring of -moz-MenuHover background.
-moz-mac-menuselect
-moz-mac-menushadow
-moz-nativehyperlinktext
-moz-mac-menutextselect
Default platform hyperlink color.
-moz-MenuHover
Background color for hovered menu items. Often
similar to Highlight . Should be used with the - -moz-OddTreeRow
moz-MenuHoverText or -moz- Background color for odd-numbered rows in a tree.
MenuBarHoverText foreground color. Should be used with the -moz-
FieldText foreground color. In Gecko versions prior
to 1.9, use -moz-Field . See also -moz-
-moz-MenuHoverText
EvenTreeRow .
Text color for hovered menu items. Often similar
to HighlightText . Should be used with the -moz-
MenuHover background color. -moz-win-communicationstext
Should be used for text in objects with -moz-
appearance : -moz-win-communications-
-moz-MenuBarText
toolbox; .
Text color in menu bars. Often similar to MenuText .
Should be used on top of Menu background.
-moz-win-mediatext
Should be used for text in objects with -moz-
-moz-MenuBarHoverText
appearance : -moz-win-media-toolbox .
Color for hovered text in menu bars. Often similar
to -moz-MenuHoverText . Should be used on top

Extensiones de Mozilla a las Preferencias de Color

-moz-activehyperlinktext
Preferencias de usuario para el color de texto de los enlaces activos. Debe ser usado con el color de fondo por
defecto del documento.

-moz-default-background-color
Preferencias de usuario para el color de fondo del documento.

-moz-default-color
Preferencias de usuario para el color del texto.

-moz-hyperlinktext
Preferencias de usuario para el color del texto de los enlaces sin visitar. Debe ser usado con el color de fondo
por defecto del documento.

-moz-visitedhyperlinktext
Preferencias de usuario para el color del texto de los enlaces ya visitados. Debe ser usado con el color de fondo
por defecto del documento.

Especificaciones
Especificación Estado Comentario
CSS Color Module
Level 4
La definición de Working Draft Añadido el color rebeccapurple .
'<color>' en esta
especificación.

CSS Color Module

Level 3 Colores de sistema depreciados; añadidos colores
La definición de Recommendation SVG; añadidos las notaciones
'<color>' en esta funcionales rgba() , hsl() , hsla().
especificación.
 Especificación Estado Comentario
CSS Level 2 Recommendation Añadidos el naranja y los colores de sistema.
(Revision 1)
La definición de
'<color>' en esta
especificación.

CSS Level 1 Recommendation Definición Inicial

La definición de
'<color>' en esta
especificación.

Compatibilidad con los distintos navegadores

We're converting our compatibility data into a machine-readable JSON format. This
compatibility table still uses the old format, because we haven't yet converted the data it
contains. Find out how you can help!

Escritorio Móvil

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)

palabras clave de colores 1.0 1.0 (1.0) 3.0 [1] 3.5 1.0 (85)

#RRGGBB | #RGB 1.0 1.0 (1.0) 3.0 3.5 1.0 (85)

rgb() 1.0 1.0 (1.0) 4.0 3.5 1.0 (85)

hsl() 1.0 1.0 (1.5) 9.0 9.5 3.1 (525)

rgba() 1.0 3.0 (1.9) 9.0 10.0 3.1 (525)

hsla() 1.0 3.0 (1.9) 9.0 10.0 3.1 (525)

currentColor 1.0 1.5 (1.8) 9.0 9.5 4.0 (528)

transparent 1.0 3.0 (1.9) 9.0 [2] 10.0 3.1 (525)

rebeccapurple 38.0 33 (33) 11 25.0 7.1

Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico ? ? ? ? ?

rgba() ? ? ? ? (Yes)

rebeccapurple (Yes) 33.0 (33) ? ? 8

[1] Los colores 'e'-grey (con una e)
( grey , darkgrey , darkslategrey , dimgrey , lightgrey , lightslategrey ) sólo son
soportados a partir de IE 8.0. De IE 3 a IE 7 sólo son soportadas las variantes con
'a': gray , darkgray , darkslategray , dimgray , lightgray , lightslategray .

[2] IE 7-8 soporta la palabra clave transparent sólo para background y border . color:
transparent; es equivalente a negro en IE. IE6 renderiza también como negros los bordes
transparentes.