Conversor de Hex para RGB

Bem-vindo ao Conversor de Hex para RGB, uma ferramenta abrangente de conversão de cores que transforma instantaneamente códigos de cores hexadecimais em valores RGB, RGBA, HSL, HSLA e CMYK. Seja você um web designer, desenvolvedor ou artista digital, esta ferramenta oferece visualização de cores em tempo real, funcionalidade de cópia com um clique, geração de cores complementares e verificação de contraste de acessibilidade WCAG.

O que é um Código de Cor Hex?

Um código de cor hex (cor hexadecimal) é um código de 6 dígitos usado para representar cores em web design, CSS e gráficos digitais. O código consiste em três pares de dígitos hexadecimais (0-9 e A-F) que representam a intensidade dos componentes vermelho, verde e azul. Cada par varia de 00 (mínimo, 0) a FF (máximo, 255).

Por exemplo, #FF5733 decompõe-se como:

• FF = 255 Vermelho (intensidade máxima de vermelho)
• 57 = 87 Verde (intensidade moderada de verde)
• 33 = 51 Azul (baixa intensidade de azul)

O resultado é uma cor coral-alaranjada vibrante. O símbolo # é opcional, mas comumente incluído para identificar o valor como um código de cor hex.

Abreviação de 3 Dígitos

Quando todos os três pares de cores usam dígitos repetidos, você pode usar a abreviação de 3 dígitos. Por exemplo, #FF5533 não pode ser encurtado, mas #FFAA00 pode ser escrito como #FA0. Cada dígito é automaticamente dobrado: F torna-se FF, A torna-se AA, 0 torna-se 00.

Como Converter Hex para RGB

A conversão de hex para RGB envolve a conversão de cada par de dígitos hexadecimais para seu equivalente decimal:

1. Remova o símbolo # se estiver presente
2. Divida em pares: Divida os 6 dígitos em 3 pares (RR, GG, BB)
3. Converta cada par: Converta da base 16 (hexadecimal) para a base 10 (decimal)

Conversão de Hex para Decimal

Cada posição de dígito hex tem um valor: o primeiro dígito é multiplicado por 16 e o segundo dígito é somado. Para o par hex "5A":

5 × 16 + 10 (A) = 80 + 10 = 90

Entendendo os Formatos de Cor

RGB e RGBA

O RGB (Vermelho, Verde, Azul) usa três valores de 0-255 para definir uma cor. O RGBA adiciona um canal Alfa (0 a 1) para transparência. RGB(255, 87, 51) é sólido, enquanto RGBA(255, 87, 51, 0.5) é 50% transparente.

HSL e HSLA

O HSL (Matiz, Saturação, Luminosidade) costuma ser mais intuitivo para os designers:

• Matiz: Posição na roda de cores (0-360 graus). 0=vermelho, 120=verde, 240=azul
• Saturação: Intensidade da cor (0-100%). 0% é cinza, 100% é vívido
• Luminosidade: Brilho (0-100%). 0% é preto, 100% é branco, 50% é a cor pura

CMYK

O CMYK (Ciano, Magenta, Amarelo, Key/Preto) é usado para produção impressa. Enquanto as telas usam a mistura de cores aditivas (RGB), as impressoras usam a mistura subtrativa (CMYK). As cores podem parecer diferentes quando impressas, por isso verificar os valores CMYK ajuda a garantir uma reprodução fiel na impressão.

Teoria das Cores: Cores Complementares e Triádicas

Cores Complementares

As cores complementares estão situadas opostas uma à outra na roda de cores, criando o máximo contraste. Para qualquer cor hex, o complemento é calculado subtraindo cada valor RGB de 255. Pares complementares são usados para:

• Botões de chamada para ação que se destacam
• Designs de logotipos com impacto visual
• Criar tensão visual e energia

Cores Triádicas

