Utilitário de design

Conversor de cores

Cole uma cor, veja a prévia e copie o formato HEX, RGB ou HSL certo.

Valor da cor

Prévia

Cole uma cor válida e copie na hora o formato que você precisa.

HEX

#7C3AED

RGB

rgb(124, 58, 237)

HSL

hsl(262, 83%, 58%)

Como usar Conversor de cores

Cole uma cor válida, confira a prévia e copie o formato exato para design ou CSS.

Digite HEX, RGB ou HSL, ou use o seletor visual para começar mais rápido.

Veja HEX, RGB e HSL lado a lado sem abrir outra ferramenta.

Pegue o formato que faz sentido para CSS, anotações de design ou handoff.

Esse tool é mais útil quando uma cor já existe e você só precisa trocar o formato.

Converta cores para HEX, RGB ou HSL antes de colocá-las em uma folha de estilo.

Mantenha as cores de perfil, thumbnail e redes sociais consistentes entre várias ferramentas.

Compartilhe a mesma cor em vários formatos sem reescrever valores manualmente.

Um bom conversor de cores deve manter prévia e códigos comuns na mesma tela.

Entrada

#7C3AED

Saída

HEX: #7C3AED
RGB: rgb(124, 58, 237)
HSL: hsl(262, 83%, 58%)

Útil quando uma cor de marca precisa circular entre CSS e ferramentas de design.

Entrada

rgb(10, 10, 15)

Saída

HEX: #0A0A0F
HSL: hsl(240, 20%, 5%)

Bom para reconstruir o mesmo fundo escuro em várias telas.

Você pode inserir valores HEX, RGB ou HSL e a página converte para os outros formatos comuns.

Sim. O seletor de cor permite começar visualmente e ainda copiar códigos exatos.

Porque design e frontend costumam preferir formatos diferentes, e vê-los juntos economiza tempo.