Conversor de cores (HEX / RGB / HSL)

Como funciona

Os designers geralmente trabalham com códigos HEX (por exemplo, os copiados do Figma ou de outro software de design), enquanto o CSS moderno costuma aproveitar o formato HSL para ajustar facilmente o matiz (hue), a saturação ou a luminosidade de uma cor sem recalcular um código HEX manualmente — útil para gerar variantes mais claras ou mais escuras de uma mesma cor de marca para os estados hover, disabled ou os temas escuros. Esta ferramenta detecta automaticamente se você colou um código HEX, RGB ou HSL e o converte para o formato que você precisa.

Qual é a diferença entre HEX, RGB e HSL?

HEX ( #rrggbb ) e RGB ( rgb(r, g, b) ) descrevem uma cor por seus componentes vermelho, verde e azul — HEX em base 16, RGB em base 10 — e representam exatamente a mesma informação em duas notações diferentes. O HSL (hsl(h, s%, l%)) descreve a mesma cor de outra forma: pelo seu matiz (um ângulo na roda cromática), sua saturação e sua luminosidade, o que torna muito mais intuitivo "manter a mesma cor mas clareá-la" ou "manter a mesma luminosidade mas mudar o matiz".

Por que usar HSL em vez de HEX em CSS?

Porque é fácil derivar variantes coerentes de uma cor modificando apenas o componente de luminosidade (por exemplo hsl(217, 91%, 60%) para a cor base e hsl(217, 91%, 40%) para um estado hover mais escuro), sem ter que recalcular um novo código HEX a cada vez nem adivinhar a olho se o matiz permanece o mesmo.

Processamento 100% local: a conversão é feita diretamente no seu navegador via WebAssembly, sem nenhuma chamada a um servidor externo.