Conversor de cores — HEX, RGB, HSL, HSV

Digite ou escolha uma cor para ver instantaneamente suas representações HEX, RGB, HSL e HSV. A conversão é calculada localmente no seu navegador — nada é enviado.

Por que converter entre espaços de cor?

Cada espaço de cor tem seu propósito. HEX é compacto e universalmente suportado em CSS e ferramentas de design. RGB é o espaço nativo de todo monitor e o formato esperado por muitas APIs. HSL (tonalidade, saturação, luminosidade) e HSV (tonalidade, saturação, valor) são projetados para humanos — facilitam pensar sobre o quão claro ou saturado é uma cor, o que é muito menos intuitivo em HEX ou RGB.

Ao projetar uma interface, geralmente se começa em HSL para derivar uma paleta consistente (mesma tonalidade, luminosidade variável para os tons), e então exporta-se os valores finais em HEX para o código. Este conversor permite alternar livremente entre as quatro representações sem perder precisão.

Como usar esta ferramenta

Digite qualquer cor no campo de entrada — HEX (#3b82f6 ou #38f), rgb(), rgba(), hsl(), hsla() ou hsv() são todos aceitos.
Ou use o seletor de cor nativo à esquerda para escolher visualmente.
Clique em «Aleatório» para gerar uma cor aleatória e ver todas as suas representações de uma vez.
Copie qualquer um dos quatro formatos de saída com o botão Copiar ao lado.

Perguntas frequentes

Quais formatos de entrada são reconhecidos?

Hexadecimal (3, 6 ou 8 dígitos, prefixo # opcional), rgb()/rgba(), hsl()/hsla() com ou sem sinal de porcentagem, e hsv(). O canal alfa é analisado mas não é exibido nas saídas convertidas por enquanto.

Qual é a diferença entre HSL e HSV?

Ambos expressam cor como Tonalidade / Saturação / algo. O terceiro componente difere: em HSL é Luminosidade (0% preto, 50% cor pura, 100% branco), em HSV é Valor (0% preto, 100% cor pura). HSL é simétrico em torno de 50%, HSV está mais próximo do comportamento de uma mistura de tinta.

Por que minha cor convertida parece ligeiramente diferente?

Conversões entre RGB arredondado para inteiros e HSL/HSV arredondado em porcentagem não são perfeitamente reversíveis. Para a maioria do trabalho de UI a diferença é invisível, mas se você precisa de uma ida-e-volta exata, trate HEX/RGB como a fonte da verdade e recalcule HSL/HSV a partir disso.

Nomes de cores como 'red' ou 'tomato' são suportados?

Ainda não. Os nomes de cores CSS adicionam ~150 mapeamentos fáceis de suportar — vamos adicioná-los em uma atualização futura. Enquanto isso, você pode colar o equivalente HEX.

O canal alfa é suportado?

É analisado (a entrada rgba/hsla é aceita) mas apenas a parte RGB é convertida. Uma conversão completa com alfa nos quatro espaços está no roadmap.