Conversor de Cor — HEX, RGB e HSL
Converta qualquer cor entre HEX, RGB e HSL e copie o código na hora — ferramenta grátis para designers.
#6366f1rgb(99, 102, 241)hsl(239, 84%, 67%)rgba(99, 102, 241, 1)A conversão acontece localmente
Seguro para marcas não anunciadas
Sem conta
Conexão segura
Como funciona
- 1
Informe uma cor
Cole um código HEX, digite valores RGB ou ajuste o HSL — o que estiver à mão.
- 2
Leia as outras notações
As duas restantes se atualizam na hora, ao lado de uma amostra da cor resultante.
- 3
Copie o que precisar
Pegue a notação que a sua folha de estilo, ferramenta de design ou manual de marca usa.
Por que usar esta ferramenta
Três notações ao mesmo tempo
HEX, RGB e HSL ficam em sincronia quando você muda qualquer uma — não precisa converter duas vezes para conferir.
Edite em HSL, entregue em HEX
HSL é o modelo sobre o qual dá para raciocinar; HEX é o que a maioria das folhas de estilo e arquivos de design ainda pede.
Amostra ao vivo
A cor é desenhada enquanto você digita, então um erro de digitação num hex aparece na hora.
Copiar num clique
Pegue a string exata que o seu CSS, a sua configuração do Tailwind ou a sua ferramenta de design espera, já formatada.
Nada é enviado
A conversão é aritmética feita no seu navegador — nenhum valor vai para lugar nenhum.
Grátis e sem conta
Sem cadastro, sem limite de conversões e sem marca d’água em nada.
HEX, RGB e HSL descrevem a mesma cor de jeitos diferentes
As três notações endereçam as mesmas cores de tela; elas diferem em como o número está organizado, e é essa organização que faz uma ser mais cômoda que outra para determinada tarefa. HEX empacota três valores numa string compacta — `#3B82F6` é vermelho 59, verde 130 e azul 246 escritos em base 16. RGB declara esses três canais diretamente. HSL reestrutura a mesma informação em matiz (qual cor, como um ângulo de 0 a 360), saturação (quão viva, de 0 a 100%) e luminosidade (quão clara, de 0 a 100%). Converter entre elas não perde nada: `#3B82F6`, `rgb(59, 130, 246)` e `hsl(217, 91%, 60%)` são a mesma cor escrita de três maneiras.
Por que HSL é o que vale a pena aprender
Raciocinar com HEX e RGB é difícil porque mudar uma cor significa mexer em três números ao mesmo tempo, sem relação óbvia com o que você vê. Clareie um azul em RGB e será preciso subir os três canais em quantidades que você tem de adivinhar. Em HSL a mesma edição é um número só: aumente a luminosidade. Quer uma versão mais discreta de uma cor de marca? Baixe a saturação e deixe o resto. Precisa de um estado de hover um pouco mais escuro que o base? Tire dez da luminosidade. É também por isso que HSL é o caminho prático para montar uma escala de cor: fixe matiz e saturação, avance a luminosidade em passos, e a família fica coerente por construção e não por tentativa e erro.
Onde cada notação é realmente usada
HEX domina a entrega de design: manuais de marca, Figma e a maioria das folhas de estilo ainda especificam cores como códigos de seis dígitos, e é o formato que um cliente ou uma gráfica mais provavelmente vai te mandar. RGB aparece onde os canais precisam ser manipulados por programa, e na forma `rgba()` quando entra transparência. HSL é cada vez mais o formato escrito à mão no CSS, justamente porque quem faz manutenção lê `hsl(217, 91%, 60%)` e sabe que é um azul saturado de luminosidade média, enquanto `#3B82F6` não diz nada até ser renderizado. Um fluxo comum é raciocinar em HSL enquanto se projeta e converter para HEX no documento de entrega — exatamente a conversão que esta ferramenta existe para tornar instantânea.
Ler um código HEX sem conversor
Um código HEX de seis dígitos são três pares: vermelho, verde e azul, cada um de `00` a `FF` (0 a 255). Vale reconhecer dois padrões a olho. Quando os três pares são iguais — `#333333`, `#CCCCCC` — a cor é um cinza neutro, e quanto maior o valor, mais claro. Quando um par domina claramente, aquele canal é a cor: `#CC3333` se lê como vermelho e `#33CC33` como verde. Isso basta para pegar um erro óbvio antes de renderizar, mas não para julgar se duas cores estão próximas — e é exatamente aí que converter para HSL e comparar os três componentes sai mais rápido do que encarar strings hexadecimais.
Converter uma cor não é verificar que ela funciona
Um conversor diz qual é a cor, não se ela é legível sobre o fundo dela. São perguntas separadas, e a segunda tem um limite e não uma opinião: a WCAG exige razão de contraste de pelo menos 4,5:1 para texto de corpo normal. Um par de cores pode estar perfeitamente dentro da marca e ainda assim não passar. Se a cor que você está convertendo vai carregar texto — ou é texto — passe o par pelo verificador de contraste antes de fechar. Do mesmo modo, se você está montando um conjunto de cores em vez de converter uma só, o gerador de paletas trabalha sobre relações entre matizes, algo que a conversão sozinha não resolve.
Alfa, transparência e a forma de oito dígitos
Tanto HEX quanto RGB têm variantes transparentes: o HEX de oito dígitos acrescenta dois caracteres de alfa, e `rgba()` soma um quarto valor de 0 a 1. Esta ferramenta converte a forma opaca de seis dígitos, que é a usada por documentos de marca, arquivos de design e pela esmagadora maioria das declarações de estilo. Se você precisa de transparência, converta a cor sólida aqui e acrescente o canal alfa na sua folha de estilo — assim a cor base continua sendo uma fonte única de verdade e cada uso define a própria opacidade, em vez de gravar na paleta dezenas de variantes semitransparentes quase idênticas.
Erros comuns que vale evitar
- Ajustar uma cor editando os canais RGB. Clarear ou desbotar em RGB obriga a mexer em três números por quantidades que você adivinha. Converta para HSL, mude o único componente que descreve o que você quer, e converta de volta.
- Montar uma escala escolhendo tons a olho. Avançar a luminosidade em HSL mantendo matiz e saturação produz uma família coerente; escolher códigos hex na mão produz uma que desvia de matiz e fica embarrada no meio.
- Supor que uma cor convertida é acessível. Conversão é aritmética e não diz nada sobre legibilidade — o par ainda precisa passar de 4,5:1 para texto de corpo, e só uma checagem de contraste informa isso.
- Copiar um código hex sem a cerquilha, ou com ela, num campo que espera o contrário. As duas formas são comuns e nenhuma é aceita universalmente; confira o que a sua ferramenta quer em vez de supor.
- Esperar que uma cor de tela imprima igual. HEX, RGB e HSL descrevem luz emitida por um monitor; a impressão usa tintas CMYK, e cores vivas de tela — sobretudo azuis e verdes saturados — não têm equivalente exato em tinta.
Comparação
| KeroTools | Software de design | Conversores de buscador | |
|---|---|---|---|
| HEX, RGB e HSL juntos | Os três, ao vivo | Sim | Geralmente um por vez |
| Valores enviados a um servidor | Nunca | Não | Frequentemente |
| Amostra ao vivo | Sim | Sim | Às vezes |
| Conta ou licença | Nenhuma | Exige licença | Nenhuma |
| Funciona offline | Depois do primeiro carregamento | Sim | Não |
| Custo | Grátis | Pago | Grátis |
Recursos
Entrada e saída HEX
Notação de seis dígitos, com ou sem a cerquilha inicial.
Entrada e saída RGB
Três canais de 0 a 255, no formato que o CSS aceita direto.
Entrada e saída HSL
Matiz em graus, saturação e luminosidade em porcentagem — o modelo em que designers realmente pensam.
Prévia de cor ao vivo
Uma amostra desenha o valor atual, então os erros são pegos a olho.
Bidirecional
Edite qualquer uma das três e as outras duas acompanham; não existe campo de origem fixo.
Strings prontas para copiar
A saída sai formatada para colar direto no CSS, sem limpeza.
Sem instalação
Nada para baixar ou instalar — funciona na própria página web.
Compatível com árabe e RTL
Interface completa em oito idiomas, incluindo árabe da direita para a esquerda.
Seguro por padrão
Servido por HTTPS, sem rastreio de arquivos e sem envio a terceiros.
Quem usa
Desenvolvedores front-end
Transformar a entrega em HEX de um designer nos valores HSL com que uma folha de estilo é mais fácil de manter.
Designers
Ler uma cor de marca em HSL para montar tons claros e escuros que fiquem na mesma família de matiz.
Marketing e donos de marca
Obter a notação exata que o editor de tema de cada plataforma pede, partindo de uma única cor de marca.
Quem edita um tema
Encaixar uma cor tirada de uma ferramenta num campo que espera outro formato.
Perguntas Frequentes
Não. Tudo roda localmente no seu navegador — nada é enviado, armazenado ou compartilhado.
Sim — totalmente grátis, sem conta e sem limites.