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 inicial | Varies from one browser to another |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Heredable | yes |
Valor calculado | If 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 type | a color |
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) <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) )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 |
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
- El tipo de datos de
<color>
- Otras propiedades relacionadas con el color:
background-color
,border-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
,caret-color
, ycolumn-rule-color
(en-US) - Aplicar color a elementos HTML usando CSS