Conversor de RGB para Hex

O que é um Conversor de RGB para Hex?

// Serialize {r, g, b, alpha} → canonical hex string
// Emits 6-digit #RRGGBB when alpha === 1, 8-digit #RRGGBBAA otherwise.
function formatHex({ r, g, b, alpha = 1 }) {
  const pair = (v) => Math.round(v).toString(16).padStart(2, '0').toUpperCase();
  const rgb = pair(r) + pair(g) + pair(b);
  if (alpha >= 1) return `#${rgb}`;
  const a = pair(alpha * 255);
  return `#${rgb}${a}`;
}

console.log(formatHex({ r: 255, g: 87, b: 51 }));              // '#FF5733'
console.log(formatHex({ r: 59, g: 130, b: 246 }));             // '#3B82F6'
console.log(formatHex({ r: 255, g: 87, b: 51, alpha: 0.5 })); // '#FF573380'
console.log(formatHex({ r: 5, g: 0, b: 0 }));                  // '#050000' — padStart matters

Principais Recursos

Alternativas ao Conversor de RGB para Hex

Exemplos de RGB para Hex

rgb(255 87 51)

rgb(59 130 246)

rgb(255 87 51 / 0.5)

rgb(100% 50% 0%)

Conversões Comuns de RGB → Hex

Tabela de referência das 10 tuplas RGB mais convertidas e seus equivalentes hex — primárias puras, secundárias puras e duas cores de marca do mundo real da paleta Tailwind.

Como Usar o Conversor de RGB para Hex

1. 1

   Digite ou cole uma tupla RGB no campo RGB

   Jogue qualquer valor `rgb()` na entrada RGB — moderno separado por espaços `rgb(255 87 51)`, legado com vírgulas `rgb(255, 87, 51)`, com alfa via barra `rgb(255 87 51 / 0.5)` ou via a forma `rgba(255, 87, 51, 0.5)`, ou canais em porcentagem `rgb(100% 34% 20%)`. A ferramenta normaliza todas as formas de entrada para a mesma tupla RGB interna antes de calcular o hex. Caracteres inválidos, inteiros fora da faixa ou sintaxe malformada produzem um erro discreto inline; RGB válido atualiza todo outro campo de formato em tempo real.

2. 2

   Leia o código hex do campo HEX

   O campo HEX acima do campo RGB mostra o valor hex correspondente: `#FF5733` para uma cor opaca, `#FF573380` para uma com alfa (forma de 8 dígitos). A saída usa dígitos hex em maiúscula por padrão para consistência com a maioria dos guias de marca; minúscula (`#ff5733`) está a um replace mecânico de distância e é igualmente CSS válido. A conversão é bit-exata — um round-trip RGB → HEX → RGB recupera a tupla original verbatim sem deriva de float.

3. 3

   Clique em Copiar para pegar a string hex

   Cada card de formato tem um botão Copiar à direita. Um clique e o valor cai na sua área de transferência — o rótulo do botão brevemente pisca "Copiado!" para você saber. A string copiada inclui o `#` na frente, então cola direto em uma regra CSS, um campo de cor do Figma, uma extensão hex do SwiftUI ou um `colors.xml` do Android. Para sintaxe específica de plataforma (SwiftUI `Color(red:green:blue:)`, Compose `Color(0xFF...)`, tokens `@theme` do Tailwind v4), use a seção Copiar como código abaixo do seletor.

4. 4

   Também visíveis: HSL, OKLCH, OKLAB, CMYK, cor nomeada

   O mesmo RGB que você cola também acende os outros campos de formato — HSL para CSS legado, OKLCH e OKLAB para design systems perceptualmente uniformes, HSV e HWB para fluxos de seletor de cor de designer, CMYK para estimativas de impressão e a cor nomeada CSS mais próxima para documentação e prosa. Você nunca fica trancado em RGB → hex apenas; se também precisar da tripla OKLCH para um bloco `@theme` do Tailwind v4, ela está bem ali no campo OKLCH com seu próprio botão Copiar.

5. 5

   Use o seletor para ajustes visuais

   Abaixo da grade de formatos há um quadrado SL + controle deslizante de matiz + controle deslizante de alfa para exploração visual. Arraste qualquer controle e cada campo de texto atualiza em tempo real, incluindo o RGB e HEX com que você começou. Em navegadores baseados em Chromium (Chrome, Edge, Brave) o botão EyeDropper ativa a API nativa `EyeDropper` para amostrar qualquer pixel na tela, incluindo fora da janela do navegador — útil quando você quer capturar uma tupla RGB da UI de outro app sem precisar tirar um screenshot antes, depois ler imediatamente o hex.

Erros Comuns de RGB / Hex

Skip padStart:
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
Produces invalid 5-character hex.

Use padStart(2, '0'):
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
Valid 6-character hex; works correctly for all channel values 0-255.

Skip rounding:
(0.5 * 255).toString(16) → '7f.8'
Produces invalid hex with a decimal point.

Round to integer first:
Math.round(0.5 * 255).toString(16).padStart(2, '0') → '80'
Valid 2-digit hex pair; matches CSS Color 4 normalization.

Emit Android leading-alpha hex into CSS:
rgb(255 87 51 / 0.5) → #80FF5733 (Android format)
CSS parses as alpha=128, R=255, G=87, B=51 — wrong color entirely.

Use the target platform's documented format:
for CSS: #FF573380 (alpha as last byte)
for Android Compose: Color(0x80FF5733) (alpha as first byte)
Don't cross-paste between the two without re-ordering.

Average gamma-encoded RGB directly:
(rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0)
Looks like dark olive, not bright yellow.

Average in linear-RGB:
decode → linear-RGB → average → re-encode → rgb(188, 188, 0)
Visibly bright yellow, matching what physical light mixing produces.

Quem Usa RGB para Hex

Devs Front-end Convertendo RGB de Canvas para Hex CSS

Funções de desenho da Canvas API reportam e aceitam cores como tuplas RGB (`ctx.fillStyle = 'rgb(255 87 51)'`), mas a folha de estilo CSS ao redor quer variáveis hex (`--color-fill: #FF5733`). Colar o RGB uma vez produz o hex correspondente, pronto para jogar em uma propriedade customizada CSS. Útil ao extrair cores de marca de um gráfico ou visualização de dados renderizado em canvas para reuso em UI estática.

Designers Convertendo RGB do Photoshop para Hex do Figma

O Color Picker da Adobe (no Photoshop, Illustrator e InDesign) reporta RGB como três inteiros 0-255 em três caixas de canal. O Figma, em contraste, exibe valores de cor como hex por padrão em seus painéis de design. Cole os três inteiros do Photoshop como `rgb(...)` aqui, copie a saída hex, jogue no campo de cor do Figma. Acerta a cor original do Photoshop exatamente sem um desvio por screenshot e conta-gotas.

Devs de Hardware Convertendo RGB de Sensor LED para Hex Web

Tiras de LED endereçáveis, sensores de cor e câmeras RGB de hardware todos reportam valores de canal como inteiros 0-255. Quando as leituras precisam alimentar um dashboard web ("a lâmpada está brilhando nessa cor agora"), o código hex correspondente é o que o atributo CSS `style="background: ..."` espera. Cole o triplo RGB do sensor, copie o hex, plug na marcação do dashboard.

Devs de Jogos Exportando Cor do Unity para Mockup Web

Os construtores `Color` do Unity e `FLinearColor` do Unreal recebem floats normalizados 0-1; multiplicar cada um por 255 dá os inteiros RGB correspondentes. Cole o `rgb(...)` resultante aqui, copie o hex, jogue no mockup web ou site de marketing que precisa bater exatamente com a cor de destaque do jogo. A visão simultânea OKLCH também expõe a luminosidade perceptual para que a paleta do mockup possa ser ajustada à mão para bater com os níveis de brilho do jogo.

Engenheiros de Acessibilidade Auditando Cores de Marca do Photoshop

Quando o guia de estilo de marca reporta cores como triplos inteiros RGB ("o laranja da marca é RGB 255 / 87 / 51") mas a ferramenta de auditoria WCAG quer códigos hex, este conversor é a ponte. Cole o triplo RGB, copie o hex, rode pela auditoria. Os selos de contraste WCAG e APCA nesta ferramenta também expõem o veredito em um passo, então você não precisa pular entre três ferramentas separadas.

Devs de E-mail Migrando rgba() para Hex de 8 Dígitos

HTML moderno de cliente de e-mail suporta hex de 8 dígitos (`#FF573380`) para cores com alfa, mas templates legados frequentemente armazenam o mesmo valor como `rgba(255, 87, 51, 0.5)`. Colar o rgba() aqui e ler a saída hex de 8 dígitos torna a migração mecânica. O campo HEX mostra `#FF573380` para o caso de 50% de alfa; a forma legada `rgba()` permanece no campo RGB para contextos de fallback que ainda precisam dela.

Devs Documentando Tokens de Marca com Ambos os Formatos

