Cores e design

Conversor de cores

Todos os formatos de cor de que precisa, convertidos em direto com pré-visualização.

HEX
RGB
HSL
OKLCH

Cole um código HEX, um valor rgb() ou hsl(), ou escreva simplesmente um nome de cor CSS como "teal" — o conversor mostra de imediato a mesma cor em HEX, RGB, HSL e OKLCH, o espaço de cor moderno já suportado por todos os navegadores. Uma amostra em direto confirma que tem o tom certo, e cada formato copia-se num único clique, pronto a colar na sua folha de estilos, no software de design ou no manual de identidade. É a forma mais rápida de traduzir o HEX de um designer para HSL e afiná-lo à vontade, ou de migrar uma paleta para OKLCH sem fazer contas. Grátis, sem conta, e nada sai do seu dispositivo.

Como funciona?

  1. Escreva uma cor (HEX, rgb(), hsl(), nome CSS) ou use o seletor visual.
  2. Os valores HEX, RGB, HSL e OKLCH atualizam-se enquanto escreve.
  3. Confirme o tom com a amostra de pré-visualização.
  4. Copie o formato de que precisa num clique.

Perguntas frequentes

Que formatos de cor são aceites na entrada?

Códigos HEX com 3, 6 ou 8 dígitos (#f00, #ff0000, #ff0000cc), as notações rgb() e rgba(), hsl() e hsla(), e ainda todos os nomes de cores CSS (red, rebeccapurple, teal…).

O que é o OKLCH e porque interessa?

O OKLCH é um espaço de cor perceptualmente uniforme: cores com o mesmo valor de luminosidade parecem realmente igualmente claras. É suportado por todos os navegadores modernos e torna a criação de paletas CSS coerentes muito mais fácil do que com HSL.

Quando é que o HSL é melhor do que o HEX?

O HSL descreve uma cor pela tonalidade, saturação e luminosidade, o que o torna legível para humanos: cria variantes mais claras, mais escuras ou mais suaves mudando um único número, em vez de adivinhar códigos HEX.

Posso converter cores com transparência?

Sim — introduza um código HEX de 8 dígitos ou um valor rgba()/hsla() e o canal alfa é preservado em todos os formatos que o suportam.

Ferramentas relacionadas