Códigos de cor hexadecimais explicados
Por MICKAEL GOMES CONSULTING · Última atualização: 2026-06-19
Um código de cor hexadecimal é um número hexadecimal de seis algarismos, normalmente escrito com um cardinal à frente, como #FF8800, que define uma cor pelas suas componentes vermelha, verde e azul. Os seis algarismos dividem-se em três pares: o primeiro par acerta o canal vermelho, o segundo o verde e o terceiro o azul. Cada par vai de 00 a FF, ou seja, de zero a 255, pelo que uma cor hexadecimal não é mais do que três valores de byte reunidos numa cadeia compacta.
Ler os três canais
Tomemos #FF8800. O par vermelho é FF, ou seja 255, o máximo, portanto o vermelho está no máximo. O par verde é 88, ou seja 136, um pouco acima de meia intensidade. O par azul é 00, ou seja zero, portanto o azul está desligado. Vermelho no máximo, mais verde moderado, mais nenhum azul, produz um laranja quente. Misturar os três canais em intensidades diferentes é a forma como cada cor de um ecrã é construída.
Dois pontos de referência simples ajudam a ler um código de relance. #000000 corresponde a todos os canais desligados, ou seja preto, e #FFFFFF a todos os canais no máximo, ou seja branco. Um código com vermelho, verde e azul iguais, como #808080, é sempre um tom de cinzento.
Formas abreviadas e códigos de oito algarismos
O CSS também aceita uma forma abreviada de três algarismos em que cada algarismo é duplicado. #F90 expande-se para #FF9900, pelo que a abreviatura só é válida quando cada par de canal é feito de dois caracteres iguais. A regra de expansão é simplesmente que cada algarismo é repetido: o F passa a FF, o 9 passa a 99 e o 0 passa a 00. Um código como #f80 vale, assim, exatamente #ff8800, ao passo que uma cor como #FE8 não tem abreviatura válida, porque os seus pares não são feitos de caracteres iguais.
Para além dos seis algarismos clássicos, o CSS moderno suporta uma forma de oito algarismos, #RRGGBBAA, em que o último par é um valor alfa que controla a opacidade. Um AA de FF é totalmente opaco e 00 é totalmente transparente, pelo que #FF880080 é o mesmo laranja com cerca de metade da transparência. Existe também uma abreviatura de quatro algarismos, #RGBA, que duplica cada algarismo do mesmo modo que a forma de três, portanto #F808 expande-se para #FF880088.
Hexadecimal versus notação rgb()
Os códigos hexadecimais e a função CSS rgb() descrevem as mesmas cores; são duas notações para valores de canal idênticos. #FF8800 e rgb(255, 136, 0) apresentam o mesmo laranja. Os designers preferem muitas vezes o hexadecimal pela sua concisão, ao passo que o rgb() pode ser mais fácil de afinar canal a canal. A conversão entre os dois é puramente mecânica: cada canal rgb é um par hexadecimal, e um conversor faz o cálculo num instante em qualquer sentido.
Cores com nome e palavras-chave
O CSS reconhece cerca de 140 cores com nome, como red, orange ou rebeccapurple, e cada uma não passa de um apelido cómodo de um valor hexadecimal preciso. A palavra-chave red é idêntica a #FF0000, white é #FFFFFF e black é #000000. Os nomes são práticos para prototipar depressa, mas um código hexadecimal dá-lhe acesso à gama completa de mais de dezasseis milhões de cores, em vez de uma lista fixa e limitada, e é por isso que as folhas de estilo de produção se apoiam no hexadecimal assim que a paleta está definida.
Uma palavra-chave especial, currentColor, não é de todo um valor fixo: assume a cor de texto atual do elemento. Associá-la a um valor hexadecimal definido noutro sítio permite que contornos, ícones e fundos sigam automaticamente a cor do texto. Quer opte por um nome, por uma palavra-chave ou por um código hexadecimal em bruto, o navegador acaba por reduzir cada um aos mesmos valores de canal vermelho, verde e azul descritos acima.