Conversão de cor Hex para RGB: o guia completo

O que é um código de cor hexadecimal?

Um código de cor hexadecimal é uma string de seis caracteres que representa uma cor em design web. Parece com isto: `#FF5733`. O `#` é um prefixo, e os seis caracteres são três pares de dígitos hexadecimais — um par para vermelho, verde e azul. Hex é abreviação de "hexadecimal", que é base 16, então cada par pode representar um valor de 00 a FF (0 a 255 em decimal).

Então `#FF5733` se decompõe em:

• `FF` = 255 vermelho
• `57` = 87 verde
• `33` = 51 azul

Misture essas três intensidades de luz e você obtém um laranja quente. Códigos hexadecimais são a forma mais comum de escrever cores em CSS, HTML e na maioria das ferramentas de design. São curtos, fazem a conversão de ida e volta de forma limpa com RGB, e são a língua franca da cor na web.

As outras notações de cor comuns que você vai encontrar são RGB (vermelho 0-255, verde 0-255, azul 0-255), HSL (matiz 0-360, saturação 0-100%, luminosidade 0-100%) e CMYK (ciano, magenta, amarelo, chave/preto em porcentagens, usado em impressão). Saber converter entre elas é uma tarefa diária para desenvolvedores web, designers e profissionais de marketing digital.

Método 1: Use o conversor de cor grátis do UtilBoxx (Recomendado)

A maneira mais rápida, segura e privada de converter códigos de cor é a ferramenta Hex para RGB do UtilBoxx. Ela roda inteiramente no seu navegador, então nenhum dado sai do seu dispositivo. Sem upload, sem cadastro e sem rastreamento.

Veja como usar:

1. Acesse utilboxx.com/pt/tools/color/hex-rgb
2. Digite ou cole seu código hex (com ou sem o `#` no início)
3. Veja a conversão ao vivo para RGB, HSL e CMYK de uma vez
4. Use o Conta-gotas para pegar uma cor de qualquer parte da tela
5. Clique em qualquer saída para copiá-la para a área de transferência

Por que recomendamos este método:

• 100% grátis, sem conta, sem cadastro, sem verificação de e-mail
• Privacidade em primeiro lugar: tudo é processado localmente no seu navegador. Nada é enviado.
• Tudo em um: HEX, RGB, HSL e CMYK em uma única tela
• Bidirecional: digite em qualquer formato, obtenha todos os outros
• Conta-gotas: pegue uma cor de qualquer pixel da tela
• Cópia com um clique: copie qualquer formato para a área de transferência
• Funciona em qualquer dispositivo: Windows, Mac, Linux, ChromeOS, iOS, Android

Se você só precisa converter cores de vez em quando, essa é a opção de menor atrito disparado.

Método 2: Seletor de cor do Photoshop (Pago)

Photoshop é o peso-pesado da edição de imagens, e seu Seletor de cor (ativado ao clicar no swatch de cor de primeiro plano/fundo na barra de ferramentas) é o padrão-ouro para seleção de cor. Mostra HEX, RGB, HSL, CMYK, Lab e outros espaços de cor lado a lado. Você pode digitar um código hex no campo `#`, deslizar os seletores H/S/B, clicar em qualquer lugar do campo de cor, ou amostrar uma cor de uma imagem aberta com o Conta-gotas.

O problema é o preço. Photoshop faz parte de uma assinatura Creative Cloud que custa cerca de $22,99 por mês (aproximadamente $240 por ano). Para uma conversão pontual é exagero. E requer instalação desktop, que pode ser pesada em máquinas antigas.

Photoshop vale a pena apenas se você já o usa para retoque, composição ou design. Se a conversão de cor é tudo o que você precisa, uma ferramenta baseada em navegador faz o trabalho sem a fatura.

Método 3: Converta com código (JavaScript ou Python)

Se você é desenvolvedor, pode converter cores com uma única linha na sua linguagem favorita. Aqui vão snippets confiáveis:

```bash # Em qualquer shell Unix com Python: python3 -c "import sys; h=sys.argv[1].lstrip('#'); print(tuple(int(h[i:i+2], 16) for i in (0,2,4)))" "#FF5733" # (255, 87, 51) ```

