Conversor RGB para Hex

O Conversor RGB para Hex converte instantaneamente valores de cores RGB (Red, Green, Blue) em códigos de cores hexadecimais usados em web design, CSS e aplicativos gráficos. Ele fornece saída em múltiplos formatos, incluindo HSL, HSV e CMYK, junto com snippets de código CSS, paletas de harmonia de cores, verificação de contraste de acessibilidade WCAG e correspondência de cores nomeadas mais próximas.

Como Funciona a Conversão de RGB para Hex

RGB (Red, Green, Blue) e Hex são duas notações diferentes para o mesmo modelo de cores aditivas usado por telas eletrônicas. Cada canal de cor varia de 0 a 255 em decimal. Para converter para Hex, cada valor decimal de canal é expresso como um número hexadecimal de dois dígitos (base 16), e os três pares são combinados com um prefixo #.

A Fórmula de Conversão

Para cada valor de canal V (0–255):

1. Divida V por 16. O quociente é o primeiro dígito hex, o resto é o segundo.
2. Mapeie os dígitos 10–15 para as letras A–F.
3. Combine: #RRGGBB

Exemplo: RGB(255, 165, 0) → 255 = FF, 165 = A5, 0 = 00 → #FFA500 (Laranja)

Formatos de Cores Explicados

HEX (Hexadecimal)

A notação de cor mais comum no desenvolvimento web. Um # seguido por 6 dígitos hex que representam RR, GG, BB. A forma abreviada (#RGB) está disponível quando cada par tem dígitos idênticos, ex: #FF0000 → #F00.

HSL (Hue, Saturation, Lightness - Matiz, Saturação, Luminosidade)

Um modelo mais intuitivo para designers. Matiz (Hue) é um ângulo na roda de cores (0°–360°), Saturação é a vivacidade (0–100%) e Luminosidade (Lightness) varia do preto (0%) passando pela cor pura (50%) até o branco (100%). O HSL facilita a criação de variações de cores ajustando um único parâmetro.

HSV / HSB (Hue, Saturation, Value / Brightness - Matiz, Saturação, Valor / Brilho)

Semelhante ao HSL, mas define o brilho de forma diferente. O valor de 100% significa que a cor está em seu estado mais brilhante possível para aquela matiz e saturação. Este modelo é usado em muitos aplicativos de design gráfico como Photoshop e Figma.

CMYK (Cyan, Magenta, Yellow, Key/Black - Ciano, Magenta, Amarelo, Preto)

Um modelo de cor subtrativo usado na impressão. Enquanto as telas adicionam luz (RGB), as impressoras misturam tintas que absorvem a luz (CMYK). Converter para CMYK é essencial ao preparar designs digitais para impressão física para garantir a precisão das cores.

Tipos de Harmonia de Cores

Harmonias de cores são combinações de cores baseadas em suas posições no círculo cromático. Esta ferramenta gera quatro tipos:

• Complementar: A cor diretamente oposta no círculo (180° de distância). Cria máximo contraste e impacto visual.
• Análoga: Cores adjacentes no círculo (±30°). Cria designs harmoniosos e confortáveis, comumente encontrados na natureza.
• Triádica: Três cores uniformemente espaçadas (120° de distância). Oferece um contraste vibrante mantendo o equilíbrio.
• Complementar Dividida: As duas cores adjacentes à complementar (150° e 210°). Uma alternativa mais suave à complementar com mais variedade.

Acessibilidade de Contraste WCAG

As Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) definem taxas de contraste para garantir a legibilidade:

Conversões Comuns de RGB para Hex

Perguntas Frequentes

Como converter RGB para Hex?

Para converter RGB para Hex, pegue o valor de cada canal de cor (0-255), divida por 16 para obter o quociente e o resto, então mapeie cada um para dígitos hexadecimais (0-9, A-F). Combine os três valores hexadecimais de 2 dígitos com um prefixo #. Por exemplo, RGB(255, 165, 0) torna-se #FFA500: 255→FF, 165→A5, 0→00.

Qual é a diferença entre códigos de cores RGB e Hex?

RGB e Hex representam as mesmas cores usando notações diferentes. O RGB usa três números decimais (0-255) para os canais Vermelho, Verde e Azul, como rgb(255, 0, 0). O Hex usa um # seguido por seis dígitos hexadecimais, como #FF0000. Ambos codificam informações de cores idênticas — Hex é simplesmente uma representação de base 16 mais compacta dos mesmos valores RGB.

Qual modelo de cor o Hex utiliza?

Os códigos de cores Hex usam o modelo de cores aditivas RGB (Red, Green, Blue), o mesmo modelo usado por monitores de computador. Os seis dígitos hexadecimais representam três pares: os dois primeiros para o vermelho, os dois do meio para o verde e os dois últimos para o azul. Cada par varia de 00 (intensidade 0) a FF (intensidade máxima 255).

O que é a taxa de contraste WCAG?

A taxa de contraste WCAG mede a diferença de luminância entre duas cores, usada para garantir a legibilidade do texto para pessoas com deficiências visuais. A proporção varia de 1:1 (sem contraste) a 21:1 (máximo). O WCAG 2.0 exige pelo menos 4,5:1 para texto normal (nível AA), 3:1 para texto grande (AA Large) e 7:1 para contraste aprimorado (nível AAA).

Como converter RGB para HSL?

Para converter RGB para HSL: normalize R, G, B para 0-1, encontre o máximo e o mínimo, calcule a Luminosidade como (max+min)/2, a Saturação depende da luminosidade e a Matiz é calculada com base em qual canal é dominante (0° para vermelho, 120° para verde, 240° para azul) ajustada pela diferença entre os canais.

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

CMYK significa Ciano, Magenta, Amarelo e Key (Preto). É um modelo de cor subtrativo usado na impressão. Enquanto RGB/Hex são usados para telas (mistura de luz aditiva), o CMYK é essencial para o design impresso porque as impressoras misturam tinta em vez de luz. Converter RGB para CMYK ajuda a garantir que suas cores digitais sejam traduzidas corretamente para materiais impressos.

Recursos Adicionais

• Diretrizes de Contraste WCAG 2.1