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 inicial Varies from one browser to another

Applies to all elements. It also applies to ::first-
letter and ::first-line .
Heredable yes
 Media visual
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

Canonical order el 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
Agrega sintaxis sin comas para las
funciones rgb() , rgba() , hsl() , y hsla() . Permite
CSS Color valores alfa
Module en rgb() y hsl() , convirtiéndose rgba() y hsla() en
Level 4 alias (obsoletos) para ellos.
Working Draft Agrega una palabra clave de color rebeccapurple .
La definición de
'color' en esta Agrega valores de color hexadecimal de 4 y 8 dígitos, donde
especificación. el último dígito representa el valor alfa.
Añade las funciones hwb() , device-cmyk() , y color() .

CSS
Transitions
La definición de Working Draft Define color como animable.
'color' en esta
especificación.

CSS Color
Module
Level 3 Desprecia los colores del sistema. Agrega colores
Recommendation
La definición de SVG.Agrega las funciones rgba() , hsl() , y hsla() .
'color' en esta
especificación.

CSS Level 2
(Revision 1)
La definición de Recommendation Añade el color orange y los colores del sistema.
'color' en esta
especificación.

CSS Level 1
La definición de Recommendation Definicion inicial.
'color' en esta
especificación.

Compatibilidad de navegadores
Update compatibility data on GitHub

color
Chrome 1
Edge 12
Firefox 1
IE 3

Opera Si
Safari 1

WebView Android 1

Chrome Android 18
Firefox Android 4

Opera Android Si
Safari iOS 1
Samsung Internet Android 1.0

Alpha color values ( rgba() , hsla() )

Chrome 1
Edge 12

Firefox 3
IE 9

Opera 10
Safari 3.1

WebView Android ≤37

Chrome Android 18
Firefox Android 4
Opera Android Si

Safari iOS 2
Samsung Internet Android Si

RGBA hexadecimal notation ( #RRGGBBAA , #RGBA )

Chrome 62
Edge No

Firefox 49
IE No
Opera 49
Safari 9.1

WebView Android 62
Chrome Android 62

Firefox Android 49
Opera Android 47

Safari iOS 9.3

Samsung Internet Android ?

currentcolor
Chrome 1
Edge 12
Firefox 1.5
IE 9
Opera 9.5

Safari 4

WebView Android 37
Chrome Android 18

Firefox Android 4
Opera Android ?

Safari iOS 3.2

Samsung Internet Android ?

Allow floats in rgb() and rgba()

Chrome 66
Edge No
Firefox 52
IE No
Opera 53
Safari 12.1

WebView Android 66
Chrome Android 66
Firefox Android 52
Opera Android 47
Safari iOS 12.2
Samsung Internet Android ?

HSL color values ( hsl() )

Chrome 1
Edge 12

Firefox 1
IE 9
Opera 9.5
Safari 3.1

WebView Android ≤37

Chrome Android 18

Firefox Android 4
Opera Android Si
Safari iOS 2
Samsung Internet Android Si

hsl() can accept alpha values

Chrome 65
Edge No
Firefox 52
IE No
Opera 52

Safari 12.1
WebView Android 65
Chrome Android 65

Firefox Android 52
Opera Android 47
Safari iOS 12.2
Samsung Internet Android 9.0

Keyword color values

Chrome 1
Edge 12

Firefox 1
IE 3
Opera 3.5
Safari 1

WebView Android ≤37

Chrome Android 18
Firefox Android 4
Opera Android Si
Safari iOS 1
Samsung Internet Android Si

rebeccapurple
Chrome 38
Edge 12

Firefox 33
IE 11
Opera 25

Safari 9

WebView Android 38
Chrome Android 38

Firefox Android 33
Opera Android 25
Safari iOS 8
Samsung Internet Android 3.0

rgb() can accept alpha values

Chrome 65
Edge No
Firefox 52
IE No
Opera 52

Safari 12.1

WebView Android 65
Chrome Android 65

Firefox Android 52
Opera Android 47
Safari iOS 12.2
Samsung Internet Android 9.0

RGB functional notation ( rgb() )

Chrome 1

Edge 12
Firefox 1
IE 4
Opera 3.5
Safari 1

WebView Android ≤37

Chrome Android 18
Firefox Android 4
Opera Android Si
Safari iOS 1

Samsung Internet Android Si

RGB hexadecimal notation ( #RRGGBB , #RGB )

Chrome 1

Edge 12
Firefox 1
IE 3
Opera 3.5
Safari 1

WebView Android ≤37

Chrome Android 18
Firefox Android 4
Opera Android Si
Safari iOS 1

Samsung Internet Android Si

Space-separated functional color notations

Chrome 65

Edge No
Firefox 52
IE No
Opera 52

Safari 12.1

WebView Android 65
Chrome Android 65
Firefox Android 52
Opera Android 47
Safari iOS 12.2

Samsung Internet Android ?

transparent
Chrome 1

Edge 12
Firefox 3
IE 9
Opera 10
Safari 3.1

WebView Android 37
Chrome Android 18
Firefox Android 4
Opera Android ?
Safari iOS 2

Samsung Internet Android ?

What are we missing?

Soporte completo

Sin soporte

Compatibilidad desconocida

Ver notas de implementación.

El usuario debe de habilitar explícitamente esta característica.