Informe um código hex ou tripla RGB; converteremos e mostraremos uma amostra.
Códigos de cores não são arbitrários — eles têm uma lógica precisa que vale entender
Códigos de cores hexadecimais como #3A7BD5 codificam três canais de cores — vermelho, verde, azul — como pares de dois dígitos hexadecimais. #3A é 58 em decimal, #7B é 123, #D5 é 213. Esses três números definem exatamente quanto de luz vermelha, verde e azul se mistura para produzir a cor na tela. Como cada canal vai de 0 a 255, existem 16.777.216 cores hexadecimais possíveis. CSS, SVG, HTML canvas e a maioria das ferramentas de design aceitam hex nativamente.
HSL (Hue, Saturation, Lightness) é frequentemente mais útil do que RGB para trabalho de design porque mapeia para como os humanos pensam sobre cores. Hue é a posição na roda de cores (0-360 graus), saturation é a intensidade da cor, e lightness é o brilho. Ajustar apenas o valor de lightness em HSL dá a você tons confiáveis de uma cor sem alterar seu hue — algo genuinamente difícil de fazer previsivelmente no espaço RGB.
Frequently asked questions
Qual é a diferença entre códigos de cores hex de 3 dígitos e 6 dígitos?
O hex de 3 dígitos (#RGB) é uma abreviação para o hex de 6 dígitos (#RRGGBB) onde cada dígito é duplicado. Então <code>#A3F</code> se expande para <code>#AA33FF</code>. Essa abreviação só funciona quando ambos os dígitos de cada canal são idênticos. Ela economiza alguns caracteres no CSS, mas representa o mesmo subconjunto de 4.096 cores do total de 16,7 milhões de cores. Na dúvida, use a forma de 6 dígitos — ela é sempre válida e sem ambiguidade.
Por que as cores parecem diferentes na tela versus impressas?
As telas usam <strong>mistura de cores aditiva</strong> (RGB: luz somada), enquanto as impressoras usam <strong>mistura subtrativa</strong> (CMYK: tinta absorve luz). O RGB pode representar neons vívidos e saturados que simplesmente não podem ser reproduzidos em CMYK — eles estão 'fora de gama' para impressão. Se você projetar em hex/RGB para um projeto impresso sem converter para CMYK, o software de gerenciamento de cores da impressora irá aproximar as cores, geralmente deixando-as mais opacas do que o esperado.
O que é o canal alfa e como ele funciona no CSS?
O alfa controla a opacidade em uma escala de 0 a 1. No CSS, <code>rgba(58, 123, 213, 0.5)</code> renderiza a cor com 50% de opacidade. O formato hex de 8 dígitos <code>#3A7BD580</code> codifica o alfa nos dois últimos dígitos hex — <code>80</code> em hex equivale a 128 em decimal, ou aproximadamente 50% de opacidade. O suporte de navegadores para hex de 8 dígitos é sólido em navegadores modernos, mas pode causar problemas em bases de código da era IE. O formato <code>rgba()</code> é mais seguro para compatibilidade ampla.
Como encontro o código hex de uma cor que vejo em um site?
O método mais confiável é o DevTools do seu navegador. Clique com o botão direito em qualquer elemento, selecione Inspecionar, e encontre a propriedade de cor no painel Estilos — Chrome e Firefox mostram amostras de cor clicáveis que exibem valores hex, RGB e HSL. Alternativamente, extensões de navegador como <strong>ColorZilla</strong> permitem que você use o conta-gotas em qualquer pixel na tela. Para ativos de design, ferramentas como Figma e Adobe XD mostram valores hex diretamente no inspetor de preenchimento.