Ir para o conteúdo principal
DesenvolvedorProcessado no seu navegador

Conversor RGB para HEX

Converta cores RGB para HEX e HSL instantaneamente.

0 de 3 usos hoje · 3 restantes. Vire Pro e remova o limite.

Upgrade
RGB ⇄ HEX Conversor em tempo real

Conversor RGB para HEX

Sincronize valores RGB e HEX instantaneamente para seu design system ou classes Tailwind.

HEX atual
#8B5CF6
RGB
rgb(139, 92, 246)
Luminância
113/255
01

Preview

Preview#8B5CF6
R139
G92
B246
#

Digite 6 dígitos hexadecimais para sincronizar os sliders.

02

Canais RGB

0 – 255
139
92
246

Cor atual: #8B5CF6 = rgb(139, 92, 246) luminância aproximada 113/255

Sobre

O que é Conversor RGB para HEX?

Por Quorify EditorialAtualizado em

RGB e HEX são duas notações para a mesma coisa: a cor que aparece na sua tela, definida pela combinação de vermelho, verde e azul. No formato RGB, cada canal recebe um valor de 0 a 255, como rgb(255, 87, 51). No formato HEX, esses mesmos três canais são escritos como pares hexadecimais precedidos de cerquilha, como #FF5733. O conversor de cores do Quorify traduz instantaneamente entre essas notações, e também para HSL, para que você use sempre o formato que a sua ferramenta de trabalho prefere, sem precisar fazer a conversão de cabeça. A diferença entre os formatos é puramente de notação, não de cor: #FF5733 e rgb(255, 87, 51) descrevem exatamente o mesmo tom. O que muda é o contexto de uso. O CSS aceita os dois, mas designers que vêm do Photoshop costumam pensar em HEX, enquanto quem trabalha com transparência e manipulação dinâmica de cor em JavaScript prefere RGB, porque é trivial separar os canais e adicionar um valor de alfa. Já o HSL, baseado em matiz, saturação e luminosidade, é o mais intuitivo para gerar variações mais claras ou mais escuras de uma cor base. Converter livremente entre os três te dá liberdade total no fluxo de trabalho. Entender o HSL muda a forma como você ajusta cores. Em vez de tentar adivinhar quais valores RGB deixam um tom mais escuro, você simplesmente reduz a luminosidade no HSL e mantém matiz e saturação. Por isso o conversor não para no par RGB/HEX: oferecer também a representação HSL transforma a ferramenta em um pequeno laboratório de cor, útil tanto para acertar a paleta de uma interface quanto para entender por que dois tons parecidos brigam visualmente. Tudo é calculado na hora, dentro da própria página, com a matemática direta da conversão entre bases numéricas e modelos de cor. Não há envio de dados nem espera: você digita os valores de um formato e vê os demais imediatamente. Para quem mexe com CSS, design de interface ou criação de paletas o dia inteiro, ter essa tradução instantânea à mão elimina o atrito de abrir um editor de imagem só para descobrir o código hexadecimal de uma cor que você já tem em RGB.

Casos

Quando usar

  1. Um desenvolvedor front-end recebeu do designer uma cor em rgb(34, 197, 94) e precisa colá-la em uma variável CSS no formato HEX. A conversão instantânea entrega #22C55E sem que ele saia do navegador.

  2. Uma designer quer criar uma versão mais escura da cor primária da marca para usar em estados de hover. Convertendo para HSL, ela reduz só a luminosidade e mantém a identidade do tom original.

  3. Um estudante de programação está aprendendo CSS e quer entender por que #000000 é preto e #FFFFFF é branco. Vendo o equivalente em RGB, ele percebe a relação entre os pares hexadecimais e os canais de 0 a 255.

  4. Quem monta e-mails em HTML precisa de cores no formato HEX para máxima compatibilidade entre clientes de e-mail. A ferramenta converte os valores RGB exportados do editor de imagem para o formato seguro.

  5. Um desenvolvedor que manipula cores dinamicamente em JavaScript precisa separar os canais R, G e B de um valor HEX recebido de uma API. Converter para RGB entrega os três números prontos para usar no código.

