Conversor de Cores (HEX, RGB e HSL)
Converta cores entre HEX, RGB e HSL, com seletor visual e prévia. Edite qualquer formato e os outros se ajustam na hora.
Escolha no seletor ou digite em qualquer formato abaixo.
Como funciona
Uma mesma cor pode ser escrita de várias formas. Esta ferramenta trabalha com os três formatos mais usados na web e no design:
- HEX é o código de seis dígitos precedido de "#", como #2563EB. Cada par representa a intensidade de vermelho, verde e azul em hexadecimal.
- RGB descreve a cor por três valores de 0 a 255, um para cada canal: vermelho, verde e azul. O mesmo azul acima é rgb(37, 99, 235).
- HSL pensa a cor de forma mais intuitiva: matiz (o "tom", de 0 a 360 graus), saturação (quão viva, de 0 a 100%) e luminosidade (quão clara, de 0 a 100%).
Você pode usar o seletor visual, digitar diretamente em qualquer um dos três campos ou colar um código pronto. Ao alterar um formato, os outros dois são recalculados na hora, e a prévia mostra a cor resultante. Cada formato tem seu botão de copiar, já no formato certo para colar no CSS.
Quando usar
Quem trabalha com sites e design vive convertendo cores. Um manual de marca fornece a cor em HEX, mas o código precisa dela em RGB para aplicar uma transparência. Uma ferramenta de design entrega HSL, e o desenvolvedor quer o HEX equivalente.
O formato HSL é especialmente útil para criar variações de uma cor — deixá-la mais clara ou mais escura mexendo só na luminosidade, ou obter tons harmônicos girando o matiz. Ter os três formatos lado a lado agiliza esse trabalho, evita erros de digitação em códigos longos e dispensa decorar as fórmulas de conversão.
Exemplos práticos
Do manual de marca para o CSS
O manual diz que a cor principal é #2563EB. Colando no campo HEX, você obtém na hora rgb(37, 99, 235) para usar com transparência (por exemplo, uma versão a 50%) e hsl(221, 83%, 53%) para gerar tons mais claros ou escuros.
Clareando uma cor
Partindo de um azul em HSL, aumentar só a luminosidade — de 53% para 85% — gera uma versão suave da mesma cor, ideal para fundos. A ferramenta mostra o HEX correspondente para você colar direto no código.
Erros comuns
O erro mais comum é confundir a ordem dos canais no RGB. É sempre vermelho, verde e azul, nessa sequência. Inverter dois valores gera uma cor completamente diferente da pretendida.
Outro deslize é esquecer o "#" no HEX ou usar um número errado de dígitos. O formato padrão tem seis caracteres (dois por canal). Existe uma forma abreviada de três dígitos, mas ela só funciona quando cada par é repetido — nem toda cor pode ser encurtada sem perder precisão.
No HSL, é comum trocar saturação por luminosidade. Saturação controla o quão viva ou acinzentada a cor é; luminosidade controla o quão clara ou escura. Mexer no valor errado leva a resultados inesperados, como uma cor que fica cinza quando você queria apenas escurecê-la.
Perguntas frequentes
Como converter HEX para RGB?
Cole o código HEX no campo correspondente e o RGB aparece automaticamente. Cada par de dígitos do HEX vira um valor de 0 a 255: por exemplo, FF equivale a 255.
O que significam os valores do HSL?
Matiz é o tom da cor, medido em graus de 0 a 360. Saturação é a intensidade, de 0 a 100%. Luminosidade é o quão clara ou escura ela é, também de 0 a 100%.
Posso escolher a cor visualmente?
Sim. O seletor de cor abre a paleta do seu dispositivo; ao escolher, os três formatos são preenchidos automaticamente e a prévia é atualizada.
Qual formato devo usar no CSS?
Todos funcionam no CSS moderno. HEX é o mais comum para cores fixas; RGB facilita adicionar transparência; HSL é prático para criar variações claras e escuras de um mesmo tom.