Propriedade color do CSS

A propriedade color do CSS definine o valor da cor de um elemento com seu conteúdo em texto e seus decorações (estilos). Também define o valorer da currentcolor, no qual pode ser usado um valor indireto de outra propriedade, e tem como padrão as cores de outras propriedades (enquanto não definida), tal como a propriedade border-color.

Para uma visão geral de como usar a propriedade color e semelhantes no HTML, veja Cor - CSS, como começar.

Syntaxe

/* Valores com Palavras-chave */
color: white; /* Aqui será definida a cor atual*/

/* Valores com Palavras-chave */
/* color define a cor do texto no elemento*/
color: red;    /* Define como 'vermelho'*/
color: blue;   /* Define como 'laranja'*/
color: cyan;   /* Define como 'verde-água'*/

/* Obs: Utilizando "light" antes da cor, ela ficará clara.
   ex: lightblue;
   E utilizando "dark", ela ficará mais escura.
   ex: darkblue;
*/

/* Cores com valores Hexa-decimais, 
ou seja de 1 à 15, sendo de 0 à 9 normais,mas de 10 à 15
são as letras do alfabeto , logo de "a" à "f". */

color: #090;
color: #0099fg;
color: #090a;
color: #0099bcaa;

/* Valores "rgb" ou "rgba", 
ou seja, o primeiro é vermelho, o segundo é verde e
o terceiro é azul, o "a" é o nível de transparência da cor,
e vai de 0 à 1; 
Ex: preto meio transparênte = rgba(255,255,255,0.5); */

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()", sendo
hsl(num da cor"1-369"saturação"0-100"luminosidade"0-100")*/
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 globais, pega algun valor já definido, 
para todo o <body>, por exemplo. */
color: inherit;
color: initial;
color: unset;

A propriedade color é especificada somente com o valor <color> .

Note que o valor sempre será uniforme para color. Não podendo ter  <gradient>(gradiente), que é atualmente um tipo para <image>.

Valores

<color>
 Define a cor dos caracteres presentes no elemento a ser estilizado.

Syntaxe formal

p { color: gray; }

Exemplos

A seguir, você verá várias maneira de tornar a cor de um texto num parágrafo vermelha:

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(transparênte) */
p { color: rgba(255, 0, 0, 0.5); } 
p { color: hsla(0, 100%, 50%, 0.5); }

Preocupações com acessibilidade

É extremamente crucial que todo site, contenha um contraste de cores adequado, para que pessoas com níveis baixos de visão tenha um aboa experiência ao utilizar o site.

Specifications

Specification Status Comment
CSS Color Module Level 4
The definition of 'color' in that specification.
Rascunho atual Adiciona syntaxes sem emendas para as funções rgb(), rgba(), hsl() e hsla() . Permite valores alpha em rgb() e hsl(), dirando rgba() e hsla() em (descontinuada).
Adiciona a palavra-chave rebeccapurple.
Adiciona valores de cores hexa-decimais de 4 à 8 dígitos, where the last digit(s) represents the alpha value.
Adiona as funcões hwb(), device-cmyk() e color() .
CSS Transitions
The definition of 'color' in that specification.
Rascunho atual Define color como animável.
CSS Color Module Level 3
The definition of 'color' in that specification.
Recomendação Deprecia as cores do Sistema. Adiciona cores SVG. Adicionando as funções rgba(), hsl(), and hsla().
CSS Level 2 (Revision 1)
The definition of 'color' in that specification.
Recomendação Adiciona a cor laranja orange color e o Sistema de Cores.
CSS Level 1
The definition of 'color' in that specification.
Recomendação Definição Inicial
Initial valueVaries from one browser to another
Aplica-se aall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Midiavisual
Computed valueIf 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 orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
colorChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support YesSafari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0
Alpha color values (rgba(), hsla())Chrome Full support 1Edge Full support 12Firefox Full support 3IE Full support 9Opera Full support 10Safari Full support 3.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 2Samsung Internet Android Full support Yes
RGBA hexadecimal notation (#RRGGBBAA, #RGBA)Chrome Full support 62
Full support 62
Full support 52
Disabled
Disabled From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox Full support 49IE No support NoOpera Full support 49
Full support 49
Full support 39
Disabled
Disabled From version 39: this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 9.1WebView Android Full support 62
Full support 62
Full support 52
Disabled
Disabled From version 52: this feature is behind the Enable experimental Web Platform features preference.
Chrome Android Full support 62
Full support 62
Full support 52
Disabled
Disabled From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Full support 49Opera Android Full support 47
Full support 47
Full support 41
Disabled
Disabled From version 41: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Full support 9.3Samsung Internet Android ?
currentcolorChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 9Opera Full support 9.5Safari Full support 4WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS Full support 3.2Samsung Internet Android ?
Allow floats in rgb() and rgba()Chrome Full support 66Edge No support NoFirefox Full support 52IE No support NoOpera Full support 53Safari Full support 12.1WebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 52Opera Android Full support 47Safari iOS Full support 12.2Samsung Internet Android ?
HSL color values (hsl())Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9.5Safari Full support 3.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 2Samsung Internet Android Full support Yes
hsl() can accept alpha valuesChrome Full support 65Edge No support NoFirefox Full support 52IE No support NoOpera Full support 52Safari Full support 12.1WebView Android Full support 65Chrome Android Full support 65Firefox Android Full support 52Opera Android Full support 47Safari iOS Full support 12.2Samsung Internet Android Full support 9.0
Keyword color valuesChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3
Notes
Full support 3
Notes
Notes 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).
Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support Yes
rebeccapurpleChrome Full support 38Edge Full support 12Firefox Full support 33IE Full support 11Opera Full support 25Safari Full support 9WebView Android Full support 38Chrome Android Full support 38Firefox Android Full support 33Opera Android Full support 25Safari iOS Full support 8Samsung Internet Android Full support 3.0
rgb() can accept alpha valuesChrome Full support 65Edge No support NoFirefox Full support 52IE No support NoOpera Full support 52Safari Full support 12.1WebView Android Full support 65Chrome Android Full support 65Firefox Android Full support 52Opera Android Full support 47Safari iOS Full support 12.2Samsung Internet Android Full support 9.0
RGB functional notation (rgb())Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support Yes
RGB hexadecimal notation (#RRGGBB, #RGB)Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support Yes
Space-separated functional color notationsChrome Full support 65Edge No support NoFirefox Full support 52IE No support NoOpera Full support 52Safari Full support 12.1WebView Android Full support 65Chrome Android Full support 65Firefox Android Full support 52Opera Android Full support 47Safari iOS Full support 12.2Samsung Internet Android ?
transparentChrome Full support 1Edge Full support 12Firefox Full support 3IE Full support 9Opera Full support 10Safari Full support 3.1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS Full support 2Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Veja também