Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

La propiedad de CSS color selecciona el valor de color de primer plano del contenido de elemento de texto y decoraciones de texto. Tambien establece el valor currentcolor  que se puede usar como un valor indirecto en otras propiedades, y es el valor predeterminado para otras propiedades de color, como border-color.

Para obtener una descripción general del uso del color en HTML, consulte Aplicando color a los elementos HTML mediante CSS.

/* Valores de palabras clave */
color: currentcolor;

/* Valores <named-color> */
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/* Valores <hex-color> */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* Valores <rgb()> */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/* Valores <hsl()> */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/* Valores Globales */
color: inherit;
color: initial;
color: unset;

Ten en cuenta que el valor debe ser un color uniforme . No puede ser un <gradient>, que es en realidad un tipo de <image>.

Valor inicialVaries from one browser to another
Applies toall elements. It also applies to ::first-letter and ::first-line.
Heredableyes
Mediavisual
Valor calculadoIf the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
Animation typea color
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

La propiedad color esta especificada como un solo un valor de <color>

Valores

<color>
Establece el color de las partes textuales y decorativas del elemento.

Sintaxis formal

<color>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Ejemplos

Las siguientes son todas las formas de hacer que el texto de un párrafo sea rojo:

p { color: red; }
p { color: #f00; }
p { color: #ff0000; }
p { color: rgb(255,0,0); }
p { color: rgb(100%, 0%, 0%); }
p { color: hsl(0, 100%, 50%); }

/* 50% translúcido */
p { color: rgba(255, 0, 0, 0.5); } 
p { color: hsla(0, 100%, 50%, 0.5); }

Especificaciones

Especificación Estado Comentario
CSS Color Module Level 4
La definición de 'color' en esta especificación.
Working Draft

Agrega sintaxis sin comas para las funciones rgb(), rgba(), hsl(), y hsla()Permite valores alfa en rgb() y hsl(), convirtiéndose rgba() y hsla() en alias (obsoletos) para ellos.
Agrega una palabra clave de color rebeccapurple.
Agrega valores de color hexadecimal de 4 y 8 dígitos, donde el último dígito representa el valor alfa.
Añade las funciones hwb(), device-cmyk(), y color().

CSS Transitions
La definición de 'color' en esta especificación.
Working Draft Define color como animable.
CSS Color Module Level 3
La definición de 'color' en esta especificación.
Recommendation Desprecia los colores del sistema. Agrega colores SVG. Agrega las funciones rgba(), hsl(), y hsla().
CSS Level 2 (Revision 1)
La definición de 'color' en esta especificación.
Recommendation Añade el color orange y los colores del sistema.
CSS Level 1
La definición de 'color' en esta especificación.
Recommendation Definicion inicial.

Compatibilidad de navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1IE Soporte completo SiOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo 1Chrome Android Soporte completo 18Edge Mobile Soporte completo 12Firefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
Keyword color valuesChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1IE Soporte completo 3
Notas
Soporte completo 3
Notas
Notas Internet Explorer 8 and later support gray color keywords spelled with an e (grey, darkgrey, darkslategrey, dimgrey, lightgrey, and lightslategrey). Internet Explorer 3 to Internet Explorer 7 only support the keywords spelled with a (gray, darkgray, darkslategray, dimgray, lightgray, and lightslategray).
Opera Soporte completo 3.5Safari Soporte completo 1WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
RGB hexadecimal notation (#RRGGBB, #RGB)Chrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1IE Soporte completo 3Opera Soporte completo 3.5Safari Soporte completo 1WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
RGB functional notation (rgb())Chrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1IE Soporte completo 4Opera Soporte completo 3.5Safari Soporte completo 1WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
HSL color values (hsl())Chrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1IE Soporte completo 9Opera Soporte completo 9.5Safari Soporte completo 3.1WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo SiOpera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
Alpha color values (rgba(), hsla())Chrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 3IE Soporte completo 9Opera Soporte completo 10Safari Soporte completo 3.1WebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si
currentcolorChrome Soporte completo 1Edge ? Firefox Soporte completo 1.5IE Soporte completo 9Opera Soporte completo 9.5Safari Soporte completo 4WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
transparentChrome Soporte completo 1Edge ? Firefox Soporte completo 3IE Soporte completo 9Opera Soporte completo 10Safari Soporte completo 3.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
rebeccapurpleChrome Soporte completo 38Edge ? Firefox Soporte completo 33IE Soporte completo 11Opera Soporte completo 25Safari Soporte completo SiWebView Android Soporte completo SiChrome Android ? Edge Mobile ? Firefox Android Soporte completo 33Opera Android ? Safari iOS Soporte completo 8Samsung Internet Android ?
RGBA hexadecimal notation (#RRGGBBAA, #RGBA)Chrome Soporte completo 62
Soporte completo 62
Soporte completo 52
Deshabilitado
Deshabilitado From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Sin soporte NoFirefox Soporte completo 49IE ? Opera Soporte completo 39
Deshabilitado
Soporte completo 39
Deshabilitado
Deshabilitado From version 39: this feature is behind the Enable experimental Web Platform features preference.
Safari Soporte completo 9.1WebView Android ? Chrome Android ? Edge Mobile Sin soporte NoFirefox Android ? Opera Android Sin soporte NoSafari iOS ? Samsung Internet Android ?
Space-separated functional color notationsChrome Soporte completo 65Edge ? Firefox Soporte completo 52IE ? Opera Soporte completo 52Safari ? WebView Android Soporte completo 65Chrome Android Soporte completo 65Edge Mobile ? Firefox Android Soporte completo 52Opera Android Soporte completo 52Safari iOS ? Samsung Internet Android ?
Allow floats in rgb() and rgba()Chrome Soporte completo 66Edge ? Firefox Soporte completo 52IE ? Opera Soporte completo 53Safari ? WebView Android Soporte completo 66Chrome Android Soporte completo 66Edge Mobile ? Firefox Android Soporte completo 52Opera Android Soporte completo 53Safari iOS ? Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: rhssr, SphinxKnight, teoli, trada, Mgjbot, HenryGR
Última actualización por: rhssr,