Conversor de Cores Online: HEX, RGB e HSL
Converta cores entre HEX, RGB e HSL em tempo real. Use o seletor visual, copie o código em qualquer formato e explore a paleta de tons derivados da cor escolhida.
Selecione ou digite uma cor
Edite qualquer campo abaixo: os outros dois são atualizados automaticamente.
Conversor HEX para RGB e HSL Online Grátis
O conversor hex para rgb da QMIX Digital transforma qualquer código de cor entre os três formatos mais usados em desenvolvimento web e design: HEX, RGB e HSL. Basta digitar ou colar o valor em qualquer um dos campos, ou escolher visualmente a cor no seletor, que os outros dois formatos são calculados instantaneamente, direto no navegador, sem enviar nenhum dado para servidores externos.
Criamos esta ferramenta para uso interno durante o desenvolvimento de sites e sistemas. É comum, no dia a dia de um desenvolvedor ou designer, receber uma paleta em um formato e precisar dela em outro: um cliente manda o código HEX de uma marca e o CSS do projeto usa variáveis em RGB, ou é preciso gerar tons mais claros e escuros de uma cor de destaque usando HSL. Decidimos disponibilizar o conversor de cores online publicamente para que outros profissionais também possam usar.
O que são os formatos HEX, RGB e HSL?
HEX (hexadecimal) representa uma cor com um código de 6 dígitos precedido por #, onde cada par de dígitos define a intensidade de vermelho, verde e azul em base 16 (de 00 a FF). É o formato mais usado em CSS, ferramentas de design e especificações de marca, por ser compacto e fácil de copiar.
RGB (red, green, blue) descreve a mesma informação de cor, mas em base 10, com valores de 0 a 255 para cada canal. É o formato mais próximo de como monitores e telas realmente compõem a cor, somando luz vermelha, verde e azul.
HSL (hue, saturation, lightness) descreve a cor por matiz (posição na roda de cores, de 0° a 360°), saturação (intensidade, de 0% a 100%) e luminosidade (quão clara ou escura é a cor, de 0% a 100%). É o formato mais intuitivo para criar variações de uma mesma cor, já que basta ajustar a luminosidade para clarear ou escurecer sem alterar o matiz.
Quando usar cada formato de cor
- HEX: ideal para CSS, temas de sites, especificações de marca e qualquer lugar em que se precise de um código curto e universal para converter cor hex entre ferramentas de design e código.
- RGB: útil quando é preciso ajustar a transparência com
rgba(), ou quando o sistema já trabalha com valores separados de vermelho, verde e azul, como em processamento de imagem e canvas. - HSL: a melhor escolha para gerar paletas de tons, estados de hover, variações de tema claro/escuro e qualquer ajuste fino de luminosidade e saturação sem perder a identidade da cor original.
- Impressão gráfica: nenhum dos três formatos é usado diretamente em impressão, que trabalha com CMYK. Ainda assim, é comum converter a cor de tela (HEX ou RGB) para uma referência aproximada antes de repassar ao gráfico, que fará a conversão final para CMYK no software de pré-impressão.
Fórmulas de conversão de cor
Tabela de cores comuns em HEX e RGB
| Cor | HEX | RGB | Amostra |
|---|---|---|---|
| Preto | #000000 | rgb(0, 0, 0) | |
| Branco | #FFFFFF | rgb(255, 255, 255) | |
| Vermelho | #FF0000 | rgb(255, 0, 0) | |
| Verde | #00FF00 | rgb(0, 255, 0) | |
| Azul | #0000FF | rgb(0, 0, 255) | |
| Amarelo | #FFFF00 | rgb(255, 255, 0) | |
| Ciano | #00FFFF | rgb(0, 255, 255) | |
| Magenta | #FF00FF | rgb(255, 0, 255) | |
| Cinza | #808080 | rgb(128, 128, 128) | |
| Laranja | #FFA500 | rgb(255, 165, 0) | |
| Roxo | #800080 | rgb(128, 0, 128) | |
| Marrom | #A52A2A | rgb(165, 42, 42) |
Trabalha com design e também precisa converter unidades como polegadas e centímetros? O conversor de medidas grátis resolve conversões físicas em tempo real.
Perguntas Frequentes
Qual a diferença entre HEX, RGB e HSL?
HEX usa um código hexadecimal de 6 dígitos para representar cores, muito comum em CSS e design. RGB descreve a cor pela intensidade de vermelho, verde e azul (0 a 255). HSL descreve a cor por matiz, saturação e luminosidade, o que facilita clarear ou escurecer um tom sem alterar sua identidade visual.
Como converter HEX para RGB manualmente?
Divida o código hexadecimal em três pares de dígitos (RR, GG, BB) e converta cada par de base 16 para base 10. Por exemplo, #00FF66 vira R=00 (0), G=FF (255) e B=66 (102), resultando em rgb(0, 255, 102).
Posso digitar o HEX sem o símbolo #?
Sim. O conversor aceita o código com ou sem o #, além de aceitar tanto o formato curto de 3 dígitos (ex: 0f6) quanto o formato completo de 6 dígitos (ex: 00ff66).
Para que serve o formato HSL em design?
O HSL é útil para criar paletas de tons de uma mesma cor, pois basta variar a luminosidade (L) para clarear ou escurecer, mantendo o mesmo matiz. É muito usado para gerar estados de hover, sombras e variações de tema.
Os dados da cor que eu digitar ficam salvos em algum servidor?
Não. Toda a conversão acontece no navegador, em JavaScript. Nenhum valor de cor é enviado para servidores da QMIX Digital ou de terceiros.
Como uso o código de cor gerado no CSS?
Copie qualquer um dos três formatos (HEX, RGB ou HSL) com o botão "Copiar" e cole diretamente em propriedades CSS como color, background-color ou border-color. Os três formatos são igualmente válidos em qualquer navegador moderno.
Ferramentas Relacionadas
Ferramenta 100% gratuita, sem cadastro, desenvolvida e mantida pela QMIX Digital.