We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico1121 Si Si Si
Keyword color values1121313.51
RGB hexadecimal notation (#RRGGBB, #RGB)112133.51
RGB functional notation (rgb())112143.51
HSL color values (hsl())112199.53.1
Alpha color values (rgba(), hsla())11239103.1
currentcolor1 ?1.599.54
transparent1 ?39103.1
rebeccapurple38 ?331125 Si
RGBA hexadecimal notation (#RRGGBBAA, #RGBA)

63

522

No49 ?3939.1
Space-separated functional color notations65 ?52 ?52 ?
Allow floats in rgb() and rgba()67 ?52 ? ? ?
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico11124 Si Si Si
Keyword color values Si Si Si Si Si Si Si
RGB hexadecimal notation (#RRGGBB, #RGB) Si Si Si Si Si Si Si
RGB functional notation (rgb()) Si Si Si Si Si Si Si
HSL color values (hsl()) Si Si Si Si Si Si Si
Alpha color values (rgba(), hsla()) Si Si Si4 Si Si Si
currentcolor ? ? ? ? ? ? ?
transparent ? ? ? ? ? ? ?
rebeccapurple Si ? ?33 ?8 ?
RGBA hexadecimal notation (#RRGGBBAA, #RGBA) ? ? No ? No ? ?
Space-separated functional color notations ? ? ?52 ? ? ?
Allow floats in rgb() and rgba()6767 ?52 ? ? ?

1. 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).

2. From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

3. From version 39: this feature is behind the Enable experimental Web Platform features preference.

Ver también

Etiquetas y colaboradores del documento

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