Cor a fundo: hex, rgb e hsl

Várias formas de dizer a mesma cor

O CSS oferece vários modelos para expressar uma cor. Todos podem produzir exatamente o mesmo azul; o que muda é a comodidade conforme o que você está fazendo. É como dizer as horas: "três e quinze" ou "15:15" apontam para o mesmo momento, mas uma forma encaixa melhor em cada conversa.

Hexadecimal (#rrggbb)

O mais comum. Dois dígitos hex por canal: red (vermelho), green (verde) e blue (azul) (0–255).

.a { color: #ff0000; }   /* vermelho puro */
.b { color: #1f2937; }   /* cinza azulado escuro */
.c { color: #f00; }      /* atalho de 3 dígitos = #ff0000 */

rgb() e rgba()

Os mesmos canais, mas em decimal. rgba() adiciona um quarto valor: o alfa (opacidade), de 0 (transparente) a 1 (opaco).

.a { color: rgb(255, 0, 0); }
.b { background: rgba(0, 0, 0, 0.5); }  /* preto a 50% */

hsl() e hsla() — o mais intuitivo

HSL descreve a cor da forma como uma pessoa a pensa:

• H (hue, tom): graus na roda de cores, 0–360 (0 vermelho, 120 verde, 240 azul).
• S (saturation, saturação): 0% cinza, 100% vivo.
• L (lightness, luminosidade): 0% preto, 50% puro, 100% branco.

.a { color: hsl(0, 100%, 50%); }       /* vermelho */
.b { color: hsl(210, 80%, 55%); }      /* um azul agradável */
.c { background: hsla(210, 80%, 55%, 0.2); }

Quer uma variante mais clara da mesma cor? Aumente o L. Outro tom mantendo o "caráter"? Mude apenas o H. Por isso o HSL é ideal para construir paletas e temas: ajustar o tom é trivial.

opacity e currentColor

.fantasma {
  opacity: 0.4;          /* transparência de TODO o elemento (0–1) */
}
.icone {
  color: #2563eb;
  border: 2px solid currentColor;  /* reutiliza a cor do texto */
}

• opacity afeta o elemento inteiro (texto, fundo, filhos). rgba/hsla afetam apenas aquela cor específica.
• currentColor é uma palavra-chave mágica: vale o que valer color naquele elemento. Ótimo para que bordas ou ícones acompanhem o texto.

⚠️ Cilada clássica: texto cinza claro sobre fundo branco "porque fica elegante". Se o contraste é baixo, muita gente não consegue ler e você falha na acessibilidade. Antes de se apaixonar por uma cor, confira se ela se lê de verdade.

Exemplos

O mesmo azul em três modelos

.hex  { color: #3b82f6; }
.rgb  { color: rgb(59, 130, 246); }
.hsl  { color: hsl(217, 91%, 60%); }