HEX, RGB, HSL e HSV

HEX e RGB descrevem a cor por seus componentes vermelho, verde e azul. HSL (matiz, saturação, luminosidade) e HSV (matiz, saturação, valor) são mais intuitivos para ajustar cores: você gira o matiz e regula o brilho sem recalcular os canais RGB.

No RGB, cada canal vai de 0 a 255. No HEX, os mesmos três canais são escritos em hexadecimal, dois dígitos para cada um. Já o matiz do HSL e do HSV é um ângulo de 0° a 360° no círculo cromático.

Como usar

Clique no quadrado colorido para abrir o seletor do navegador e escolher uma cor, ou digite o código no campo HEX.
O campo HEX aceita o formato curto (#fff) e o completo (#ffffff). Se o código estiver incompleto, aparece um aviso.
A faixa ao lado mostra a prévia, e os campos RGB, HSL e HSV são preenchidos automaticamente.
Use o botão copiar de cada campo para levar o valor ao seu CSS ou editor de imagem.

Exemplos

#2563eb (azul) = rgb(37, 99, 235) = hsl(221, 83%, 53%) = hsv(221, 84%, 92%).
#16a34a (verde) = rgb(22, 163, 74) = hsl(142, 76%, 36%).
#fff é expandido para #ffffff, que equivale a rgb(255, 255, 255) e hsl(0, 0%, 100%).

Dúvidas frequentes

Qual usar no CSS?

HEX, RGB e HSL funcionam: #2563eb, rgb(37,99,235) e hsl(221,83%,53%). HSL é ótimo para gerar variações (tons mais claros/escuros) mexendo só na luminosidade. O HSV não existe no CSS; ele é usado em programas de edição de imagem.

Posso digitar um valor RGB ou HSL?

Não. Só o campo HEX e o seletor de cor recebem entrada; RGB, HSL e HSV são resultados somente leitura.

Por que os números às vezes diferem de outros programas?

Os valores de HSL e HSV são arredondados para inteiros. Converter de volta para HEX pode dar uma diferença de uma unidade em algum canal.

Conversor de Cores