Conversor de cores

Converta cores entre HEX, RGB e HSL com uma pré-visualização em tempo real.

Carregando ferramenta…

Conversor de coresDigite uma cor em qualquer notação — HEX, RGB ou HSL — e os outros formatos são atualizados instantaneamente com uma grande amostra ao vivo. Inclui um seletor de cores nativo e cada valor tem um botão de cópia com um clique. Perfeito para combinar cores da marca entre CSS e ferramentas de design.

O que é Conversor de cores?

O Color Converter é um conversor de cores HEX para RGB para HSL gratuito e online, voltado para desenvolvedores e designers. Digite uma cor em qualquer notação — HEX (#rrggbb ou a forma abreviada #rgb), RGB (como "255, 100, 0" ou "rgb(255 100 0)") ou HSL (como "220, 91%, 64%") — e todos os outros formatos são atualizados instantaneamente ao lado de uma grande amostra de pré-visualização ao vivo. Um seletor de cores nativo permite escolher um tom visualmente, e cada valor tem um botão de cópia com um clique, por isso é prático sempre que você precisa combinar cores da marca ou converter valores de cor CSS entre o código e as ferramentas de design.

Como usar Conversor de cores

  1. Digite ou cole uma cor no campo HEX, RGB ou HSL, ou clique na amostra do seletor de cores para escolher um tom visualmente.
  2. Observe os outros dois campos e a grande amostra de pré-visualização serem atualizados instantaneamente para refletir a mesma cor.
  3. Veja os blocos de resumo R / G / B, H / S / L e HEX abaixo para conferir os valores de cada canal convertido.
  4. Clique no botão de cópia ao lado de um campo para copiar seu valor: HEX copia a string #rrggbb, enquanto RGB e HSL copiam strings rgb(...) e hsl(...) prontas para usar.
  5. Se um valor for rejeitado, verifique o erro em linha e digite-o novamente no formato indicado pela dica do campo.

Exemplos

HEX para RGB e HSL

Entrada

#ff6400

Saída

RGB 255, 100, 0 / HSL 24, 100%, 50%

Expansão da forma abreviada #rgb

Entrada

#fff

Saída

HEX #ffffff / RGB 255, 255, 255 / HSL 0, 0%, 100%

Escolher uma cor visualmente

Clique na amostra para abrir o seletor de cores nativo, arraste para escolher qualquer tom, e os campos HEX, RGB e HSL são preenchidos automaticamente com os valores correspondentes.

Perguntas frequentes

Quais formatos de cor este conversor oferece?
Ele converte entre três formatos: HEX (#rrggbb completo e a forma abreviada #rgb), RGB (0-255 por canal) e HSL (matiz em graus, saturação e luminosidade em porcentagem). No momento, não oferece suporte a alfa/opacidade, HSV, CMYK ou nomes de cores CSS.
Por que minha cor mostra um erro "Invalid HEX color", "Invalid RGB color" ou "Invalid HSL color"?
O valor não corresponde ao formato esperado ou está fora do intervalo. HEX deve ter 3 ou 6 dígitos hexadecimais, os canais RGB devem estar entre 0-255 e a saturação e luminosidade HSL devem estar entre 0-100%. Digite-o novamente seguindo a dica abaixo desse campo.
Posso colar um valor CSS completo como rgb(255 100 0)?
Sim. Os campos RGB e HSL apenas extraem os números do texto, então tanto "255, 100, 0" quanto "rgb(255 100 0)" funcionam, e os botões de cópia produzem strings rgb(...) e hsl(...) prontas para usar.
Os valores convertidos são arredondados?
Sim. Os canais RGB e os valores HSL são arredondados para números inteiros, portanto uma conversão de ida e volta pode diferir em uma unidade do original. A saída HEX sempre tem dois dígitos por canal (#rrggbb).
Meus dados de cor são enviados para algum lugar?
Não. Toda a conversão é executada localmente no seu navegador com JavaScript — nada é enviado a um servidor e nenhum valor de cor é carregado, então funciona de forma privada e até offline depois que a página é carregada.

Ferramentas relacionadas