Conversor de cores
Converta cores entre HEX, RGB e HSL com uma pré-visualização em tempo real.
Conversor de cores — Digite 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
- Digite ou cole uma cor no campo HEX, RGB ou HSL, ou clique na amostra do seletor de cores para escolher um tom visualmente.
- Observe os outros dois campos e a grande amostra de pré-visualização serem atualizados instantaneamente para refletir a mesma cor.
- Veja os blocos de resumo R / G / B, H / S / L e HEX abaixo para conferir os valores de cada canal convertido.
- 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.
- 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
Codificar / decodificar Base32 / Base58
Codifique texto em Base32 (RFC 4648) ou Base58 (o alfabeto do Bitcoin) e decodifique qualquer um de volta para texto, totalmente seguro em UTF-8 e inteiramente no seu navegador.
Codificar / decodificar Base64
Codifique texto para Base64 ou decodifique Base64 de volta para texto (compatível com UTF-8).
Conversor de maiúsculas/minúsculas e contador
Altere a caixa do texto e conte caracteres, palavras e linhas.
Formatador e minificador de código
Embeleze ou minifique HTML, CSS e JavaScript instantaneamente no seu navegador, com indentação de 2 espaços, 4 espaços ou tabulação e compressão de JavaScript com Terser.