Converta qualquer cor entre os formatos HEX, RGB e HSL com uma única entrada. Insira um código hex, um valor rgb() ou um valor hsl() e veja as três representações além de uma pré-visualização da cor. Perfeito para designers e desenvolvedores que precisam alternar entre formatos de cor.
Insira seus valores para ver o resultado.
#ff5733 → rgb(255, 87, 51) / hsl(12, 100%, 60%)
Um laranja-avermelhado quente convertido de hex para RGB e HSL.
rgb(0, 128, 255) → #0080ff / hsl(210, 100%, 50%)
Um azul brilhante convertido de RGB para hex e HSL.
hsl(120, 100, 50) → #00ff00 / rgb(0, 255, 0)
Verde puro expresso nos três formatos.
Desenvolvedores web, designers e artistas digitais frequentemente precisam alternar entre formatos de cor. O CSS suporta HEX, RGB e HSL nativamente, e diferentes ferramentas e sistemas de design usam padrões diferentes. Uma cor selecionada em uma ferramenta de design pode fornecer um valor HEX, mas sua biblioteca CSS-in-JS pode esperar RGB.
Este conversor elimina a matemática manual e permite que você veja todos os formatos de uma vez.
O formato mais compacto. Um código hex de seis dígitos como #ff5733 codifica os canais vermelho, verde e azul como dois dígitos hexadecimais cada. O intervalo para cada canal é 00 a FF (0 a 255 em decimal). HEX é o formato padrão na maioria dos seletores de cores e ferramentas de design.
Um modelo de cor aditivo onde cada canal varia de 0 a 255. RGB é intuitivo para pensar em cores de tela porque os monitores literalmente emitem luz vermelha, verde e azul. O formato rgb(255, 87, 51) significa vermelho máximo, verde moderado e azul baixo.
Uma representação mais amigável para humanos. O matiz é a posição no círculo cromático (0° = vermelho, 120° = verde, 240° = azul). A saturação controla a vivacidade (0% = escala de cinza, 100% = cor completa). A luminosidade controla o brilho (0% = preto, 50% = cor pura, 100% = branco).
HSL facilita a criação de harmonias de cores — por exemplo, rotacionar o matiz em 120° produz um esquema de cores triádico.
A ferramenta analisa sua entrada para identificar o formato, extrai os valores brutos de cor e depois converte para os outros dois formatos usando algoritmos padrão:
Todas as conversões são matematicamente exatas para entradas inteiras, com arredondamento aplicado apenas para valores HSL.
Desenvolvimento web — Alterne entre HEX para propriedades CSS e RGB para operações de canvas ou manipulação de cores em JavaScript.
Sistemas de design — Documente cores em HSL para ajustes de tema mais fáceis enquanto fornece HEX para implementação.
Gradientes CSS — Use RGB com valores alfa para sobreposições transparentes, convertendo da saída HEX da sua ferramenta de design.
Acessibilidade — Ajuste a luminosidade em HSL para garantir proporções de contraste suficientes mantendo o mesmo matiz.
Todas as conversões acontecem no seu navegador. Nenhum valor de cor é enviado para nenhum servidor. A ferramenta processa a entrada instantaneamente enquanto você digita, sem dependências externas.
As cores HEX usam um código hexadecimal de seis dígitos precedido por um sinal de hash, como #ff5733. Cada par de dígitos representa os componentes vermelho, verde e azul, respectivamente. HEX é o formato mais comum em web design e CSS.
RGB significa Red (Vermelho), Green (Verde), Blue (Azul). Cada componente varia de 0 a 255. Por exemplo, rgb(255, 0, 0) é vermelho puro. Este formato é intuitivo porque descreve diretamente a intensidade de cada canal de cor.
HSL significa Hue (Matiz), Saturation (Saturação), Lightness (Luminosidade). O matiz é o ângulo no círculo cromático (0–360), a saturação é a intensidade da cor (0–100%) e a luminosidade controla quão clara ou escura a cor é (0–100%). HSL é frequentemente mais intuitivo para humanos porque você pode raciocinar sobre cores em termos de "qual cor, quão vívida, quão brilhante".
Sim, códigos hex de 3 dígitos como #f00 são totalmente suportados por esta ferramenta. Eles são automaticamente expandidos para seus equivalentes de 6 dígitos dobrando cada caractere, então #f00 se torna #ff0000 (vermelho puro). Esta é a notação abreviada padrão usada em CSS e web design, onde cada dígito é repetido para formar o valor hex completo de seis dígitos.
Não, todas as conversões de cores acontecem inteiramente no seu navegador usando JavaScript no lado do cliente. Nenhum valor de cor é transmitido para nenhum servidor, armazenado em nenhum banco de dados ou registrado em qualquer lugar. A ferramenta roda localmente no seu dispositivo e produz resultados instantaneamente sem requisições de rede, tornando-a segura para cores de marca proprietárias e trabalho de design.
Última atualização em 2026-09-27 · Escrito por UtiliaTools