Conversor de Cores HEX RGB HSL

O conversor de cores transforma um mesmo tom entre os três formatos mais usados no design e na programação: HEX, RGB e HSL. Em vez de decorar tabelas ou fazer contas na mão, você escolhe a cor no seletor ou cola um código em qualquer campo e recebe na hora os outros formatos prontos para copiar. É a ferramenta ideal para quem trabalha com CSS, edição de imagens, design gráfico ou simplesmente precisa saber qual é o código exato de uma cor.

Como usar

1. Clique no seletor de cor e escolha o tom desejado na paleta, ou arraste até chegar na cor que procura.
2. Se você já tem um código, digite-o no campo correspondente: #3B82F6 em HEX, rgb(59, 130, 246) em RGB ou hsl(217, 91%, 60%) em HSL.
3. Veja os outros dois formatos e a amostra grande se atualizarem automaticamente.
4. Clique em Copiar ao lado do formato que você quer usar e cole direto no seu código ou editor.

Não é preciso apertar nenhum botão de "converter": a atualização acontece a cada tecla digitada. Se o valor estiver incorreto, uma mensagem avisa o que ajustar.

Como funciona

Os três formatos descrevem a mesma cor de maneiras diferentes, e a conversão entre eles é matemática exata — nada de aproximações:

• HEX é o código hexadecimal usado em CSS e design digital (ex.: #3B82F6). Cada par de dígitos representa a intensidade de vermelho, verde e azul, de 00 a FF (ou seja, de 0 a 255 em decimal).
• RGB descreve a cor por três canais de 0 a 255: rgb(59, 130, 246). É a forma como as telas realmente formam cada cor, misturando luz vermelha, verde e azul.
• HSL usa matiz (0–360°), saturação (0–100%) e luminosidade (0–100%): hsl(217, 91%, 60%). É o formato mais intuitivo para clarear, escurecer ou dessaturar uma cor sem perder o tom original.

A conversão de HEX para RGB é direta: cada par hexadecimal vira um número de 0 a 255. Para chegar ao HSL, a ferramenta normaliza os canais RGB, encontra o maior e o menor valor e calcula a luminosidade pela média entre eles, a saturação pela diferença e o matiz pelo canal dominante. O caminho inverso (HSL para RGB) reconstrói cada canal a partir do círculo de matizes. Tudo isso roda em JavaScript puro no seu navegador: nenhuma cor é enviada para servidores, então funciona rápido e com privacidade total.

Exemplos práticos e dicas

• Precisa da versão mais clara de um azul para um fundo? Copie o HSL e aumente apenas a luminosidade — muito mais fácil do que ajustar três canais RGB.
• Recebeu um rgb(255, 87, 51) de um designer e o CSS pede HEX? Cole no campo RGB e copie o #FF5733 gerado.
• Para atalhos, você pode digitar HEX abreviado como #f00: a ferramenta expande automaticamente para #FF0000, e o símbolo # é opcional.
• Quer montar uma paleta harmônica? Mantenha saturação e luminosidade fixas no HSL e varie só o matiz em passos regulares (por exemplo, de 30 em 30 graus).

Perguntas frequentes