Ir para o conteúdo principal
DesenvolvedorGrátis · 3 usos/diaProcessado no seu navegador

Conversor RGB para HEX

Converta cores RGB para HEX e HSL instantaneamente.

HEX atual
#8B5CF6
RGB
rgb(139, 92, 246)
HSL atual
hsl(258 90% 66%)
Luminância
113/255
01

Preview

Preview#8B5CF6
R139
G92
B246
#

Aceita hex (#2563EB ou 2563EB) e rgb(37, 99, 235).

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 QuorifyAtualizado 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. Ter os três lado a lado te dá liberdade 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ê informa a cor em HEX ou RGB e vê os demais formatos 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, mova os três controles, cada um entre 0 e 255. Se partir do HEX, digite o código com três ou seis dígitos, ou cole um rgb(). A ferramenta calcula imediatamente os formatos correspondentes, exibindo HEX, RGB e HSL lado a lado, todos representando o mesmo tom. Copie com um clique o HEX, para variáveis CSS e e-mails HTML, ou o RGB, para manipulação com transparência em JavaScript; o HSL aparece no painel para você selecionar quando quiser ajustar luminosidade ou saturação. Como todo o cálculo ocorre na própria página, você pode testar quantas cores quiser, sem 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 segue as especificações técnicas oficiais (RFC, W3C, padrões da linguagem e bibliotecas open-source) citadas nas fontes acima. O processamento acontece no seu navegador: o arquivo e o que você digita não saem do seu dispositivo.

§ Como usar

Como converter RGB para HEX (e vice-versa)

Converta cores entre RGB e HEX e veja o HSL correspondente — útil para integrar designs em diferentes ferramentas.

  1. Informe a cor

    Mova os controles R, G e B ou digite HEX (#FF8000 ou FF8000) ou rgb(255,128,0).

  2. Cole ou digite a cor

    Conversão em tempo real. Aceita HEX curto (#FFF) e longo (#FFFFFF); em rgba(), o alfa é descartado.

  3. Veja preview da cor

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

  4. Copie o formato desejado

    Copie o HEX ou o RGB com um clique; o HSL aparece no painel para selecionar e copiar. Use HEX para CSS clássico, RGB quando for somar alfa e HSL para ajustar tom e luminosidade.

§ Por que usar

Benefícios

  • HEX, RGB e HSL

    Aceita #RGB, #RRGGBB, rgb() e rgba() e mostra HEX, RGB e HSL da mesma cor.

  • Preview da cor ao lado

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

  • 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 o RGB de um frame do vídeo e converte para HEX para usar em outros ativos.

§ 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

Mais da mesma categoria

Da mesma categoria.