Método

Como funciona

Para converter, informe a cor no formato que você já tem em mãos. Se partir do RGB, insira os três valores de canal, cada um entre 0 e 255. Se partir do HEX, digite o código hexadecimal com os seis dígitos. A ferramenta calcula imediatamente os formatos correspondentes, exibindo o HEX, o RGB e o HSL lado a lado, todos representando exatamente o mesmo tom. A conversão é matemática e direta, então o resultado aparece sem espera assim que os valores são reconhecidos. Com os três formatos à vista, copie aquele que o seu contexto pede: HEX para variáveis CSS e e-mails HTML, RGB para manipulação com transparência em JavaScript, e HSL quando você quiser ajustar luminosidade ou saturação para criar variações da cor. Para gerar um tom mais claro ou mais escuro, parta do HSL e altere apenas a luminosidade, mantendo matiz e saturação. Como todo o cálculo ocorre na própria página, você pode testar quantas cores quiser de forma instantânea, sem nenhum envio de dados e sem precisar de um editor de imagem aberto ao lado.

FAQ

Perguntas frequentes

RGB e HEX representam a mesma cor?
Sim. São apenas notações diferentes para os mesmos três canais de vermelho, verde e azul. Por exemplo, rgb(255, 87, 51) e #FF5733 descrevem exatamente o mesmo tom na tela; muda só a forma de escrever os valores.
Para que serve a conversão para HSL?
O HSL descreve a cor por matiz, saturação e luminosidade, o que torna muito mais fácil criar variações. Para deixar uma cor mais escura, por exemplo, você reduz só a luminosidade e mantém matiz e saturação, em vez de adivinhar novos valores RGB.
Qual formato devo usar no meu CSS?
O CSS aceita HEX, RGB e HSL. Use HEX para cores fixas e simples, RGB quando precisar de transparência com alfa, e HSL quando quiser ajustar luminosidade ou saturação de forma intuitiva. A escolha é de conveniência, já que a cor final é a mesma.
A conversão perde precisão?
A conversão entre RGB e HEX é exata, pois ambos usam a mesma faixa de 0 a 255 por canal. A conversão para HSL é matemática e pode apresentar arredondamentos mínimos, mas sem impacto visual perceptível no tom resultante.
Os valores que eu digito são enviados a algum servidor?
Não. Todo o cálculo de conversão acontece dentro da própria página, no seu navegador. Nenhum valor de cor é transmitido para fora, então você pode testar quantas cores quiser livremente.
Como informo o valor HEX corretamente?
Digite o código hexadecimal de seis dígitos representando os três canais, normalmente precedido de cerquilha, como #22C55E. Os dois primeiros dígitos são o vermelho, os dois do meio o verde e os dois finais o azul, cada par variando de 00 a FF.
Fontes

Fontes oficiais

Tabelas, leis e referências consultadas para fundamentar esta ferramenta.

  1. Documentação técnicaVigenteMDN Web Docs · Mozilla

    Web Standards

    Referência mais consultada do mundo para padrões da web — APIs JavaScript, HTML, CSS e protocolos do navegador.

  2. Standard internacionalVigenteWorld Wide Web Consortium (W3C)

    W3C Standards

    Organização que define os padrões oficiais da web — HTML, CSS, ARIA, e demais especificações implementadas por todos os navegadores.

  3. Standards internacionaisDatatrackerIETF · Internet Engineering Task Force

    RFC Documents

    Repositório oficial dos Request for Comments (RFCs) — documentos técnicos que definem protocolos e formatos da internet (HTTP, JSON, URI, UUID, etc).

Metodologia — esta ferramenta consulta as tabelas e legislação vigentes nas fontes acima. As regras são atualizadas conforme novas instruções normativas são publicadas pelos órgãos competentes.

Última verificação editorial: junho de 2026.

Compartilhe

§ Como usar

Como converter RGB para HEX (e vice-versa)

