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

Error: could not find syntax for this item

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