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 AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support 1Chrome Android Full support 18Edge Mobile Full support 12Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung 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 YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
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 YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
currentcolorChrome Full support 1Edge ? Firefox Full support 1.5IE Full support 9Opera Full support 9.5Safari Full support 4WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
transparentChrome Full support 1Edge ? Firefox Full support 3IE Full support 9Opera Full support 10Safari Full support 3.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
rebeccapurpleChrome Full support 38Edge ? Firefox Full support 33IE Full support 11Opera Full support 25Safari Full support YesWebView Android Full support YesChrome Android ? Edge Mobile ? Firefox Android Full support 33Opera Android ? Safari iOS Full support 8Samsung Internet Android ?
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 ? Opera Full support 39
Disabled
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 ? Chrome Android ? Edge Mobile No support NoFirefox Android ? Opera Android No support NoSafari iOS ? Samsung Internet Android ?
Space-separated functional color notationsChrome Full support 65Edge ? Firefox Full support 52IE ? Opera Full support 52Safari ? WebView Android Full support 65Chrome Android Full support 65Edge Mobile ? Firefox Android Full support 52Opera Android Full support 52Safari iOS ? Samsung Internet Android ?
Allow floats in rgb() and rgba()Chrome Full support 66Edge ? Firefox Full support 52IE ? Opera Full support 53Safari ? WebView Android Full support 66Chrome Android Full support 66Edge Mobile ? Firefox Android Full support 52Opera Android Full support 53Safari iOS ? Samsung 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

Etiquetas do documento e colaboradores

Etiquetas: 
Colaboradores desta página: UnrealLeo
Última atualização por: UnrealLeo,