Conversor de Cores

Converta cores entre HEX, RGB e HSL. Visualize paletas complementares e análogas.

🎨 Selecione a Cor

📋 Formatos para Copiar

hex#0EA5E9
hexLower#0ea5e9
rgbrgb(14, 165, 233)
rgbargba(14, 165, 233, 1)
hslhsl(199, 89%, 48%)
hslahsla(199, 89%, 48%, 1)

🎭 Paleta de Cores

Atual

#0da2e7

Complementar

#e7520d

Análoga 1

#0d35e7

Análoga 2

#0de7bf

Triádica 1

#e70da2

Triádica 2

#a2e70d

📚 Modelos de Cor Explicados

HEX (Hexadecimal)

Formato mais usado em CSS e design. Representa RGB em base 16: #RRGGBB. Cada par de caracteres vai de 00 (0) a FF (255). Exemplo: #FF5733 = R:255, G:87, B:51.

RGB (Red, Green, Blue)

Modelo aditivo baseado em luz. Mistura vermelho, verde e azul de 0 a 255. rgb(255,0,0) = vermelho puro. rgb(255,255,255) = branco.

HSL (Hue, Saturation, Lightness)

Modelo mais intuitivo para humanos. H (0-360°) é a cor no círculo cromático, S (0-100%) é a intensidade, L (0-100%) é claro/escuro. Ideal para criar variações de uma cor.

🎨 Teoria das Cores

🔵 Cores Complementares

Cores opostas no círculo cromático (180° de diferença). Criam alto contraste e impacto visual. Use para botões de destaque ou elementos que precisam chamar atenção.

🟢 Cores Análogas

Cores vizinhas no círculo (±30°). Criam harmonia e são agradáveis aos olhos. Ideais para gradientes, fundos e designs que precisam de coesão visual.

🔺 Cores Triádicas

Três cores equidistantes no círculo (120° entre cada). Criam paletas vibrantes e equilibradas. Use uma como dominante e as outras duas como acentos.

💡 Dicas de Acessibilidade

  • Contraste mínimo 4.5:1: Para texto normal, exigido pela WCAG AA
  • Contraste 3:1: Suficiente para texto grande (24px+) ou ícones
  • Não dependa só de cor: Use ícones, texto ou padrões para comunicar informação
  • Teste com simuladores: Verifique como usuários daltônicos veem suas cores
  • Evite vermelho + verde: A combinação mais problemática para daltonismo

❓ Perguntas Frequentes

Quando usar HEX vs RGB vs HSL?

HEX: Padrão em CSS, mais compacto, fácil de copiar. RGB/RGBA: Quando precisa de transparência (alpha). HSL: Quando quer criar variações (clarear, escurecer, saturar).

O que é RGBA/HSLA?

O "A" é o canal Alpha (transparência), de 0 (invisível) a 1 (opaco). rgba(0, 0, 0, 0.5) = preto 50% transparente.

Por que a mesma cor parece diferente em telas diferentes?

Cada monitor tem calibração e perfil de cor diferente. Para precisão, designers profissionais usam monitores calibrados e perfis ICC. CSS moderno suporta espaços de cor como Display-P3.