Propriedade CSS color
A propriedade CSS color define a cor do conteúdo de texto e decorações de texto. Experimente exemplos da propriedade color e veja os resultados.
A propriedade CSS color define a cor de primeiro plano de um elemento — isto é, a cor do seu conteúdo de texto e de qualquer decoração de texto (sublinhados, linhas acima, linha cortada). Ela não afeta fundos, bordas ou imagens; para isso, você usa propriedades dedicadas como background-color.
Esta página aborda a sintaxe de color, todos os formatos de valor que podem ser passados a ela (cores nomeadas, hex, RGB/RGBA, HSL/HSLA), como color é herdada e como manter o texto legível. Você pode explorar valores de cores da web em nossa seção HTML colors, consultar palavras-chave em CSS color names e escolher um tom personalizado com nossa ferramenta Color Picker.
Como color é herdada, defini-la em um contêiner é propagada para todo o texto descendente, a menos que um elemento filho a substitua — portanto, muitas vezes basta declará-la uma única vez no body. O valor padrão é currentcolor, uma palavra-chave que resolve para o valor de color em vigor no momento, o que é útil para manter bordas ou preenchimentos SVG sincronizados com a cor do texto.
| Valor Inicial | currentcolor |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter e ::first-line. |
| Herdada | Sim. |
| Animável | Sim. A cor é animável. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.color = "#1c87c9"; |
Sintaxe
Sintaxe da Propriedade CSS color
color: color | initial | inherit;Exemplo da propriedade color:
Exemplo da Propriedade CSS color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Resultado
Você pode definir valores hexadecimais, RGB, HSL ou nomes de cores como valor para a propriedade color. Observação: O valor inicial é currentcolor, o que significa que ele herda a cor do texto do elemento pai.
Exemplo da propriedade color com um valor de cor nomeada:
Exemplo da Propriedade CSS color com valor de cor nomeada
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: blue;
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p>This is some paragraph for example.</p>
<p class="blue">This is some paragraph with a named blue color.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Exemplo da propriedade color com um valor hexadecimal:
Exemplo da Propriedade CSS color com valor hexadecimal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a hexadecimal color value (#8ebf42 for green).</p>
<p>This is some paragraph for example.</p>
</body>
</html>Exemplo da propriedade color com um valor RGB:
Exemplo da Propriedade CSS color com valor RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with a RGB color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Exemplo da propriedade color com um valor HSL:
Exemplo da Propriedade CSS color com valor HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.color {
color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<h2>Color property example.</h2>
<p>This is some paragraph for example</p>
<p class="color">This is some paragraph with an HSL color value.</p>
<p>This is some paragraph for example.</p>
</body>
</html>Escolhendo um formato de cor
Todos os quatro formatos acima podem descrever a mesma cor — a escolha diz respeito à legibilidade e ao que você precisa controlar:
- Cores nomeadas (
blue,tomato,rebeccapurple) são as mais legíveis, mas limitadas a uma lista fixa de palavras-chave. Boas para protótipos rápidos. - Hexadecimal (
#8ebf42) é o mais comum em produção. Os três pares representam vermelho, verde e azul em base 16. Um 4º ou 8º dígito adiciona alfa:#8ebf4280equivale a ~50% de opacidade. - RGB (
rgb(142, 191, 66)) usa os mesmos canais que o hex, mas em decimal, o que é mais fácil de ler e de gerar por código. - HSL (
hsl(89, 43%, 51%)) descreve o matiz (0–360°), a saturação e a luminosidade. É o mais intuitivo quando você deseja ajustar uma cor manualmente — aumente a luminosidade para um estado hover sem alterar o matiz.
Transparência com RGBA e HSLA
Adicione um canal alfa com rgba() ou hsla() para tornar o texto semitransparente. O alfa é um número de 0 (totalmente transparente) a 1 (totalmente opaco):
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.faded {
color: rgba(28, 135, 201, 0.5);
}
</style>
</head>
<body>
<h2>Color property example</h2>
<p class="faded">This paragraph is 50% transparent blue.</p>
</body>
</html>Para desvanecer um elemento inteiro (texto, bordas, fundo e filhos juntos) em vez de apenas a cor do texto, use a propriedade opacity.
Escolher uma cor de texto é também uma decisão de acessibilidade. O texto e seu fundo precisam ter contraste suficiente para leitores com baixa visão: o WCAG exige uma taxa de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. Cinza claro sobre branco pode parecer elegante, mas frequentemente não passa nesse teste.
Valores
| Valor | Descrição | Teste |
|---|---|---|
| color | Descreve a cor do texto e das decorações de texto. Nomes de cores, códigos de cor hexadecimais, rgb(), rgba(), hsl(), hsla() podem ser usados. | Play it » |
| initial | Faz a propriedade usar seu valor padrão. | Play it » |
| inherit | Herda a propriedade de seu elemento pai. |