As cores triádicas são três cores igualmente espaçadas na roda de cores (120 graus de distância). Elas criam paletas vibrantes e equilibradas que mantêm a harmonia oferecendo variedade. Este esquema é popular em design gráfico e branding.

Acessibilidade WCAG e Contraste

As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem taxas de contraste para texto legível:

• Nível AAA (7:1): Excelente - padrão de acessibilidade mais alto
• Nível AA (4.5:1): Bom - mínimo para texto normal
• Nível AA Large (3:1): Aceitável para texto grande (18pt+ ou 14pt negrito)
• Falha (<3:1): Contraste insuficiente para acessibilidade

Nossa ferramenta calcula as taxas de contraste tanto em fundos brancos quanto pretos, ajudando você a escolher cores de texto acessíveis para seus designs.

Como Usar Este Conversor

1. Insira seu código hex: Digite ou cole uma cor hex (com ou sem #). Formatos de 6 e 3 dígitos funcionam.
2. Defina o alfa (opcional): Ajuste a transparência de 0 (invisível) a 1 (sólido) para saída RGBA/HSLA.
3. Clique em Converter: Veja instantaneamente os valores RGB, HSL, CMYK e a prévia da cor.
4. Copie qualquer formato: Clique no botão copiar para copiar os valores para sua área de transferência.
5. Explore paletas: Veja cores complementares, esquemas triádicos, sombras e matizes para inspiração de design.

Perguntas Frequentes

O que é um código de cor hex?

Um código de cor hex é uma representação hexadecimal de 6 dígitos (ou abreviação de 3 dígitos) de uma cor usada em web design e gráficos digitais. Começa com um símbolo # seguido por seis caracteres (0-9 e A-F) representando os componentes vermelho, verde e azul. Por exemplo, #FF5733 representa uma cor coral-alaranjada com Vermelho=255, Verde=87, Azul=51.

Como converto hex para RGB?

Para converter hex para RGB manualmente: 1) Remova o símbolo #, 2) Divida os 6 dígitos em 3 pares (RR, GG, BB), 3) Converta cada par de hexadecimal para decimal. Por exemplo, #FF5733: FF=255 (vermelho), 57=87 (verde), 33=51 (azul), resultando em RGB(255, 87, 51). Nosso conversor faz isso instantaneamente.

Qual é a diferença entre RGB e RGBA?

O RGB especifica a cor usando valores de Vermelho, Verde e Azul (0-255 cada). O RGBA adiciona um canal Alfa (0-1) para transparência. RGB(255, 87, 51) é uma cor sólida, enquanto RGBA(255, 87, 51, 0.5) é a mesma cor com 50% de opacidade. O RGBA é essencial para criar sobreposições e efeitos semitransparentes.

O que é o formato de cor HSL?

HSL significa Hue (Matiz), Saturation (Saturação) e Lightness (Luminosidade). Matiz é o ângulo da cor (0-360 graus), Saturação é a intensidade da cor (0-100%) e Luminosidade é o brilho (0-100%). O HSL costuma ser mais intuitivo para designers porque ajustar a luminosidade ou a saturação é simples e não afeta o matiz base.

O que é CMYK e quando devo usá-lo?

CMYK significa Ciano, Magenta, Amarelo (Yellow) e Key (Preto). É o modelo de cores usado na produção de impressos. Enquanto hex e RGB são para telas (cor aditiva), CMYK é para impressão (cor subtrativa). Se o seu design for impresso, você deve verificar os valores CMYK para garantir a precisão das cores.

O que é uma cor complementar?

Uma cor complementar é a cor diretamente oposta a outra na roda de cores, criando o máximo de contraste. Para qualquer cor, seu complemento é encontrado invertendo os valores RGB (255 menos cada canal). Cores complementares criam designs vibrantes e de alto contraste, sendo comumente usadas em logotipos e elementos de chamada para ação.

Recursos Relacionados

• Cores Web - Wikipédia
• Modelo de Cores RGB - Wikipédia
• Diretrizes de Contraste WCAG - W3C