Conversor de Cores HEX / RGB / HSL
Converta cores e copie os valores para usar no CSS
Diferença entre HEX, RGB e HSL
HEX (hexadecimal) é o formato mais usado em CSS e design: seis caracteres de 0–9 e A–F representam intensidades de vermelho, verde e azul. RGB (Red, Green, Blue) usa três números de 0 a 255 para os mesmos canais — mais intuitivo para programadores. HSL (Hue, Saturation, Lightness) usa matiz em graus, saturação e luminosidade em porcentagem — mais fácil de ajustar visualmente, pois basta aumentar L para clarear.
Todos os três formatos descrevem exatamente a mesma cor — são apenas notações diferentes para uso em CSS, design e desenvolvimento. Clique em qualquer valor na tabela acima para copiá-lo direto para a área de transferência.
Quando usar cada formato de cor
A escolha do formato depende do contexto. HEX é o padrão em folhas de estilo CSS, paletas de design e ferramentas como Figma e Canva — é compacto e universalmente suportado. Use HEX quando quiser copiar uma cor diretamente para o código ou para um software de design. RGB é preferido quando você precisa manipular canais de cor individualmente em código, ou ao trabalhar com transparência — nesse caso usa-se o formato RGBA, adicionando um quarto valor de 0 (transparente) a 1 (opaco).
HSL é o formato mais intuitivo para quem pensa em cores de forma visual. Quer uma versão mais clara da mesma cor? Aumente o L (lightness). Quer menos saturada, mais "acinzentada"? Reduza o S (saturation). O H (hue) vai de 0° a 360° percorrendo o círculo cromático: vermelho em 0°, verde em 120°, azul em 240°. Para criar variações de uma mesma cor em sistemas de design (como tons primário, secundário e terciário), HSL é mais eficiente que HEX ou RGB.
Perguntas frequentes
Como descobrir o código HEX de uma cor de uma imagem?
No Windows, use o Paint: abra a imagem, use o conta-gotas para selecionar a cor e veja o código HEX/RGB no painel de cores. No Mac, use o app Digital Color Meter (nativo). Em navegadores, extensões como ColorZilla permitem clicar em qualquer elemento de uma página e copiar o HEX. No Figma e Adobe XD, selecione qualquer elemento e o código aparece no painel de propriedades.
O que significa o # no início de uma cor HEX?
O símbolo # é apenas um prefixo que indica ao CSS que o valor a seguir é hexadecimal. Ele não faz parte do código da cor em si — os 6 dígitos depois dele representam as intensidades de vermelho (primeiros 2), verde (seguintes 2) e azul (últimos 2). #FF0000 = vermelho puro (FF = 255 em decimal), #000000 = preto, #FFFFFF = branco.
O que é RGBA e como é diferente de RGB?
RGBA adiciona um canal de transparência (Alpha) ao RGB. O valor alpha vai de 0 (completamente transparente) a 1 (completamente opaco). Exemplo: rgba(37, 99, 235, 0.5) é o azul com 50% de transparência. HEX também suporta transparência com 8 dígitos: os últimos dois representam o alpha em hexadecimal (FF = opaco, 80 ≈ 50%, 00 = transparente).
Como criar uma paleta de cores harmoniosas?
Use a roda de cores: cores complementares ficam em lados opostos (0° e 180°), cores análogas ficam próximas (separadas por 30°–60°), e cores triádicas formam triângulo equilátero (120° de distância). Com HSL é simples: mantenha o S e L iguais e varie apenas o H para obter cores harmoniosamente relacionadas. Ferramentas como coolors.co geram paletas completas automaticamente.
Qual a diferença entre a cor na tela e na impressão?
Telas usam o modelo RGB (luz aditiva — preto = sem luz, branco = todas as luzes). Impressoras usam CMYK (ciano, magenta, amarelo, preto — tinta subtrativa). Uma cor vibrante em RGB pode sair menos saturada impressa. Se você está criando material para impressão, trabalhe em CMYK no software de design e só converta para HEX/RGB se o projeto também for digital.
