EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Cores CSS

✅ Recomenda HSL: HSL é muito amigável para designers — ao ajustar cores, você só precisa mudar o valor da matiz (H) enquanto mantém saturação e luminosidade constantes para obter diferentes tons da mesma família de cores. O seletor de cores do W3Schools usa HSL.

📌 Caso de uso: O canal A (Alpha) do RGBA permite controlar a transparência, perfeito para máscaras de sobreposição e fundos semi-transparentes. Por exemplo, rgba(0, 0, 0, 0.5) é uma sobreposição preta 50% transparente.

💡 Dica: #FF0000 pode ser abreviado como #F00 — quando cada par nos seis dígitos é o mesmo, pode ser comprimido para três dígitos. Similarmente #aabbcc se torna #abc. Vale memorizar valores hexadecimais para cores comuns: #fff (branco), #000 (preto), #f00 (vermelho).

Cores são um dos elementos visuais mais fundamentais no design web. O CSS fornece múltiplas maneiras de representar cores, desde nomes de cores simples até HSL flexível, cada um com seus casos de uso apropriados.

Referência Rápida de Valores de Cor

Formato Exemplo Descrição
Nome da cor red, blue, tomato, skyblue Intuitivo mas limitado (~140 cores)
HEX #ff0000, #333, #e3f2fd Formato mais comum, 6 ou 3 dígitos abreviados
RGB rgb(255, 0, 0), rgb(51, 51, 51) Valores Vermelho, Verde, Azul 0-255
RGBA rgba(255, 0, 0, 0.5) RGB + transparência (alpha: 0-1)
HSL hsl(0, 100%, 50%) Matiz(0-360) + Saturação(0-100%) + Luminosidade(0-100%)
HSLA hsla(0, 100%, 50%, 0.5) HSL + transparência
opacity 0.5, 1, 0.25 Transparência geral (afeta todo o conteúdo incluindo filhos)

1. Nomes de Cores

O CSS suporta mais de 140 nomes de cores predefinidos, os mais intuitivos de usar.

Exemplo

HTML 
<style>
p {
  color: red;
}
h1 {
  color: blue;
}
h2 {
  color: green;
}
</style>
<p>Este é um exemplo de parágrafo.</p>
<h1>Título de Primeiro Nível</h1>
<h2>Título de Segundo Nível</h2>
▶ Experimente

Nomes de cores comuns incluem: red, blue, green, black, white, gray, orange, purple, yellow, pink, gold, navy, teal, coral, tomato, skyblue, violet, brown, cyan, magenta, lime, olive, silver.

📌 Dica: Nomes de cores são simples e intuitivos, ótimos para prototipagem rápida. Porém, em ambientes de produção, nomes de cores têm seleção limitada e falta de precisão — notação hexadecimal ou RGB é recomendada.

2. Hexadecimal (HEX)

Cores hexadecimais começam com #, formato é #RRGGBB, onde RR é vermelho, GG é verde, BB é azul, intervalo 00 a FF (hexadecimal).

Exemplo

HTML 
<style>
.hex-demo {
  color: #ff0000;      /* Vermelho */
  background: #333;    /* Cinza escuro (abreviação 3 dígitos) */
  border: 1px solid #e3f2fd;  /* Azul claro */
}
</style>
<div class="hex-demo">Exemplo de cor hexadecimal</div>
▶ Experimente

Regras de abreviação:

3. RGB e RGBA

RGB usa valores decimais 0-255 para canais vermelho, verde, azul. RGBA adiciona transparência Alpha (0-1).

Exemplo

HTML 
<style>
.rgb-demo {
  color: rgb(255, 0, 0);        /* Vermelho */
  background: rgba(0, 0, 0, 0.5);  /* Preto 50% transparente */
}
</style>
<div class="rgb-demo">Exemplo de cor RGB/RGBA</div>
▶ Experimente

4. HSL e HSLA

HSL usa Matiz (0-360), Saturação (0-100%), Luminosidade (0-100%). HSLA adiciona transparência Alpha.

Exemplo

HTML 
<style>
.hsl-demo {
  color: hsl(0, 100%, 50%);        /* Vermelho */
  background: hsla(120, 100%, 50%, 0.3);  /* Verde 30% transparente */
}
</style>
<div class="hsl-demo">Exemplo de cor HSL</div>
▶ Experimente

5. Propriedade opacity

A propriedade opacity controla a transparência geral do elemento (0-1), afetando todo o conteúdo incluindo filhos.

Exemplo

HTML 
<style>
.opacity-demo {
  opacity: 0.5;
  background: blue;
  color: white;
  padding: 20px;
}
</style>
<div class="opacity-demo">Elemento 50% transparente (todo o conteúdo afetado)</div>
▶ Experimente

❓ Perguntas Frequentes

Q Qual é a diferença entre cores HEX e RGB?
R Ambas representam a mesma cor, apenas em formatos diferentes. HEX usa 6 dígitos hexadecimais (0-9, A-F), RGB usa três números decimais (0-255). HEX é mais conciso (ex: `#ff0000`), RGB é mais intuitivo para entender valores (ex: `rgb(255, 0, 0)`). Na prática, HEX é mais comumente usado.
Q Quando devo usar RGBA vs opacity?
R RGBA controla transparência de uma propriedade específica (como fundo), enquanto opacity controla transparência de todo o elemento incluindo todos os filhos. Se você quer apenas transparência do fundo sem afetar texto, use RGBA. Se você quer todo o elemento semi-transparente, use opacity.
Q Qual é a vantagem do HSL sobre RGB?
R HSL é mais intuitivo para designers. Você pode facilmente criar variações de cor ajustando apenas a matiz enquanto mantém saturação e luminosidade constantes. RGB requer ajustar três valores simultaneamente. HSL também torna mais fácil criar esquemas de cores harmônicos e entender relações de cores.

📖 Resumo

📝 Exercícios

  1. Crie uma paleta de cores usando pelo menos 5 métodos diferentes de representação de cores.
  2. Crie um efeito de sobreposição semi-transparente usando RGBA.
  3. Crie um esquema de cores usando HSL variando apenas o valor da matiz.
  4. Compare a diferença entre opacity: 0.5 e background: rgba(0,0,0,0.5).
100%