Carregando...

Cores CSS

Você já sabe mirar elementos. Agora pinte. A primeira habilidade de cor é simples: defina a cor do texto com a propriedade color. Fundos, gradientes e a matemática completa da cor vêm depois — hoje, cor de primeiro plano legível e reutilizável.

O que faz color?

A propriedade color define a cor de primeiro plano — principalmente a das letras. O navegador também usa essa cor calculada no que segue currentColor (bordas, alguns SVG, decorações). Ela não preenche a caixa atrás do texto; isso é background-color (módulos seguintes).

Cores nomeadas em um olhar

O CSS traz muitas cores nomeadas — palavras-chave como teal e navy. Memorize primeiro um conjunto cotidiano pequeno. Hex exato e rgb() vêm na lição Valores de cor.

📊 Cores nomeadas do dia a dia

Nome Sensação Uso típico
black / white Contraste máximo Corpo do texto ou tela da página (com cuidado)
navy / teal Acentos de marca calmos Links, títulos, notas
maroon / crimson Aviso ou ênfase forte Erros, rótulos de promoção (com parcimônia)
gray / silver Texto secundário suave Legendas, rótulos suaves
transparent Totalmente transparente Esconder uma borda sem remover a propriedade

Cor do texto com um nome

Escreva uma declaração normal: propriedade color, valor uma cor nomeada. Comece pelo parágrafo para a página parecer intencional.

Cor nomeada no texto do parágrafo

css
CSS Code 
p {
color: teal;
}

Como ler o resultado

Cada <p> correspondente desenha as letras em teal. O nome da propriedade é sempre color — não text-color nem font-color.

Títulos podem diferir do corpo

Muitas vezes você quer um título mais escuro e um parágrafo mais calmo. Seletores separados, cores separadas.

Acento do título vs corpo

css
CSS Code 
h1 {
color: navy;
}

.lead {
color: gray;
}

Hábito de design

Títulos de alto contraste ajudam a escanear. Texto secundário suave evita que legendas gritem. Ainda assim, deixe contraste suficiente para ler.

A cor é herdada

Filhos pegam o color do pai a menos que definam o próprio. Por isso uma cor num contêiner pode tematizar um bloco inteiro de texto.

Cor herdada num bloco de nota

css
CSS Code 
.note {
color: maroon;
}

O que é herdado?

Dentro de <div class="note">…</div>, parágrafos e spans ficam maroon até uma regra mais forte mudar. Herança é recurso — não bug.

currentColor acompanha o texto

currentColor significa “use o color calculado do elemento”. Útil quando borda ou ícone deve ficar sincronizado com o texto.

Borda segue o texto via currentColor

css
CSS Code 
.badge {
color: teal;
border: 2px solid currentColor;
padding: 0.25rem 0.5rem;
}

Por que se dar ao trabalho?

Mude color uma vez — a borda segue. Sem um segundo teal fixo para sincronizar.

Cartão temático (tudo junto)

Combine cor do contêiner, override mais suave no filho e acento currentColor.

Tema de cartão com override + currentColor

css
CSS Code 
.card {
color: navy;
border: 1px solid currentColor;
padding: 1rem;
}

.card .muted {
color: gray;
}

color não é o fundo

Iniciantes costumam digitar color quando queriam o preenchimento atrás do texto. Separe desde o primeiro dia:

  • color → texto (primeiro plano)
  • background-color → a caixa pintada atrás do conteúdo (em breve)

Experimente você

  1. Página com título, <p class="lead"> e <div class="note"> com parágrafo curto.
  2. Defina h1 { color: navy; }, p { color: teal; } e .note { color: maroon; } — confira cada região.
  3. Adicione .badge { color: teal; border: 2px solid currentColor; } num span pequeno — a borda deve combinar com o texto.
  4. Dentro de .card, navy no cartão e color: gray em .muted — o override do filho vence nessa linha.
  5. Opcional: color: transparent num rótulo decorativo — o texto some e o espaço de layout permanece.

Erros comuns

  • Pintar o fundo da caixa com color — use background-color depois
  • Inventar nomes (lightishblue) — fique com palavras CSS reais ou espere hex/rgb
  • Esperar que toda propriedade herde como color — muitas não herdam
  • Pular direto para hex longos antes das cores nomeadas ficarem naturais
  • Ignorar contraste (cinza claro no branco) — bonito, mas ilegível

Resumo

  • color define a cor de texto em primeiro plano
  • Cores nomeadas (teal, navy, maroon, …) bastam no início
  • Filhos herdam color até sobrescreverem
  • currentColor reutiliza a cor de texto calculada para bordas e afins
  • Formatos profundos (hex, rgb, hsl) em Valores de cor; fundos em lições seguintes
  • Pratique com título / lead / note até a propriedade ficar automática

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial