Docs executáveis de CSS: Cor do texto

Q: Como mudar a cor da fonte no HTML?

Use a propriedade CSS color, em uma folha de estilo ou em um atributo style: Blue text . A antiga tag está obsoleta.

Q: Como mudar a cor de uma palavra só?

Envolva a palavra em um e dê uma cor a ele: This is red . Use ou no lugar de se a palavra também for importante ou enfatizada.

Q: No CSS é font-color ou color?

É color. Não existe propriedade font-color nem text-color; o navegador as ignora.

Como mudar a cor do texto no HTML

Use a propriedade CSS color. Ela define a cor do texto de um elemento, e todo elemento dentro dele herda a mesma cor, a menos que defina a sua.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text color</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .blue { color: #2563eb; }
    .green { color: rgb(22 163 74); }
  </style>
</head>
<body>
  <p class="blue">Blue text from a class in a stylesheet.</p>
  <p class="green">Green text written as rgb().</p>
  <p style="color: darkorange;">Orange text from a style attribute.</p>
  <p>Default text, then <span style="color: #dc2626;">one red word</span> in it.</p>
</body>
</html>

A propriedade se chama color, não font-color nem text-color. Esses nomes não existem no CSS e são ignorados sem aviso.

Por que não usar a tag font

Tutoriais antigos mostram . Essa tag foi removida do HTML há anos: os validadores a apontam como erro, e ela mistura estilo com marcação, então mudar uma cor significa editar cada tag à mão. Os navegadores ainda a desenham por compatibilidade, e esse é o único motivo de ela parecer funcionar.

<!-- obsolete -->
<font color="red">Warning</font>

<!-- use this -->
<span style="color: red;">Warning</span>

<!-- or better, a class you can change in one place -->
<span class="warning">Warning</span>

Formas de escrever a cor

color aceita todos os formatos de cor do CSS. Os quatro mais comuns:

Formato	Exemplo	Observações
Nome	`color: tomato;`	148 cores com nome, práticas para testes rápidos
Hex	`color: #2563eb;`	O mais comum em arquivos de design
rgb()	`color: rgb(37 99 235);`	Vermelho, verde e azul de 0 a 255
hsl()	`color: hsl(221 83% 53%);`	Matiz, saturação, luminosidade: fácil de clarear ou escurecer

Hex, rgb() e hsl() aceitam um canal alfa para texto semitransparente, como #2563eb80 ou rgb(37 99 235 / 50%). A página de cores CSS explica todos os formatos.

Colorir uma página inteira, um título ou uma seção

Defina a cor uma vez no body, deixe a herança fazer o resto e sobrescreva onde precisar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inherited color</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #374151; }
    h1 { color: #111827; font-size: 24px; }
    .note { color: #92400e; background: #fef3c7; padding: 8px 12px; }
  </style>
</head>
<body>
  <h1>Heading in near black</h1>
  <p>Body text inherits dark gray from body.</p>
  <div class="note">
    <p>This box sets amber text, and the paragraph inside inherits it.</p>
  </div>
</body>
</html>

Um quase preto suave como #111827 ou #374151 sobre branco cansa menos a vista que o #000000 puro e ainda é lido como preto.

Cores de link

Os links são a exceção à herança: o navegador dá a eles um azul próprio (e roxo depois de visitados), então uma cor no pai não chega até eles. Defina a cor no link ou diga ao link para herdar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link color</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dark { color: #16a34a; }
    .brand a { color: #7c3aed; }
    .brand a:hover { color: #5b21b6; }
    .inherit a { color: inherit; }
  </style>
</head>
<body>
  <p class="dark">Green paragraph, but <a href="#x" id="l1">this link</a> keeps the browser color.</p>
  <p class="dark brand">Green paragraph, <a href="#x" id="l2">this link</a> is set to purple.</p>
  <p class="dark inherit">Green paragraph, <a href="#x" id="l3">this link</a> inherits green.</p>
</body>
</html>

:hover, :visited e :focus-visible permitem mudar a cor por estado; a página de hover trata deles. Quando um link tem a mesma cor do texto em volta, mantenha o sublinhado para que ele continue reconhecível como link.

Deixe o texto legível: contraste

A cor do texto é só metade do par; o fundo é a outra metade. A WCAG pede uma razão de contraste de pelo menos 4.5:1 para texto normal e 3:1 para texto grande (cerca de 24px, ou 19px em negrito).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contrast</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { padding: 8px 12px; margin: 6px 0; }
    .fail { color: #9ca3af; background: #ffffff; }
    .pass { color: #4b5563; background: #ffffff; border: 1px solid #e5e7eb; }
    .dark { color: #f9fafb; background: #1f2937; }
  </style>
</head>
<body>
  <p class="fail">#9ca3af on white: about 2.5:1, too light</p>
  <p class="pass">#4b5563 on white: about 7.6:1, passes</p>
  <p class="dark">#f9fafb on #1f2937: about 14:1, passes</p>
</body>
</html>

Texto cinza-claro com cara de placeholder é a falha mais comum. As ferramentas de desenvolvedor do Chrome e do Firefox mostram a razão de contraste quando você inspeciona uma cor de texto.

currentColor: reaproveitar a cor do texto

currentColor é uma palavra-chave igual ao color do elemento. Bordas, outlines e ícones SVG inline podem usá-la, então uma única mudança em color muda a cor do texto e da decoração juntos:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>currentColor</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tag {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border: 2px solid currentColor; border-radius: 999px;
    }
    .ok { color: #16a34a; }
    .warn { color: #d97706; }
  </style>
</head>
<body>
  <span class="tag ok">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Online
  </span>
  <span class="tag warn" id="warn">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Away
  </span>
</body>
</html>

Erros comuns

Escrever font-color ou text-color. A propriedade é color.
Usar a tag . Ela está obsoleta; use CSS.
Esperar que os links herdem a cor. Defina a { color: ... } ou color: inherit.
Cor como único sinal. "Os campos em vermelho são obrigatórios" falha para quem não distingue o vermelho. Acrescente texto ou um ícone.
Texto cinza com pouco contraste. Confira a razão: 4.5:1 ou mais para o texto do corpo.
Usar opacity para clarear o texto. Ela esmaece o elemento inteiro, incluindo fundo e filhos. Use uma cor mais clara ou uma cor com alfa.

Perguntas frequentes

Como mudar a cor da fonte no HTML?

Use a propriedade CSS color, em uma folha de estilo ou em um atributo style: Blue text. A antiga tag  está obsoleta.

A tag ainda é suportada?

Os navegadores ainda a desenham para que páginas muito antigas continuem funcionando, mas ela está obsoleta no HTML e os validadores a apontam como erro. Use o color do CSS.

Como mudar a cor de uma palavra só?

Envolva a palavra em um  e dê uma cor a ele: This is red. Use  ou  no lugar de  se a palavra também for importante ou enfatizada.

Por que meu link não muda de cor quando defino color no pai?

Os links têm a própria cor vinda da folha de estilo do navegador, então não herdam a do pai. Defina a cor no próprio link (a { color: #2563eb; }) ou use a { color: inherit; } para seguir o pai.

No CSS é font-color ou color?

É color. Não existe propriedade font-color nem text-color; o navegador as ignora.

Conceitos relacionados