Converta cores entre RGB, HEX, HSL e HSLA — útil para integrar designs em diferentes ferramentas.

  1. Escolha modo de entrada

    RGB (rgb(255,128,0)), HEX (#FF8000), HSL (hsl(30,100%,50%)), nome (orange). Detecta automaticamente.

  2. Cole ou digite a cor

    Conversão em tempo real. Aceita formatos curto (#FFF) e longo (#FFFFFF), com ou sem alfa.

  3. Veja preview da cor

    Quadrado colorido ao lado mostra como fica na tela. Inclui código de cor ao vivo.

  4. Copie o formato desejado

    Use HEX para CSS clássico, RGB para alpha dinâmica, HSL para edição programática (H rotaciona o tom).

§ Por que usar

Benefícios

  • Conversão entre 5 formatos

    RGB, HEX (3 e 6 dígitos), HSL, HSLA, nomes CSS. Detecta automaticamente formato de entrada.

  • Preview da cor ao lado

    Quadrado colorido mostra como fica visualmente. Inclui valor inline para comparação rápida.

  • Suporta alpha (transparência)

    RGBA → HEX 8 dígitos. HSLA preserva transparência. Para casos modernos com camadas.

  • Conversão em tempo real

    Atualiza conforme você digita. Sem botão 'converter' redundante.

§ Para quem é

Casos de uso

  1. Designer migrando entre ferramentas

    Converte cor de Photoshop (RGB) para Figma/CSS (HEX) sem perda.

  2. Frontend developer

    Converte cor enviada por designer (HEX) para HSL para manipulação programática.

  3. Profissional editando vídeo

    Pega cor do vídeo (HSV no premiere) e converte para HEX para uso em outros ativos.

Sobre Conversor RGB para HEX

Converta cores RGB para HEX e HSL instantaneamente.

Por que usar

Diferenciais reais — sem promessa vazia.

Conversão entre 5 formatos
RGB, HEX (3 e 6 dígitos), HSL, HSLA, nomes CSS. Detecta automaticamente formato de entrada.
Preview da cor ao lado
Quadrado colorido mostra como fica visualmente. Inclui valor inline para comparação rápida.
Suporta alpha (transparência)
RGBA → HEX 8 dígitos. HSLA preserva transparência. Para casos modernos com camadas.
Conversão em tempo real
Atualiza conforme você digita. Sem botão 'converter' redundante.

Para quem é

Cenários reais de uso, por persona.

  • Designer migrando entre ferramentas

    Converte cor de Photoshop (RGB) para Figma/CSS (HEX) sem perda.

  • Frontend developer

    Converte cor enviada por designer (HEX) para HSL para manipulação programática.

  • Profissional editando vídeo

    Pega cor do vídeo (HSV no premiere) e converte para HEX para uso em outros ativos.

Como converter RGB para HEX (e vice-versa)

Converta cores entre RGB, HEX, HSL e HSLA — útil para integrar designs em diferentes ferramentas.

  1. Escolha modo de entrada

    RGB (rgb(255,128,0)), HEX (#FF8000), HSL (hsl(30,100%,50%)), nome (orange). Detecta automaticamente.

  2. Cole ou digite a cor

    Conversão em tempo real. Aceita formatos curto (#FFF) e longo (#FFFFFF), com ou sem alfa.

  3. Veja preview da cor

    Quadrado colorido ao lado mostra como fica na tela. Inclui código de cor ao vivo.

  4. Copie o formato desejado

    Use HEX para CSS clássico, RGB para alpha dinâmica, HSL para edição programática (H rotaciona o tom).

§ Perguntas frequentes

Sobre esta ferramenta

A.

Cada formato tem propósito: HEX (compacto, fácil de copiar), RGB (alpha dinâmica, manipulação programática), HSL (intuitivo para edição — H roda o tom, S satura, L clareia), names (legibilidade em prototipagem). Designers usam HEX, devs misturam.

Relacionadas

Ferramentas relacionadas

toolLayout.related_description