Se você procura um conversor de cores rápido e confiável, o nosso conversor de cores foi feito para você. Nesta página, você converte códigos entre RGB, HEX e HSL, testa o resultado em tempo real, copia com um clique e ainda consulta uma tabela de cores hexadecimal pronta para uso. Além de simples, o conversor de cores é ideal para HTML, CSS e design de interfaces, facilitando tarefas como converter HEX para RGB, RGB para HSL e HSL para RGB.
Conversor de Cores (RGB, HEX e HSL)
Converta códigos entre RGB, HEX e HSL. Pré-visualize e copie com um clique.
--minha-cor: #2B6CB0;
Como usar o conversor de cores (instruções)
- Escolha um formato de entrada
Digite um valor em HEX (#RRGGBB), preencha os campos RGB (0–255) ou indique HSL (H de 0 a 360; S e L em %). - Veja as conversões automaticamente
Ao informar um formato, os demais são preenchidos na hora. Você pode clicar em “Normalizar & Converter” para ajustar a formatação. - Use o seletor de cor
Selecione qualquer cor e clique em “Usar no conversor” para preencher os campos. - Copie com um clique
Há botões para copiar HEX, rgb() e hsl(), além da variável CSS gerada (–minha-cor: #XXXXXX;). - Cheque contraste
O painel mostra a razão de contraste WCAG com fundo branco e preto, útil para acessibilidade em interfaces.
Conversor de cores HTML para desenvolvedores e designers
Se você cria interfaces em HTML/CSS ou precisa de precisão em branding, este conversor de cores HTML ajuda a padronizar paletas e a reduzir erros. Use-o para converter HEX para RGB ao trabalhar com filtros de imagens, ou RGB para HSL quando quiser ajustar saturação e luminosidade sem perder a tonalidade.
O que são RGB, HEX e HSL?
RGB (Red, Green, Blue)
Modelo aditivo de luz. Cada canal varia de 0 a 255. É o formato nativo de monitores e muito comum em APIs gráficas e bibliotecas de front-end.
HEX (Hexadecimal)
Representa cores como #RRGGBB (base 16). É popular em CSS por ser compacto e fácil de ler. Ex.: #FF0000 (vermelho), #00FF00 (verde), #0000FF (azul).
HSL (Hue, Saturation, Lightness)
Descreve a cor por matiz (0–360), saturação (%) e luminosidade (%). Útil para criar variações (hover/active) de forma consistente, alterando apenas S e L.
Exemplos práticos com o conversor de cores
H3: Converter HEX para RGB
Ex.: #2B6CB0 → rgb(43, 108, 176). Útil para usar em canvas, filtros e animações JS que exigem RGB numérico.
RGB para HSL para gerar temas
Ex.: rgb(43, 108, 176) → hsl(209, 61%, 43%). A partir do HSL, aumente L para uma versão mais clara do botão de destaque.
HSL para HEX para consolidar paleta
Ex.: hsl(209, 61%, 43%) → #2B6CB0. Defina a variável CSS –primary: #2B6CB0; e reutilize em todo o site.
Tabela de cores hexadecimal (amostras rápidas)
Abaixo, uma tabela de consulta rápida com nome, HEX, RGB e HSL. Você pode copiar os valores e usar diretamente no seu HTML e CSS.
| Amostra | Nome | HEX | RGB | HSL |
|---|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | |
| Lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) | |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | |
| Teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | |
| Pink | #FFC0CB | rgb(255, 192, 203) | hsl(350, 100%, 88%) | |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
Dicas de uso do conversor de cores
Padronize com variáveis CSS
Converta uma cor e registre como variável: :root { –brand: #2B6CB0; }. Use var(–brand) em botões, links e títulos.
Gere estados de UI com HSL
Use HSL para criar hover (aumente L) e active (reduza L). A saturação (S) pode reforçar a intensidade.
Teste contraste para acessibilidade
A razão de contraste AA (4.5:1 para texto normal) é indicada pelo painel. Ajuste L para atingir o nível desejado.
Integração em HTML e CSS
Para HTML/CSS, o formato HEX é sucinto; para manipulação via JavaScript, RGB numérico é prático; para paletas, HSL é flexível.
FAQ – Conversor de Cores
O conversor de cores funciona com RGB, HEX e HSL?
Sim. O conversor de cores permite inserir e converter valores entre RGB, HEX e HSL de forma automática, com visualização instantânea e cópia rápida dos resultados.
Como converter HEX para RGB?
Para converter HEX para RGB, basta digitar o código hexadecimal no campo correspondente, como #2B6CB0. O conversor exibirá automaticamente o valor em rgb(43, 108, 176).
Qual é a diferença entre RGB, HEX e HSL?
O modelo RGB usa intensidades de vermelho, verde e azul (0–255). O HEX representa a mesma cor em base 16 (#RRGGBB). Já o HSL expressa a cor por matiz (0–360), saturação e luminosidade, sendo ideal para criar variações de tons.
O conversor aceita formato curto como #ABC?
Sim. O conversor reconhece códigos curtos, como #ABC, e os transforma automaticamente em formato completo #AABBCC antes da conversão.
Posso verificar contraste de acessibilidade (WCAG)?
Sim. A ferramenta exibe a razão de contraste da cor escolhida sobre fundos branco e preto, ajudando a verificar se a combinação atende aos padrões AA e AAA de acessibilidade.
Como descobrir uma cor na tela e usar no conversor?
Você pode usar a ferramenta conta-gotas do navegador ou do sistema operacional para capturar a cor desejada na tela. Em seguida, cole o valor no campo de entrada para converter entre RGB, HEX e HSL.
