HTML: Cores HTML

Cores em HTML podem ser representadas de várias formas. Dominar diferentes métodos de representação de cores dá a você controle flexível e preciso sobre cada pixel do seu design web.

1. Visão Geral da Representação de Cores

Existem três métodos principais de representação de cores em HTML e CSS: nomes de cores, hexadecimal e RGB. Todos podem definir cores, mas cada um tem seus próprios casos de uso:

▶ Exemplo

<!-- Os três representam um fundo vermelho -->
<div style="background-color: red;">Nome da cor: red</div>
<div style="background-color: #FF0000;">Hex: #FF0000</div>
<div style="background-color: rgb(255,0,0);">RGB: rgb(255,0,0)</div>

2. Nomes de Cores

O HTML suporta mais de 140 nomes de cores padrão. Os mais usados incluem: red, blue, green, black, white, gray, orange, purple, yellow e muitos outros. Usar nomes de cores é a abordagem mais intuitiva — sem necessidade de memorizar regras de codificação.

(1) Nomes de Cores Comuns

3. Hexadecimal (Hex)

Cores hexadecimais começam com # no formato #RRGGBB, onde RR representa o valor de vermelho, GG o valor de verde e BB o valor de azul, com faixa de 00 a FF (hexadecimal). Se cada par tiver dígitos idênticos, você pode abreviar para três caracteres #RGB.

(1) Cores Hexadecimais Comuns

▶ Exemplo

<!-- Hex de seis dígitos -->
<div style="background-color: #FF5733;">#FF5733 (laranja)</div>
<div style="background-color: #33A1FF;">#33A1FF (azul)</div>
<div style="background-color: #2ECC71;">#2ECC71 (verde)</div>

<!-- Abreviação de três caracteres (quando cada par é igual) -->
<div style="background-color: #F00;">#F00 equivale a #FF0000 (vermelho)</div>
<div style="background-color: #0F0;">#0F0 equivale a #00FF00 (verde)</div>
<div style="background-color: #00F;">#00F equivale a #0000FF (azul)</div>

4. RGB e RGBA

A função rgb(vermelho, verde, azul) usa valores decimais de 0 a 255 para representar os canais vermelho, verde e azul. Comparado ao hexadecimal, o RGB é mais próximo da compreensão intuitiva humana dos números. rgba() adiciona um canal Alpha de transparência sobre o RGB.

(1) Valores RGB e Mapeamento de Cores

▶ Exemplo

<div style="background-color: rgb(255, 99, 71);">
rgb(255, 99, 71) — Tomate
</div>
<div style="background-color: rgb(60, 179, 113);">
rgb(60, 179, 113) — Verde Mar Médio
</div>

<!-- rgba adiciona transparência, último parâmetro de 0 a 1 -->
<div style="background-color: rgba(255, 0, 0, 0.3);">
Vermelho semitransparente (30% de opacidade)
</div>
<div style="background-color: rgba(0, 0, 255, 0.6);">
Azul semitransparente (60% de opacidade)
</div>

5. HSL

hsl(matiz, saturação, luminosidade) é um modelo de cor mais alinhado com a intuição humana. A matiz é o ângulo da cor (0—360 graus), a saturação é a intensidade (porcentagem) e a luminosidade é o brilho (porcentagem). Da mesma forma, hsla() suporta transparência.

(1) Roda de Cores HSL

(2) Ajustes de Saturação e Luminosidade

▶ Exemplo

<!-- Exemplos de mistura de cores HSL -->
<div style="background-color: hsl(0, 100%, 50%);">
hsl(0, 100%, 50%) — Vermelho puro
</div>
<div style="background-color: hsl(120, 100%, 50%);">
hsl(120, 100%, 50%) — Verde puro
</div>
<div style="background-color: hsl(240, 100%, 50%);">
hsl(240, 100%, 50%) — Azul puro
</div>
<div style="background-color: hsl(200, 80%, 60%);">
hsl(200, 80%, 60%) — Azul suave
</div>

<!-- hsla adiciona transparência -->
<div style="background-color: hsla(0, 100%, 50%, 0.4);">
hsla(0, 100%, 50%, 0.4) — Vermelho semitransparente
</div>

❓ Perguntas Frequentes

📖 Resumo

• Nomes de cores (ex.: red, blue): Simples e intuitivos, mas limitados em precisão
• Hexadecimal (ex.: #FF5733): A notação precisa mais comum no desenvolvimento web
• RGB / RGBA: rgb() usa 0—255 para três canais, rgba() adiciona transparência
• HSL / HSLA: hsl() usa matiz/saturação/luminosidade para misturar cores, hsla() adiciona transparência
• O canal Alpha (RGBA/HSLA) permite semitransparência, com valores de 0 (transparente) a 1 (opaco)

📝 Exercícios

1. Paleta de Cores: Crie três blocos de cores usando três representações de cores diferentes (nome de cor, hex, RGB). Cada bloco deve ter 100x100px, exibidos lado a lado.
2. Gradiente de Transparência: Use rgba() para criar um efeito de gradiente horizontal onde o fundo transiciona de totalmente opaco para totalmente transparente (dica: use background: linear-gradient()).

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós