Conversor de HEX para RGB

Converta qualquer código de cor HEX para RGB no seu navegador — hex de 3, 6 e 8 dígitos com alfa, todos suportados. Grátis, instantâneo, sem cadastro, suas cores nunca saem da página.

Sem rastreamento Roda no navegador Grátis

Toda conversão de cor acontece localmente no seu navegador. Nenhum dado é enviado para qualquer servidor.

HEX

RGB

HSL

HSV

HWB

CMYK

OKLCH

OKLAB

Named

Gama: sRGB Display P3 Rec2020

Contraste contra: —

AA AA-Lg AAA AAA-Lg · APCA Lc —

Simulação de daltonismo (8 tipos)

Protanopia (cego para vermelho) —

Deuteranopia (cego para verde) —

Tritanopia (cego para azul) —

Acromatopsia (total) —

Protanomalia (deficiência de vermelho) —

Deuteranomalia (deficiência de verde) —

Tritanomalia (deficiência de azul) —

Acromatomalia (parcial) —

Tints / Shades / Tones / Harmonies

Tints

Shades

Tones

Harmonies

Copiar como código

CSS Custom Property —

Tailwind v4 —

SwiftUI —

Android Compose —

Flutter Dart —

Referência de cores comuns

Revisado para conformidade com CSS Color 4, suporte às formas de hex de 3/4/6/8 dígitos, correção de decodificação do par alfa e exatidão bit-a-bit do round-trip entre HEX e RGB pela faixa 0-255. — Go Tools Engineering Team · May 27, 2026

Nosso time verifica as conversões hex-para-RGB contra os vetores de referência da especificação W3C CSS Color 4 e contra round-trips padrão de `parseInt` / `toString` em radix 16.

O que é um Conversor de HEX para RGB?

