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()
yrgba()
) - Usando el sistema HSL cylindrical-coordinate (usando las notaciones funcionales
hsl()
yhsla()
)
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.
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.
Especificaci贸n | Color | Palabra clave | Valor RGB hexadecimal | Muestra |
---|---|---|---|---|
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 |
|||
navy |
#000080 |
|||
blue |
#0000ff |
|||
teal |
#008080 |
|||
aqua |
#00ffff |
|||
CSS Level 2 (Revision 1) | orange |
#ffa500 |
||
CSS Color Module Level 3 | aliceblue |
#f0f8ff |
||
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 |
|||
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 |
|||
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 |
|||
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 Level 4 | rebeccapurple |
#663399 |
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)
.
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 mismo que el de la l铆nea <div style="background:currentcolor; height:1px"></div>
Algo m谩s de texto
</div>
Live example 2
<div style="color:blue; border-bottom: 1px dashed currentcolor;">
El color de este texto es el mimso que el color de la l铆nea:
<div style="background:currentcolor; height:1px"></div>
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).
#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(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
- Borde de la ventana activa
- ActiveCaption
- T铆tulo de la ventana activa. Deb usarse con
CaptionText
como color de fondo - AppWorkspace
- Color de fondo para el interfaz de m煤ltiples documentos.
- Background
- Fondo de escritorio.
- ButtonFace
- Color de fondo frontal para elementos 3-D que parecen 3-D debido a una capa del borde pr贸ximo. Debe usar con el color de frente
ButtonText
. - ButtonHighlight
- The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
- ButtonShadow
- The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
- ButtonText
- Text on push buttons. Should be used with the
ButtonFace
orThreeDFace
background color. - CaptionText
- Text in caption, size box, and scrollbar arrow box. Should be used with the
ActiveCaption
background color. - GrayText
- Gris para el texto deshabilitado:
- Highlight
- Elemento(s) seleccionados en un control. Debe ser usado con el color de frente
HighlightText.
- HighlightText
- Texto de los elemento(s) seleccionados en un control. Debe usar con el color de fondo
Highlight
. - InactiveBorder
- Borde de ventana inactivo.
- InactiveCaption
- Inactive window caption. Should be used with the
InactiveCaptionText
foreground color. - InactiveCaptionText
- Color of text in an inactive caption. Should be used with the
InactiveCaption
background color. - InfoBackground
- Color de foBackground color for tooltip controls. Should be used with the
InfoText
foreground color. - InfoText
- Text color for tooltip controls. Should be used with the
InfoBackground
background color. - Menu
- Fondo del men煤. Debe ser usado Menu background. Should be used with the
MenuText
or-moz-MenuBarText
foreground color. - MenuText
- 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. - 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.
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
orButtonFace
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
- -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
- -moz-mac-menuselect
- -moz-mac-menushadow
- -moz-mac-menutextselect
- -moz-MenuHover
- Background color for hovered menu items. Often similar to
Highlight
. Should be used with the-moz-MenuHoverText
or-moz-MenuBarHoverText
foreground color. - -moz-MenuHoverText
- Text color for hovered menu items. Often similar to
HighlightText
. Should be used with the-moz-MenuHover
background color. - -moz-MenuBarText
- Text color in menu bars. Often similar to
MenuText
. Should be used on top ofMenu
background. - -moz-MenuBarHoverText
- Color for hovered text in menu bars. Often similar to
-moz-MenuHoverText
. Should be used on top of-moz-MenuHover
background. - -moz-nativehyperlinktext
- Default platform hyperlink color.
- -moz-OddTreeRow
- Background color for odd-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-EvenTreeRow
. - -moz-win-communicationstext
- Should be used for text in objects with
.-moz-appearance
: -moz-win-communications-toolbox; - -moz-win-mediatext
- Should be used for text in objects with
.-moz-appearance
: -moz-win-media-toolbox
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 '<color>' en esta especificaci贸n. |
Working Draft | A帽adido el color rebeccapurple . |
CSS Color Module Level 3 La definici贸n de '<color>' en esta especificaci贸n. |
Recommendation | Colores de sistema depreciados; a帽adidos colores SVG; a帽adidos las notaciones funcionales rgba() , hsl() , hsla(). |
CSS Level 2 (Revision 1) La definici贸n de '<color>' en esta especificaci贸n. |
Recommendation | A帽adidos el naranja y los colores de sistema. |
CSS Level 1 La definici贸n de '<color>' en esta especificaci贸n. |
Recommendation | Definici贸n Inicial |
Compatibilidad con los distintos navegadores
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.
Ver adem谩s
- La propiedad
opacity
, que permite definir la transparencia a nivel de elemento. - Las propiedades
color
,background-color
,border-color
,outline-color
,text-shadow
,box-shadow
.