Conversor de Cores HEX RGB HSL

Converta cores entre HEX, RGB e HSL na hora. Edite qualquer campo ou use o seletor visual — os demais atualizam ao vivo. Na hora e 100% privado.

#3B82F6
rgb(59, 130, 246) · hsl(217, 91%, 60%)
HEX
RGB
HSL
°
%
%

Dúvidas sobre conversão de cores

O que é HEX, RGB e HSL?

São três formas diferentes de escrever a mesma cor. HEX usa um código hexadecimal de 6 dígitos (ex: #3B82F6). RGB descreve com três canais: Vermelho, Verde e Azul, cada um de 0 a 255. HSL descreve pelo Matiz (0–360°), Saturação (0–100%) e Luminosidade (0–100%).

Quando usar HEX, RGB ou HSL no CSS?

HEX é o mais comum em folhas de estilo e design systems por ser compacto. RGB é útil quando você precisa controlar a opacidade com rgba(). HSL é ótimo para ajustar tom e brilho programaticamente — basta mudar um valor para ter uma cor mais clara ou mais saturada, sem recalcular os outros canais.

O que significam os valores HSL?

H é o Matiz (Hue): a posição no círculo cromático de 0° a 360° — 0° e 360° são vermelho, 120° é verde, 240° é azul. S é a Saturação: 0% é cinza puro, 100% é a cor mais viva. L é a Luminosidade: 0% é preto, 50% é a cor normal, 100% é branco.

Posso usar o seletor de cor visual?

Sim. Clique no swatch colorido grande para abrir o seletor de cor nativo do sistema. Ao escolher uma cor visualmente, todos os campos HEX, RGB e HSL são atualizados automaticamente em tempo real.

Aceita cor com 3 dígitos como #fff?

Sim. O conversor aceita HEX de 3 dígitos (#RGB) e expande automaticamente para 6 dígitos (#RRGGBB). Por exemplo, #fff vira #FFFFFF e #f00 vira #FF0000.

Algum dado é enviado para um servidor?

Não. Todo o processamento roda no seu próprio navegador, em JavaScript local. Nenhuma informação sai do seu dispositivo e nada é salvo na internet.