Documentação de design tokens frequentemente mostra a mesma cor em ambas as formas RGB e hex: hex para o bloco de código CSS, RGB para a anotação em prosa ("o laranja da marca é `#FF5733`, equivalente a RGB 255 / 87 / 51"). Ter os dois visíveis lado a lado deixa um redator de docs copiar cada um em uma passagem em vez de rodar duas ferramentas separadas. O hash de URL compartilhável também deixa leitores clicar direto na cor exata em discussão.

Engenheiros de QA Afirmando Cores de Pixel Contra Specs Hex

Testes de regressão visual às vezes capturam cores de pixel como inteiros RGB (`expect(pixel).toMatchRgb([255, 87, 51])`), enquanto a spec subjacente é dada em hex ("botões devem renderizar como `#FF5733`"). Colar o RGB capturado aqui produz o hex correspondente, que o engenheiro de QA pode comparar diretamente com a spec. A exatidão de bit da conversão significa que a comparação não vai flicar por diferenças de deriva de float.

Matemática e Serialização de RGB para Hex

toString(16).padStart(2, '0') é a Implementação de Uma Linha

A conversão RGB-para-hex inteira cabe em uma expressão por canal: `value.toString(16).padStart(2, '0')`. O `toString(16)` do JavaScript converte um inteiro decimal para sua representação base 16. O `padStart(2, '0')` é o detalhe fácil de esquecer — sem ele, o valor de canal 5 seria serializado como `'5'` em vez de `'05'`, produzindo um hex inválido de 5 caracteres como `#55733` quando junto com os outros canais. O idioma padrão é `[r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')` seguido por um prefixo `'#'`.

Normalização de Porcentagem: × 255 / 100, Depois Arredondar

