Formatos de Cores Explicados

🎨 HEX

Exemplo: #3B82F6

Formato hexadecimal de 6 dígitos (RRGGBB). Cada par representa Red, Green e Blue em valores de 00 a FF.

🔢 RGB

Exemplo: rgb(59, 130, 246)

Valores de 0-255 para Red, Green e Blue. Formato mais intuitivo para programação.

🌈 HSL

Exemplo: hsl(217, 92%, 60%)

Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Mais intuitivo para ajustes de cor.

Quando Usar Cada Formato?

HEX (#RRGGBB)

✅ Melhor para: CSS, design, valores fixos de cor
✅ Vantagens: Compacto, amplamente suportado, fácil de copiar
❌ Desvantagens: Difícil de entender visualmente, sem suporte nativo a transparência (use 8 dígitos: #RRGGBBAA)

RGB / RGBA

✅ Melhor para: JavaScript, manipulação dinâmica de cores, transparência
✅ Vantagens: Fácil de manipular programaticamente, suporte a alpha
❌ Desvantagens: Menos compacto, valores não tão intuitivos

HSL / HSLA

✅ Melhor para: Criar variações de cor, temas, ajustes dinâmicos
✅ Vantagens: Muito intuitivo, fácil ajustar tom/saturação/brilho
❌ Desvantagens: Menos familiar para alguns desenvolvedores

Entendendo HSL

HSL é especialmente poderoso para criar variações de cores:

Hue (Matiz): A cor base (0-360°)
- 0° / 360° = Vermelho
- 120° = Verde
- 240° = Azul
Saturation (Saturação): Intensidade da cor (0-100%)
- 0% = Cinza
- 100% = Cor pura/vibrante
Lightness (Luminosidade): Claridade da cor (0-100%)
- 0% = Preto
- 50% = Cor normal
- 100% = Branco

Casos de Uso Práticos

🎨 Design Systems

Use HSL para gerar escalas de cores consistentes. Mantenha hue e saturation constantes, varie apenas lightness para criar cores primary-100, primary-200, etc.

🌙 Dark Mode

Converta suas cores para HSL e ajuste lightness automaticamente. Cores claras ficam escuras e vice-versa, mantendo a identidade da cor.

♿ Acessibilidade

Use RGB para calcular contraste de cores e garantir que texto seja legível sobre fundos. WCAG requer rácio mínimo de 4.5:1 para texto normal.

Exemplos de Código

CSS com Variáveis

:root {
  --primary-hue: 217;
  --primary-sat: 92%;
  
  --primary: hsl(var(--primary-hue), var(--primary-sat), 60%);
  --primary-light: hsl(var(--primary-hue), var(--primary-sat), 80%);
  --primary-dark: hsl(var(--primary-hue), var(--primary-sat), 40%);
}

JavaScript - Manipulação Dinâmica

// Escurecer uma cor RGB
function darkenColor(r, g, b, amount) {
  return `rgb(${Math.max(0, r - amount)}, ${Math.max(0, g - amount)}, ${Math.max(0, b - amount)})`;
}

// Ajustar transparência
const color = 'rgba(59, 130, 246, 0.5)'; // 50% transparente

Dicas Pro

Transparência: Use RGBA/HSLA quando precisar de transparência. Valores alpha vão de 0 (transparente) a 1 (opaco)
Nomes de Cores: CSS suporta 140+ nomes de cores (red, blue, etc.), mas use com moderação
Espaços de Cor Modernos: CSS agora suporta display-p3, oklch e outros para cores mais vibrantes
Ferramentas: Use DevTools do navegador para visualizar e ajustar cores em tempo real
Acessibilidade: Sempre teste contraste de cores com ferramentas como WebAIM Contrast Checker

Perguntas Frequentes

Qual formato é mais performático?

Não há diferença significativa de performance. Use o formato que fizer mais sentido para seu caso de uso. Navegadores convertem tudo internamente de qualquer forma.

Como converter cores no CSS?

CSS não converte automaticamente, mas você pode usar ferramentas como esta, pré-processadores (Sass/Less) com funções de conversão, ou CSS custom properties com calc().

O que é HEX de 8 dígitos?

#RRGGBBAA adiciona um canal alpha (transparência) ao final. Por exemplo, #3B82F680 é azul com 50% de transparência. Suportado em navegadores modernos e CSS.

Conversor de Cores Online - HEX, RGB, HSL

Conversor de Cores

#3b82f6

🎨 Sobre os Formatos de Cor