Um conversor de hex para RGB é um pequeno utilitário que transforma um código de cor hex (#FF5733) nos três valores inteiros de canal que ele representa (rgb(255 87 51)). HEX e RGB são os dois formatos em torno dos quais toda folha de estilo web, ferramenta de design e pipeline de pixel de imagem foi construída desde o fim dos anos 1990, e a conversão entre eles é a operação mais comum em qualquer ferramenta de cor. HEX é o formato conciso de copiar e colar que Figma, Sketch, Photoshop e todo PDF de guia de marca exportam por padrão — uma string base 16 de 6 caracteres que cabe confortavelmente em uma propriedade customizada CSS e se lê de relance quando seus olhos aprendem os padrões. RGB é o formato endereçado por canal que APIs de hardware, chamadas de desenho em canvas, manipulação de buffer de imagem, atributos de cor OpenGL e a maioria dos SDKs gráficos esperam — três inteiros 0-255 separados (ou floats normalizados 0-1) que mapeiam diretamente para os subpixels vermelho, verde e azul de um LCD ou para os fósforos de um CRT. Converter entre eles é mecânico: divida o hex em três pares de 2 dígitos e leia cada par como um número base 16. Esta ferramenta roda essa conversão ao vivo enquanto você digita, sem botão "Converter" para clicar, e expõe todo outro formato de cor comum (HSL, OKLCH, OKLAB, HSV, HWB, CMYK, mais as 148 cores nomeadas do CSS) ao lado da saída RGB, grátis.

O próprio formato RGB merece um olhar mais próximo. O sRGB padrão de 24 bits codifica cada canal como um inteiro sem sinal de 8 bits de 0 a 255 — 256 valores por canal, 16.777.216 cores no total (256³). O padrão de referência é a IEC 61966-2-1, a especificação sRGB de 1996 ancorada nos primários de fósforo de CRT que dominavam as telas da época. O CSS expõe o RGB pela função rgb() em três variações sintáticas. A forma original do CSS 1 usa separadores por vírgula: rgb(255, 87, 51). O CSS Color 4 (Candidate Recommendation do W3C desde 2022) adicionou uma forma moderna separada por espaços: rgb(255 87 51), com um canal alfa opcional depois de uma barra: rgb(255 87 51 / 0.5). As duas formas são intercambiáveis e vêm em todo navegador evergreen. O RGB também aceita canais em porcentagem: rgb(100% 33% 20%) é equivalente a rgb(255 87 51), às vezes preferido em folhas de estilo escritas à mão por legibilidade. O alfa especificamente tem uma função rgba() separada para suporte legado — rgba(255, 87, 51, 0.5) é a forma canônica que funciona em todo lugar até o IE 9. O CSS Color 4 também adicionou uma sintaxe color(srgb 1 0.341 0.2) para endereçamento explícito de sRGB, e funções paralelas color(display-p3 ...) e color(rec2020 ...) para valores de gama ampla que o hex não consegue codificar.

A matemática da conversão vai nos dois sentidos de forma limpa. HEX para RGB: parse o hex de 6 dígitos #RRGGBB como três números base 16 de 2 dígitos via parseInt(hex.slice(1, 3), 16), parseInt(hex.slice(3, 5), 16), parseInt(hex.slice(5, 7), 16). Para a forma abreviada de 3 dígitos #RGB, expanda cada dígito duplicando-o (#F73 → #FF7733) antes de parsear — isso *não* é left-pad. Para alfa de 8 dígitos #RRGGBBAA, parse o par final do mesmo jeito e divida por 255 para obter o float alfa 0-1. Para a forma abreviada alfa de 4 dígitos #RGBA, expanda cada dígito primeiro (#F738 → #FF773388). RGB para HEX é o inverso: para cada canal, chame value.toString(16).padStart(2, '0') para obter o par hex de 2 dígitos (o padStart importa — sem ele, o valor de canal 5 seria serializado como '5' em vez de '05', produzindo hex inválido), depois concatene. Ambas as direções são bit-exatas em qualquer sentido: 16² = 256, exatamente correspondendo à faixa de byte 0-255 que cada canal ocupa, então um round-trip HEX → RGB → HEX produz a entrada original verbatim sem deriva de float.

Por que hex vs RGB? Hex é mais curto, nativo das ferramentas de design e o formato que seu olho aprende com o tempo — a maioria dos devs front-end identifica #3b82f6 como o blue-500 do Tailwind de bate-pronto. RGB é endereçamento explícito de canal, mais fácil de computar contra em JavaScript e o único dos dois que aceita alfa e porcentagens de forma limpa. Os dois formatos coexistem porque resolvem problemas diferentes. Folhas de estilo web e guias de marca tendem ao hex porque o custo de copiar e colar domina. Chamadas de desenho em canvas, processamento de imagem, APIs de LED de hardware e qualquer código que faça aritmética por canal tendem ao RGB porque indexar em uma tupla é mais rápido do que fatiar uma string. A troca entre eles acontece dezenas de vezes em um projeto web típico — colar um hex do Figma, converter para inteiros RGB para uma chamada ctx.fillStyle = ..., converter de volta para hex para uma definição de variável CSS.

O fluxo HEX → RGB desta ferramenta é uma direção de uma família de 5 spokes que compartilham o mesmo conversor de cor unificado por baixo. O conversor de cores unificado dedicado é o hub — ele mostra todos os 9 formatos simultaneamente editáveis e é a ferramenta certa quando seu fluxo precisa de mais do que apenas hex e RGB. Os spokes de direção única miram intenções específicas de busca no Google: o caminho inverso conversor de RGB para hex, o conversor de hex para HSL para o espaço cognitivo legado de designer, o conversor de hex para OKLCH para design systems perceptualmente uniformes modernos (Tailwind v4 e shadcn agora padronizam OKLCH) e o conversor de hex para CMYK para aproximações de preparação de impressão. Todos os cinco spokes e o hub compartilham o mesmo motor de parsing e a mesma matemática de conversão, então os resultados são garantidamente idênticos pela família toda. Cada conversão roda localmente no seu navegador — seus códigos hex nunca são enviados, nunca registrados e zero requisições de rede disparam enquanto você digita. Confira no DevTools.

// Parse any hex shape (3/4/6/8-digit) into an RGB tuple [r, g, b, a]
// All channels in 0-255 range; alpha in 0-1.
function parseHex(input) {
  let h = input.trim().replace(/^#/, '');
  // Expand 3-digit and 4-digit shorthand by duplicating each digit
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map(c => c + c).join('');
  }
  if (!/^[0-9a-fA-F]+$/.test(h) || (h.length !== 6 && h.length !== 8)) {
    throw new Error(`Invalid hex: ${input}`);
  }
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  return [r, g, b, a];
}

console.log(parseHex('#FF5733'));   // [255, 87, 51, 1]
console.log(parseHex('#F73'));       // [255, 119, 51, 1]
console.log(parseHex('#FF573380'));  // [255, 87, 51, 0.5019607843137255]

Principais Recursos

Todas as Cinco Formas de Hex Interpretadas de Forma Idêntica

3 dígitos #F73, alfa de 4 dígitos #F738, 6 dígitos #FF5733, alfa de 8 dígitos #FF5733CC, mais a variante sem # para cada uma (F73, FF5733, etc.). O parser normaliza todas para a mesma tupla RGB interna antes da exibição, então você pode colar qualquer forma que sua fonte use sem expandir manualmente a forma abreviada antes. A capitalização também é normalizada — #ff5733 e #FF5733 produzem saída idêntica.

Saída RGB na Sintaxe Moderna Separada por Espaços

O campo RGB expõe o valor na forma moderna do CSS Color 4: rgb(255 87 51) para cores opacas, rgb(255 87 51 / 0.5) para as com alfa. Ambas as formas funcionam em todo navegador evergreen (Chrome 65+, Safari 13+, Firefox 52+). A forma antiga com vírgulas rgb(255, 87, 51) está a um replace mecânico de distância se seu alvo precisa dela; a sintaxe moderna é preferida em código novo porque alinha com as outras sintaxes funcionais do CSS Color 4.

Bit-Exato, Sem Deriva de Float

HEX → RGB é matemática inteiro-para-inteiro: parseInt(hex, 16) retorna um valor exato 0-255 sem envolvimento de float. A direção inversa (.toString(16).padStart(2, '0')) é igualmente exata. Um round-trip HEX → RGB → HEX → RGB → HEX produz a entrada original verbatim, indefinidamente. A fonte-de-verdade interna em OKLCH significa que mesmo a cadeia mais longa HEX → RGB → HSL → OKLAB → HEX permanece bit-estável, o que conversores legados roteando por HSL não garantem.

Canal Alfa Decodificado de Forma Limpa

Hex de 8 dígitos e 4 dígitos com alfa (#RRGGBBAA e #RGBA) são interpretados corretamente. O par final mapeia para um float alfa 0-1: 00 → 0, 80 → 0,502, FF → 1. A saída usa a sintaxe de barra do CSS Color 4 (rgb(255 87 51 / 0.5)) por padrão; a forma legada rgba(255, 87, 51, 0.5) está a um replace de distância. Útil para migração de design tokens onde valores alfa podem ter ficado enterrados em códigos hex de 8 dígitos.

Oito Outros Formatos Visíveis Simultaneamente

O mesmo hex que você cola também alimenta HSL, HSV, HWB, OKLCH, OKLAB, CMYK e a cor nomeada CSS mais próxima — todos visíveis de relance na mesma página. Você nunca fica trancado em hex → RGB apenas. Se um colega de equipe precisar da tripla OKLCH para um token Tailwind v4, da cor nomeada mais próxima para prosa de documentação ou da aproximação CMYK para um orçamento de impressão, os valores já estão lá com seus próprios botões Copiar.

Contraste WCAG + APCA Embutido

Passe um hex e a linha de contraste imediatamente o pontua contra branco e preto usando WCAG 2.1 (piso regulatório: 4,5:1 para corpo de texto, 7:1 para AAA) e APCA Lc (sucessor proposto do WCAG 3: alvo |Lc| ≥ 75 para corpo de texto). Útil quando você acaba de converter um hex de marca para RGB e quer verificar se ele é realmente legível como cor de corpo de texto antes de embarcar.

Copiar como CSS / Tailwind v4 / SwiftUI / Compose / Flutter

Abaixo do seletor, a seção Copiar como código transforma a cor atual em snippets prontos para colar em cinco plataformas: propriedade customizada CSS (--color-brand: rgb(255 87 51)), token @theme do Tailwind v4, literal Color(red:green:blue:) do SwiftUI, constante Color(0xFFFF5733) do Jetpack Compose, Color(0xFFFF5733) do Flutter. A sintaxe exata que cada plataforma espera, pronta para jogar em um asset catalog iOS, um arquivo de tema Android ou um ThemeData do Flutter.

100% No Navegador — Sem Upload, Sem Rastreamento

Todo parsing de hex, conversão de RGB, pontuação de contraste e geração de paleta roda localmente no seu navegador. Seus códigos hex nunca são transmitidos, nunca registrados em servidor, nunca analisados. Zero requisições de rede enquanto você digita — confira no DevTools. Seguro para paletas de marca não anunciadas, design tokens internos, mockups em rascunho sob NDA e qualquer outro trabalho de cor confidencial.

Hash de URL Compartilhável para a Cor Exata

A cor atual codifica para o hash da URL como #hex=ff5733 automaticamente a cada mudança. Copie a URL, cole em uma thread do Slack ou uma issue do GitHub, e qualquer um que abrir cai no mesmo hex com o mesmo resultado RGB. O hash vive apenas na sua barra de endereço e nunca é transmitido ao servidor (navegadores não incluem fragmentos de URL em requisições HTTP), então mesmo compartilhar o link não vaza a cor para terceiros.

Alternativas ao Conversor de HEX para RGB

RapidTables Hex to RGB

ferramenta de navegador

O resultado padrão do Google para "hex to rgb" — um formulário de mão única com hex entrando, RGB saindo, sem outros formatos visíveis. Útil para consultas pontuais vindas de busca. Não tem OKLCH, verificação de contraste, detecção de gama, tratamento de alfa e a visão simultânea de múltiplos formatos. Esta ferramenta vence em todo eixo, exceto no caso minimalista de conversão única.

ColorHexa

ferramenta de navegador

Páginas SEO de longa data por cor com metadados profundos: conversões, paletas, harmonias, gradientes para qualquer hex consultado. UI datada (começo dos anos 2010), sem suporte a OKLCH, sem contraste APCA, sem tratamento de gama ampla. Forte para descoberta SEO de um hex específico via Google; mais fraco para fluxos ativos de conversão onde digitar em uma UX de campos unificados é mais rápido.

Calculadora Hex da W3Schools

ferramenta de navegador

Toggle HEX/RGB/HSL amigável para iniciantes em uma página focada em ensino, onipresente em resultados de busca. Sem OKLCH, sem tratamento de alfa além de rgba, sem recursos avançados. Útil como referência ao lado do conteúdo explicativo da W3Schools. Esta ferramenta vence em todo outro eixo: mais formatos, matemática perceptual, recursos de gama + contraste + CVD, exportação moderna de código para Tailwind v4 / SwiftUI / Compose / Flutter.

Color Picker do DevTools do Navegador

recurso embutido do navegador

Chrome, Firefox e Safari DevTools todos vêm com um color picker que converte hex para RGB inline quando você clica em uma amostra de cor no painel CSS. Grátis, sem instalação, sempre disponível. Não tem OKLCH, não tem URLs compartilháveis, não tem exportação de código para plataformas não-web (SwiftUI, Compose). Vá para o DevTools quando já estiver depurando CSS; vá para esta ferramenta quando precisar de saída cross-platform.

Medidor de Cor Digital do macOS

app nativo do macOS

Vem com todo Mac desde o OS X — passe o mouse sobre qualquer pixel e leia os valores RGB / hex / lineares. Excelente para amostrar cores de pixel de qualquer app na tela. Não converte valores hex colados; é um amostrador de tela, não um conversor. Use o botão EyeDropper no seletor desta ferramenta (apenas navegadores Chromium) para a mesma capacidade de amostragem de tela dentro do navegador.

ConvertingColors

ferramenta de navegador

Páginas SEO por cor cobrindo muitos espaços (HEX, RGB, HSL, HSV, CMYK, XYZ, CIELAB). Não tem suporte moderno a OKLCH e a UX de edição em campos unificados. Páginas de conteúdo auto-geradas parecem fazenda de conteúdo, mas os dados de conversão estão corretos. Bom para garimpar metadados de cor individuais via Google; esta ferramenta é mais rápida para fluxos ativos.

Exemplos de HEX para RGB

Cole um hex de um screenshot → tupla RGB

#FF5733

Saída RGB: rgb(255 87 51). O caso de uso clássico — um designer jogou uma cor de marca no Figma, você tirou um screenshot, um conta-gotas te deu o hex e agora você precisa dos inteiros de canal para uma chamada de desenho em canvas, uma tira de LED de hardware ou matemática de pixel contra um buffer de imagem. A sintaxe separada por espaços do CSS Color 4 mostrada é a forma moderna; a forma antiga com vírgulas rgb(255, 87, 51) é idêntica em significado e suportada em todo navegador desde o IE 3.

Converter hex de marca do Tailwind para RGB no Photoshop

#3b82f6

Saída RGB: rgb(59 130 246). O painel de cor da Adobe (no Photoshop, Illustrator e InDesign) aceita inteiros RGB na faixa 0-255 como entrada nativa — cole 59 / 130 / 246 nas três caixas de canal e você acerta exatamente o blue-500 do Tailwind. Útil quando um designer precisa fazer um mockup de uma cor web em um app de layout voltado para impressão, ou quando você está amostrando cores de marca para uma biblioteca de amostras para edições de imagem.

Hex de 8 dígitos com alfa → rgba

#FF573380

Saída RGB: rgb(255 87 51 / 0.5). O último par (80) decodifica como 128/255 ≈ 0.502, exposto como canal alfa via a sintaxe de barra do CSS Color 4. A forma antiga equivalente é rgba(255, 87, 51, 0.5), que ainda tem suporte em todo lugar e é o que pré-processadores mais velhos esperam. Hex de 8 dígitos chegou nativamente a todos os navegadores evergreen em 2018; antes disso, o alfa precisava ser expresso pela função rgba().

Expansão de hex curto de 3 dígitos

#F73

Saída RGB: rgb(255 119 51). A especificação CSS define o hex de 3 dígitos como uma forma abreviada onde cada dígito é duplicado para formar o equivalente de 6 dígitos: #F73 expande para #FF7733, então R = FF = 255, G = 77 = 119, B = 33 = 51. Isso *não* é left-pad — #F73 não é #000F73. Muitos iniciantes erram isso; o comportamento de expansão da ferramenta deixa a regra visível de relance.

Conversões Comuns de HEX → RGB

Tabela de referência dos 10 códigos hex mais convertidos e seus equivalentes RGB — primárias puras, secundárias puras e duas cores de marca do mundo real da paleta Tailwind.

Preto

#000000 → rgb(0 0 0)

Preto puro. Todos os três canais em zero — a ausência de luz emitida. Triplo RGB (0, 0, 0).

#000000 → rgb(0 0 0)

Preto puro em tela raramente é a escolha de design certa — experimente #111 ou OKLCH com luminosidade 0,1-0,15 para corpo de texto mais suave.