O CSS Color 4 permite canais em porcentagem em `rgb()`: `rgb(100% 34% 20%)` é equivalente a `rgb(255 87 51)`. A regra de normalização é `Math.round(percent × 255 / 100)`. `50% × 255 / 100 = 127.5` arredonda para 128 (banker's rounding away from .5). A mesma regra se aplica ao alfa quando expresso como porcentagem (`rgb(255 87 51 / 50%)` ↔ `rgb(255 87 51 / 0.5)`). Formas inteira e porcentagem produzem saída hex idêntica depois da normalização; a ferramenta expõe a forma inteira canônica no campo RGB depois de renormalizar.

Alfa para Hex: Multiplicar por 255, Arredondar, Codificar como Par Final

RGB com alfa (`rgb(255 87 51 / 0.5)`) emite hex de 8 dígitos multiplicando o alfa por 255, arredondando para o inteiro mais próximo e codificando como um 4º par hex acrescentado depois do RGB. `0.5 × 255 = 127.5`, arredondado para 128 = `0x80`, saída `#FF573380`. A especificação CSS Color 4 usa banker's-rounding (arredondamento metade-para-par) para essa conversão, que a ferramenta segue. A forma de 8 dígitos cai de volta para 6 dígitos quando o alfa é exatamente 1 para evitar vazar pares `FF` no final em folhas de estilo.

Entrada RGB: CSS Color 4 Separado por Espaços e Legado com Vírgula Ambos Aceitos

O parser aceita tanto a forma moderna do CSS Color 4 `rgb(255 87 51)` quanto a forma legada CSS 1 `rgb(255, 87, 51)`. A forma moderna alinha com as outras notações funcionais do CSS Color 4 (`hsl()`, `lab()`, `oklch()`, `color()`) que todas usam separação por espaço e barra para alfa. A forma legada com vírgulas ainda tem suporte em todo navegador evergreen e permanece comum em bases de código mais antigas. As duas produzem saída hex idêntica; o serializador hex da ferramenta não se importa com qual forma de entrada chegou.

Fonte-de-Verdade Interna em OKLCH para Estabilidade de Round-Trip

Mesmo que este spoke mire em RGB → HEX especificamente, o conversor compartilhado por baixo mantém a cor canônica como uma tripla OKLCH internamente. Isso significa que round-trips RGB → HEX → HSL → OKLAB → CMYK → RGB acontecem sem deriva de float por passo; conversores legados que roteiam por HSL ou sRGB como pivô acumulam erro de arredondamento em cada conversão. A escolha de OKLCH (em vez de OKLAB) preserva o Matiz como eixo estável, então arrastar o slider de matiz não cruza acidentalmente pelo cinza. Segundo o paper OKLAB de 2020 de Björn Ottosson.

Codificação de Canal: 8-Bit Sem Sinal, Gama-Codificado em sRGB

Cada canal RGB é um inteiro sem sinal de 8 bits (0-255), codificado no espaço de cor sRGB definido pela IEC 61966-2-1 (1996). Os valores são *gama-codificados* — significando que a relação entre valor do canal e brilho percebido é não-linear, seguindo a função de transferência sRGB por trechos (aproximadamente um expoente 2,4 com um pequeno segmento linear perto de zero). Isso importa quando você está fazendo matemática de cor: tirar a média de dois valores RGB na sua forma gama-codificada dá o ponto médio perceptual errado. Para blending de cor correto, decodifique para RGB linear primeiro (CSS Color 4 §11.2), depois tire a média, depois recodifique. O modelo OKLCH interno da ferramenta torna isso transparente.

Boas Práticas para Fluxos RGB / Hex

Prefira Hex em Maiúscula em Guias de Marca, Minúscula em Código

Guias de marca, PDFs de marketing e documentação voltada para designer tipicamente usam hex em maiúscula (`#FF5733`) por consistência visual — o visual em caixa alta se lê como um identificador de marca. Código (CSS, JSON, fonte JavaScript) tipicamente usa minúscula (`#ff5733`) por convenção porque minúscula é mais rápida de digitar e mais comum em saída de linter autogerada. As duas são CSS válido e interpretam de forma idêntica; escolha uma para cada contexto e mantenha consistência. A ferramenta emite maiúscula por padrão; um replace mecânico inverte para minúscula.

Emita Hex de 8 Dígitos Apenas Quando Alfa < 1

Quando o alfa é igual a 1 (totalmente opaco), caia de volta para a forma de 6 dígitos. Um par `FF` no final (`#FF5733FF`) é CSS legal mas polui visualmente folhas de estilo e confunde alguns parsers legados a renderizar errado. A forma de 8 dígitos deve aparecer apenas quando o alfa é significativamente transparente. Esta ferramenta segue essa regra automaticamente — cores opacas emitem hex de 6 dígitos, cores com alfa emitem hex de 8 dígitos, e o corte é exato (alfa = 1.0 emite 6 dígitos; alfa = 0.9999 emite 8 dígitos para preservar os dados).

Não Tire a Média de Canais RGB Diretamente para Matemática de Cor

Canais RGB são gama-codificados — tirar a média de dois valores RGB dá o ponto médio perceptual errado. `(255, 0, 0)` na média com `(0, 255, 0)` produz `(127, 127, 0)`, uma azeitona escura barrenta, não o ponto médio visualmente brilhante de amarelo que você esperaria. Para blending de cor correto, decodifique para RGB linear primeiro (CSS Color 4 §11.2), depois tire a média, depois recodifique. Ou, melhor, trabalhe em OKLAB ou OKLCH onde a distância perceptual é uniforme — é exatamente isso que geradores de paleta de design system fazem.

Prefira Hex para Variáveis CSS, RGB para Hardware

Quando você está escrevendo uma propriedade customizada CSS ou um token de configuração do Tailwind, prefira hex — é mais conciso e cabe limpamente em JSON ou YAML. Quando o código consumidor faz aritmética por canal (chamadas de canvas, manipulação de imagem, drivers de LED de hardware, atributos de cor OpenGL), a forma de inteiro RGB é mais rápida de consumir. Os dois formatos descrevem a mesma cor; a escolha é puramente sobre quem está lendo e escrevendo, não sobre correção. A visão de campo simultâneo desta ferramenta deixa ambos igualmente baratos.

Valide a Faixa de Alfa Antes de Multiplicar por 255

Ao implementar seu próprio conversor RGB → hex de 8 dígitos, valide que o float alfa cai dentro de `[0, 1]` antes do passo `× 255`. Alfa fora da faixa (negativo ou > 1) silenciosamente produz pares hex inválidos que alguns parsers aceitam e outros rejeitam — um modo de falha frágil. Faça clamp primeiro (`Math.max(0, Math.min(1, alpha))`), depois multiplique, depois arredonde, depois codifique em hex. A ferramenta expõe um erro discreto inline para alfa fora da faixa em vez de emitir uma string hex quebrada.

Use o Hash de URL para Compartilhar Decisões de Cor ao Vivo

Cada mudança de cor atualiza o hash da URL como `#hex=ff5733` automaticamente. Copie a URL em uma thread do Slack ou uma issue do GitHub e qualquer um que abrir cai na mesma cor com o mesmo hex. Isso é mais confiável do que colar uma tupla RGB no chat — destinatários às vezes erram vírgulas ou perdem um canal ao digitar manualmente o valor — e deixa uma thread de design review referenciar uma cor exata em vez de "o laranja que discutimos terça". O hash nunca é transmitido ao servidor.

Perguntas Frequentes