This page was translated from English by the community. Learn more and join the MDN Web Docs community.

color

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 (en-US)  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 inicialcanvastext
Applies toall elements and text. It also applies to ::first-letter and ::first-line.
Heredableyes
Valor calculadocomputed color
Animation typeby computed value type

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()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hwb()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
where 
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hwb()> = hwb( [ (en-US)<hue> | (en-US) none] (en-US) [ (en-US)<percentage> | (en-US) none] (en-US) [ (en-US)<percentage> | (en-US) none] (en-US) [ (en-US) / [ (en-US)<alpha-value> | (en-US) none] (en-US) ] (en-US)? (en-US) )
where 
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <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

BCD tables only load in the browser

Ver también