```javascript // JavaScript: parseInt em cada par hex const hex = "#FF5733"; const r = parseInt(hex.slice(1, 3), 16); // 255 const g = parseInt(hex.slice(3, 5), 16); // 87 const b = parseInt(hex.slice(5, 7), 16); // 51 console.log(`rgb(${r}, ${g}, ${b})`); // "rgb(255, 87, 51)"

// Reverso: RGB para HEX function rgbToHex(r, g, b) { return "#" + [r, g, b].map(x => x.toString(16).padStart(2, "0")).join("").toUpperCase(); } console.log(rgbToHex(255, 87, 51)); // "#FF5733" ```

```python # Python f-string com format spec hex = "FF5733" r, g, b = int(hex[0:2], 16), int(hex[2:4], 16), int(hex[4:6], 16) print(f"rgb({r}, {g}, {b})") # "rgb(255, 87, 51)"

# RGB para HEX def rgb_to_hex(r, g, b): return "#{:02X}{:02X}{:02X}".format(r, g, b) print(rgb_to_hex(255, 87, 51)) # "#FF5733" ```

```css / CSS moderno suporta color() e cores relativas / :root { --brand: #FF5733; --brand-rgb: 255, 87, 51; / coloque no rgba() / }

.button { background: rgb(var(--brand-rgb)); border: 1px solid rgba(var(--brand-rgb), 0.5); } ```

Para conversões pontuais, uma ferramenta de navegador é mais rápida. Para integrar em um pipeline de build ou sistema de design, o código é a resposta certa.

Perguntas frequentes

Qual a diferença entre HEX e RGB?

HEX é uma string hexadecimal de seis caracteres. RGB são três números decimais de 0-255. Representam exatamente a mesma cor; os formatos são intercambiáveis. `#FF5733` = `rgb(255, 87, 51)` = o mesmo tom de laranja quente.

Para que HSL é melhor?

HSL (Matiz, Saturação, Luminosidade) é uma forma muito mais intuitiva de raciocinar sobre cor que RGB. Para tornar uma cor "mais clara", você aumenta L. Para deixá-la "mais vívida", você aumenta S. Para deslocar pelo espectro, você gira H. É por isso que funções modernas de mistura de cores em CSS e muitas ferramentas de design preferem HSL.

Para que serve CMYK?

CMYK é o modelo de cor para impressão. RGB é o modelo de cor para telas. Eles se sobrepõem, mas não são idênticos: um azul RGB vívido pode ser impossível de imprimir em CMYK sem desviar para roxo. Converta para CMYK antes de enviar um arquivo para uma gráfica para pré-visualizar o que vai sair de fato.

Códigos hex são sensíveis a maiúsculas?

Não. `#FF5733` e `#ff5733` são a mesma cor. CSS os trata como idênticos. A convenção é usar maiúsculas por clareza (`#FFFFFF` é lido como "branco" mais rápido que `#ffffff`).

Como pego uma cor de uma página web?

Use o Conta-gotas nas DevTools do seu navegador. No Chrome, Firefox ou Edge, abra DevTools (F12 ou Cmd+Opt+I), clique na ferramenta "Inspecionar", depois clique no swatch de cor no painel de Estilos. Você pode copiar o valor hex, RGB ou HSL do popup. A ferramenta do UtilBoxx também tem um Conta-gotas de tela integrado.

É seguro usar um conversor de cor online?

Depende do serviço. UtilBoxx processa tudo no seu navegador — sem upload, sem processamento no servidor, sem registros. Com outras ferramentas, assuma que sua entrada está sendo registrada. Para códigos de cor pontuais não é grande coisa, mas para cores de marca proprietárias vale a pena usar uma ferramenta privada.

Conclusão

A conversão de cor é uma pequena tarefa que surge constantemente para qualquer um que trabalhe com design web, branding ou impressão, e não deveria exigir uma assinatura paga ou instalação de software. Para a maioria das pessoas, o Conversor de cor grátis do UtilBoxx é a escolha óbvia: é privado, rápido e grátis, sem cadastro.

Se você é designer e já vive no Photoshop, o Seletor de cor é um ótimo backup. Se você está programando, one-liners de JavaScript e Python são imbatíveis. Usuários de macOS também podem usar o Digital Color Meter integrado (em Aplicativos/Utilitários) para amostrar qualquer cor da tela e ler em RGB.

Para todo o resto, visite as ferramentas de cor do UtilBoxx e você encontrará um conjunto completo de ferramentas para trabalhar com cores, com privacidade como prioridade, tudo no seu navegador.