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 (en-US), 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 (en-US).
Experimente
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> (en-US)(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 value | canvastext |
|---|---|
| Aplica-se a | all elements and text. It also applies to ::first-letter and ::first-line. |
| Inherited | yes |
| Computed value | computed color |
| Animation type | by computed value type |
Compatibilidade com navegadores
BCD tables only load in the browser