Propriedade de Cor do Texto
Última atualização: 2026-09-13
color Propriedade de Cor do Texto
A propriedade color define a cor de primeiro plano do texto de um elemento e é uma das propriedades CSS mais usadas. Aceita palavras-chave de cor, valores hex, RGB, HSL e muitos outros formatos de cor. A propriedade é herdada pelos elementos filhos, por isso geralmente é definida em um pai para unificar a cor de um bloco inteiro de texto.
| Categoria | |
|---|---|
| Valor Inicial | canvastext |
| Herdado | Sim |
| Aplica-se A | all |
| Tipo de Animação | color |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
color: <color>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<color> | Tipo | Cor de primeiro plano do texto |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| color | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： A propriedade color é herdada pelos filhos, então defini-la no body unifica a cor de texto padrão em todo o site.
Aviso： Nunca transmita informação apenas pela cor — usuários daltônicos podem não distingui-la. Combine a cor com texto ou ícones.
❓ Perguntas Frequentes
QQuais formatos de cor a propriedade color do CSS suporta?
ASuporta palavras-chave de cor (red, transparent), códigos hex (#ff0000, #f00), rgb()/rgba() e hsl()/hsla(). O CSS Color 4 adiciona lch(), oklch() e a sintaxe separada por espaços como rgb(255 0 0 / 50%). Hex e rgb() são os mais comuns no trabalho diário, enquanto hsl() é conveniente para ajustar matiz e luminosidade.
QQual é a diferença entre color e background-color?
Acolor define a cor do texto (primeiro plano), é herdada pelos filhos e atua como currentcolor para elementos cuja cor não está definida explicitamente, como bordas e sublinhados. background-color define o fundo do elemento e não é herdada. Juntas, determinam a legibilidade do texto, então garanta contraste suficiente — o WCAG AA exige pelo menos 4,5:1 para texto normal.
QExiste diferença entre #f00 e #ff0000?
ANão. #f00 é a forma abreviada de #ff0000: quando os dois dígitos hex de um canal são iguais (como 00, ff, aa), pode ser compactado em um dígito. As formas de 4 e 8 dígitos adicionam um canal alfa — por exemplo, #ff000080 significa vermelho com 50% de opacidade, sendo os primeiros três/seis dígitos para a cor e o último um/dois para o alfa.
QComo gerencio o tema de cores de um site com variáveis CSS?
ADefina variáveis em :root, como --primary: #2c7be5; --text: #333;, e referencie-as com color: var(--primary);. Centralizá-las facilita o theming, e color-mix() (suportado por navegadores modernos) pode derivar variantes mais claras e mais escuras a partir de uma variável. Forneça valores de fallback para navegadores antigos que não têm color-mix().
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
