Propriedade color do CSS

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

Experimente

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

Syntaxe

css
/* 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 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 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:

css
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
CSS Color Module Level 4
# the-color-property
Scalable Vector Graphics (SVG) 2
# ColorProperty

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
color

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja também