Conversão de Cor RGB para Hex: Um Guia de Referência Completo

A conversão RGB para Hex é o processo de traduzir uma cor definida pelos seus componentes vermelho, verde e azul numa representação hexadecimal de seis dígitos usada extensivamente no desenvolvimento web. Compreender como estes formatos se relacionam ajuda a trabalhar mais eficazmente com CSS, ferramentas de design e manipulação de cores em código.

Modelos de Cor Explicados

RGB (Vermelho, Verde, Azul)

RGB é um modelo de cor aditivo onde cada componente de cor é um número inteiro de 0 a 255. A combinação de três valores produz mais de 16 milhões de cores possíveis.

rgb(255, 0, 0)    → vermelho puro
rgb(0, 255, 0)    → verde puro
rgb(0, 0, 255)    → azul puro
rgb(255, 255, 255) → branco
rgb(0, 0, 0)      → preto
rgb(128, 128, 128) → cinzento médio

Hexadecimal (Hex)

Os códigos de cor Hex usam seis dígitos hexadecimais agrupados como RRGGBB. Cada par representa a intensidade de vermelho, verde ou azul em notação base-16, onde 00 é o mínimo e FF é o máximo.

#FF0000 → vermelho
#00FF00 → verde
#0000FF → azul
#FFFFFF → branco
#000000 → preto
#808080 → cinzento

HSL (Matiz, Saturação, Luminosidade)

HSL representa cores como um ângulo numa roda de cores (0-360 graus), mais percentagens de saturação e luminosidade. É mais intuitivo para humanos porque pode ajustar a luminosidade ou saturação independentemente.

hsl(0, 100%, 50%)    → vermelho
hsl(120, 100%, 50%)  → verde
hsl(240, 100%, 50%)  → azul
hsl(0, 0%, 50%)      → cinzento médio

CMYK (Ciano, Magenta, Amarelo, Preto)

CMYK é um modelo de cor subtrativo usado para impressão. Os valores variam de 0% a 100% para cada componente. É o inverso do RGB — adicionar mais tinta reduz a luz refletida.

cmyk(0%, 100%, 100%, 0%)   → vermelho
cmyk(100%, 0%, 100%, 0%)   → verde
cmyk(0%, 0%, 0%, 100%)     → preto
cmyk(0%, 0%, 0%, 0%)       → branco

Fórmulas de Conversão

RGB para Hex

Converta cada componente RGB para um valor hexadecimal de dois dígitos e concatená-los:

R = 255 → FF
G = 128 → 80
B = 64  → 40
Resultado: #FF8040

function rgbToHex(r, g, b) {
  const toHex = (n) => {
    const hex = Math.max(0, Math.min(255, n)).toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  };
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
}

console.log(rgbToHex(255, 128, 64)); // #FF8040

function rgbToHex(int $r, int $g, int $b): string {
    $r = max(0, min(255, $r));
    $g = max(0, min(255, $g));
    $b = max(0, min(255, $b));
    return sprintf('#%02X%02X%02X', $r, $g, $b);
}

echo rgbToHex(255, 128, 64); // #FF8040

Hex para RGB

Analise a string hex de seis dígitos em três pares e converta cada um de base-16 para base-10:

function hexToRgb(hex) {
  const clean = hex.replace('#', '');
  const r = parseInt(clean.substring(0, 2), 16);
  const g = parseInt(clean.substring(2, 4), 16);
  const b = parseInt(clean.substring(4, 6), 16);
  return { r, g, b };
}

console.log(hexToRgb('#FF8040')); // { r: 255, g: 128, b: 64 }

def hex_to_rgb(hex_color: str) -> tuple:
    clean = hex_color.lstrip('#')
    return tuple(int(clean[i:i+2], 16) for i in (0, 2, 4))

print(hex_to_rgb('#FF8040'))  # (255, 128, 64)

RGB para HSL

A conversão HSL envolve encontrar os componentes de cor dominante e secundário para determinar o ângulo de matiz:

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const l = (max + min) / 2;

  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) };

  const d = max - min;
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  let h = 0;
  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
  else if (max === g) h = ((b - r) / d + 2) * 60;
  else h = ((r - g) / d + 4) * 60;

  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };
}

console.log(rgbToHsl(255, 128, 64)); // { h: 20, s: 100, l: 63 }

Tabela de Referência Rápida

Funções de Cor CSS

O CSS moderno suporta funções de cor que vão além dos códigos hex básicos:

/* Hex tradicional */
.element { color: #FF8040; }

/* RGB com alfa */
.element { color: rgba(255, 128, 64, 0.5); }

/* HSL com alfa */
.element { color: hsla(20, 100%, 63%, 0.5); }

/* Sintaxe de cor relativa moderna */
.element { color: hsl(from #FF8040 h s calc(l + 10%)); }

/* OKLCH — espaço de cor perceptual uniforme */
.element { color: oklch(0.7 0.15 45); }

Casos de Uso Comuns

• Desenvolvimento web — Traduzir mockups de design (RGB/HSL) para CSS (Hex)
• Visualização de dados — Gerar escalas de cor programaticamente
• Processamento de imagem — Ler dados de pixel em RGB e armazenar como hex
• Diretrizes de marca — Manter cor consistente entre formatos
• Acessibilidade de cor — Calcular rácios de contraste entre cores

Ferramenta Online

A ferramenta RGB to HEX Converter no Help2Code converte cores entre RGB, HEX, RGBA, HSL e CMYK com pré-visualização ao vivo. Escolha uma cor, cole um código hex ou gere uma cor aleatória para ver todos os quatro formatos instantaneamente. A pré-visualização da cor atualiza em tempo real, e pode copiar qualquer formato com um clique. A ferramenta Color Palette Extractor também é útil para extrair esquemas de cor de imagens.

Conclusão

Compreender a conversão RGB para Hex — e a relação entre modelos de cor — é essencial para desenvolvedores web e designers. A conversão é direta: cada canal RGB converte-se para um par hex de dois dígitos. Uma vez que conhece o padrão, alternar entre RGB, Hex, HSL e CMYK torna-se natural. Use a ferramenta RGB to HEX Converter para conversões instantâneas e os exemplos de código acima para integrar lógica de cor nos seus projetos.