Conversor de cores — HEX, RGB e HSL

Converta cores entre os três formatos que todo designer e desenvolvedor encontra: HEX (#3B82F6), RGB (rgb(59, 130, 246)) e HSL (hsl(217, 91%, 60%)). Cole um código hex para ver seus equivalentes em RGB e HSL, ou mude o modo para montar um código hex a partir de valores RGB.

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

Como este cálculo funciona

Uma cor HEX reúne três canais — vermelho, verde, azul — em uma string hexadecimal (base 16) de 6 dígitos, dois dígitos por canal, cada um variando de 00 a FF (0–255 em decimal). Uma forma abreviada de 3 dígitos como #FFF duplica cada dígito, então #FFF equivale a #FFFFFF.

O RGB escreve os mesmos três canais como números decimais simples de 0 a 255, por isso rgb(59, 130, 246) e #3B82F6 descrevem exatamente a mesma cor — 59 = 0x3B, 130 = 0x82, 246 = 0xF6.

O HSL descreve a mesma cor de outra forma: Matiz (Hue) é a posição em uma roda de cores de 0–360° (0 = vermelho, 120 = verde, 240 = azul), Saturação indica quão viva é a cor (0% = cinza, 100% = totalmente saturada), e Luminosidade indica o quão próxima do preto ou do branco ela está (0% = preto, 100% = branco). É calculada a partir dos valores RGB encontrando o canal máximo e mínimo e a diferença entre eles.

Exemplo resolvido

O "blue-500" padrão do Tailwind CSS é #3B82F6. Ao converter, obtém-se rgb(59, 130, 246) e hsl(217, 91%, 60%) — o mesmo azul, escrito de três formas diferentes em CSS.

HEX vs RGB vs HSL — quando usar cada um

Formato	Exemplo	Ideal para
HEX	#3B82F6	Ferramentas de design, guias de cores da marca, copiar e colar rápido no CSS
RGB	rgb(59, 130, 246)	Quando você precisa de valores de canal explícitos ou opacidade com rgba()
HSL	hsl(217, 91%, 60%)	Criação de paletas de cores — ajustar luminosidade/saturação mantendo o matiz

Como os dígitos hex correspondem aos canais

#RRGGBB — RR é o vermelho (00–FF), GG é o verde (00–FF), BB é o azul (00–FF)
Cada par é um número em base 16: FF = 15×16 + 15 = 255, 80 = 8×16 + 0 = 128, 00 = 0
#000000 é preto, #FFFFFF é branco, #FF0000 é vermelho puro
A forma abreviada de 3 dígitos duplica cada dígito: #ABC → #AABBCC

Lendo um valor HSL rapidamente

hsl(217, 91%, 60%) revela três coisas instantaneamente: 217° é um matiz azul (os azuis ficam entre 210–250°), 91% de saturação significa que a cor é viva em vez de apagada, e 60% de luminosidade significa que está confortavelmente entre o preto e o branco — um azul claro e vivo.

Isso torna o HSL prático para gerar paletas consistentes: mantenha o matiz fixo em 217 e varie a luminosidade de 20% (um azul-marinho quase preto) a 90% (um azul-céu pálido) para obter uma gama de tons combinando dentro da mesma família de cor.

Cores de referência comuns

Nome	HEX	RGB
Preto	#000000	rgb(0, 0, 0)
Branco	#FFFFFF	rgb(255, 255, 255)
Vermelho	#FF0000	rgb(255, 0, 0)
Verde	#00FF00	rgb(0, 255, 0)
Azul	#0000FF	rgb(0, 0, 255)

Perguntas frequentes

Qual formato de cor devo usar no CSS?

Os três são renderizados de forma idêntica em qualquer navegador moderno, então é uma questão de fluxo de trabalho. HEX é compacto e comum em ferramentas de design; RGB é explícito quanto aos valores de canal e suporta rgba() para opacidade; HSL é o mais fácil de ajustar manualmente, pois é possível alterar luminosidade ou saturação sem recalcular os três canais.

Esta ferramenta armazena ou envia minhas cores?

Não. Cada conversão é feita no seu navegador com aritmética simples — nada é enviado a um servidor ou salvo.

Qual é a diferença entre #FFF e #FFFFFF?

Nenhuma — #FFF é uma forma abreviada do CSS em que cada dígito é duplicado, então #FFF, #ffFFFF e #FFFFFF representam todos o branco puro. Esta ferramenta aceita códigos hex de 3 e de 6 dígitos.

Como adiciono transparência (alfa)?

Adicione um quarto canal: rgba(59, 130, 246, 0.5) ou hsla(217, 91%, 60%, 0.5) para 50% de opacidade, ou um código hex de 8 dígitos como #3B82F680 (os dois dígitos hex extras são o canal alfa, 00–FF). Este conversor foca no trio opaco RGB/HEX/HSL; adicione o alfa manualmente se precisar.

Por que RGB e HSL dão números com aparência tão diferente para a mesma cor?

São dois sistemas de coordenadas para o mesmo ponto no espaço de cor. RGB usa canais de luz aditiva; o HSL reorganiza isso em matiz, saturação e luminosidade, o que costuma ser mais intuitivo para escolher ou ajustar um tom — por exemplo, manter matiz e saturação fixos e apenas aumentar a luminosidade para obter um tom mais claro.

Maiúsculas ou minúsculas no hex, o que é correto?

As duas funcionam em qualquer lugar — o hex não diferencia maiúsculas de minúsculas. Esta ferramenta exibe o resultado em maiúsculas (#3B82F6) para facilitar a leitura, mas #3b82f6 é exatamente a mesma cor.

O que acontece se eu inserir um código hex inválido?

Os campos RGB e HSL simplesmente permanecem em branco até que você insira um valor hex válido de 3 ou 6 dígitos (apenas letras A–F/a–f e números 0–9, com ou sem o # inicial).

Esta ferramenta é fornecida apenas para informação geral. Verifique valores importantes por conta própria. · Última revisão: 25 de agosto de 2026