Cores no CSS: Nomes, Hexadecimal, RGB e HSL

Descubra as diferentes formas de especificar cores no CSS e quando usar cada uma.

As cores são um dos elementos mais impactantes no design de uma página web. Elas podem evocar emoções, guiar o olhar do usuário e criar uma identidade visual forte. No CSS, existem várias maneiras de especificar uma cor, e cada uma tem suas vantagens.

Pense nas cores como temperos em uma receita: você pode usar o nome do tempero (sal), sua fórmula química (NaCl), ou descrever seus componentes (mistura de sódio e cloro). No CSS, é parecido!

Vamos explorar os formatos mais comuns:

1. Nomes de Cores (Keywords)

A forma mais simples de especificar uma cor é usando seu nome em inglês. O CSS suporta uma lista predefinida de nomes de cores.

  • Exemplos: red, blue, green, white, black, gray, orange, purple, gold, skyblue, lightgray, darkblue, etc.
  • Vantagens: Fácil de ler e escrever, ideal para prototipagem rápida ou cores básicas.
  • Desvantagens: Número limitado de cores, não permite muita precisão ou variação de tonalidade.

Exemplo:

h1 {
  color: blue;
}

body {
  background-color: lightgray;
}

2. Cores Hexadecimais (Hex)

Este é um dos formatos mais populares e amplamente utilizados. As cores hexadecimais são representadas por um símbolo de hash (#) seguido de seis caracteres (0-9 e A-F). Esses seis caracteres são divididos em três pares, onde cada par representa a intensidade de uma cor primária: Vermelho (Red), Verde (Green) e Azul (Blue).

  • Sintaxe: #RRGGBB
    • RR: Intensidade do vermelho (00 a FF)
    • GG: Intensidade do verde (00 a FF)
    • BB: Intensidade do azul (00 a FF)
  • 00 representa a menor intensidade (ausência da cor) e FF representa a maior intensidade (saturação total da cor).
  • Vantagens: Permite uma gama enorme de cores (mais de 16 milhões), é compacto e amplamente suportado.
  • Desvantagens: Pode ser um pouco difícil de ler e entender qual cor está sendo representada sem uma ferramenta ou conhecimento prévio.

Exemplos:

  • #FF0000 = Vermelho puro
  • #00FF00 = Verde puro
  • #0000FF = Azul puro
  • #FFFFFF = Branco (todas as cores no máximo)
  • #000000 = Preto (ausência de todas as cores)
  • #CCCCCC = Cinza claro

Formato Curto (Shorthand): Se cada par de caracteres for igual (ex: #RRGGBB onde RR=R, GG=G, BB=B), você pode usar a forma curta com três caracteres: #RGB.

  • #F00 é o mesmo que #FF0000 (Vermelho)
  • #CCC é o mesmo que #CCCCCC (Cinza claro)

Exemplo:

h2 {
  color: #336699; /* Um tom de azul acinzentado */
}

.destaque {
  background-color: #FFD700; /* Dourado */
}

3. Cores RGB (Red, Green, Blue)

O formato RGB especifica uma cor usando a intensidade de suas componentes Vermelho, Verde e Azul, mas em valores decimais (0-255) em vez de hexadecimais.

  • Sintaxe: rgb(red, green, blue)
    • red: Intensidade do vermelho (0 a 255)
    • green: Intensidade do verde (0 a 255)
    • blue: Intensidade do azul (0 a 255)
  • Vantagens: Mais fácil de entender a mistura das cores do que o hexadecimal, permite a mesma gama de cores.
  • Desvantagens: Um pouco mais verboso que o hexadecimal.

Exemplos:

  • rgb(255, 0, 0) = Vermelho puro
  • rgb(0, 255, 0) = Verde puro
  • rgb(0, 0, 255) = Azul puro
  • rgb(255, 255, 255) = Branco
  • rgb(0, 0, 0) = Preto

RGBA (Red, Green, Blue, Alpha)

O formato RGBA é uma extensão do RGB que adiciona um canal Alpha (transparência). O valor alpha varia de 0 (totalmente transparente) a 1 (totalmente opaco).

  • Sintaxe: rgba(red, green, blue, alpha)
    • alpha: Transparência (0.0 a 1.0)
  • Vantagens: Permite criar cores semitransparentes, ideal para sobreposições, sombras, etc.

Exemplo:

.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* Preto com 50% de transparência */
}

.texto-transparente {
  color: rgba(255, 0, 0, 0.7); /* Vermelho com 70% de opacidade */
}

4. Cores HSL (Hue, Saturation, Lightness)

O formato HSL é uma alternativa mais intuitiva para designers, pois se baseia em como os humanos percebem as cores.

  • Sintaxe: hsl(hue, saturation, lightness)
    • hue (Matiz): O grau da cor na roda de cores (0 a 360).
      • 0 (ou 360) = Vermelho
      • 120 = Verde
      • 240 = Azul
    • saturation (Saturação): A intensidade da cor (0% a 100%).
      • 0% = Cinza (sem cor)
      • 100% = Cor totalmente saturada
    • lightness (Luminosidade): O brilho da cor (0% a 100%).
      • 0% = Preto
      • 50% = Cor "pura" (nem muito escura, nem muito clara)
      • 100% = Branco
  • Vantagens: Mais fácil de ajustar variações de uma cor (ex: clarear ou escurecer uma cor mantendo o matiz), mais intuitivo para criar paletas de cores.
  • Desvantagens: Menos comum em códigos legados, mas está ganhando popularidade.

Exemplos:

  • hsl(0, 100%, 50%) = Vermelho puro
  • hsl(120, 100%, 50%) = Verde puro
  • hsl(240, 100%, 50%) = Azul puro
  • hsl(0, 0%, 0%) = Preto
  • hsl(0, 0%, 100%) = Branco
  • hsl(200, 50%, 70%) = Um tom de azul claro e suave

HSLA (Hue, Saturation, Lightness, Alpha)

Assim como RGBA, o HSLA adiciona um canal Alpha (transparência) ao formato HSL.

  • Sintaxe: hsla(hue, saturation, lightness, alpha)
    • alpha: Transparência (0.0 a 1.0)

Exemplo:

.card-sombra {
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2); /* Sombra preta com 20% de transparência */
}

Qual formato usar?

  • Nomes de Cores: Para cores básicas e legibilidade rápida.
  • Hexadecimal: Excelente para cores exatas e compactas, muito comum em paletas de design.
  • RGB/RGBA: Bom para cores exatas e quando você precisa de transparência. Mais fácil de manipular programaticamente (ex: em JavaScript).
  • HSL/HSLA: Ótimo para criar variações de cores (tons, saturação, brilho) e para quem pensa em cores de forma mais intuitiva.

A escolha do formato muitas vezes depende da preferência pessoal, da ferramenta de design que você está usando ou do contexto do projeto. O importante é saber que você tem várias opções para dar vida e cor às suas páginas!