🎨 Cores Hexadecimal no HTML e CSS

Introdução

O formato hexadecimal é uma das formas mais utilizadas para representar cores em páginas Web através do CSS.

Ele permite definir milhões de combinações de cores utilizando valores numéricos e letras.

📌 O formato hexadecimal é muito utilizado por desenvolvedores Web, designers e ferramentas de criação de interfaces.

O que significa hexadecimal?

Hexadecimal é um sistema de numeração baseado em 16 símbolos.

Ele utiliza números de 0 até 9 e letras de A até F.

Símbolo Valor
0 - 9 Valores numéricos
A - F Valores de 10 a 15

Estrutura de uma cor hexadecimal

Uma cor hexadecimal possui seis caracteres após o símbolo #.



#RRGGBB



Cada grupo representa uma intensidade de cor:

Exemplo de composição



#1F4E79



Parte Representa
1F Quantidade de vermelho
4E Quantidade de verde
79 Quantidade de azul
Exemplo da cor hexadecimal #1F4E79

Valores mínimo e máximo

Cada componente da cor pode variar entre 00 e FF.

Valor Intensidade
00 Ausência da cor
FF Intensidade máxima

Exemplos de cores hexadecimal

Cor Código
Vermelho #FF0000
Verde #00FF00
Azul #0000FF
Branco #FFFFFF
Preto #000000
Cinza #808080

Forma abreviada hexadecimal

Quando os valores são repetidos, podemos utilizar apenas três caracteres.



#FFFFFF = #FFF

#000000 = #000

#FF0000 = #F00



⚠️ A abreviação somente funciona quando cada par possui valores iguais.

Aplicando hexadecimal no CSS



body {

 background-color:#f5f7fa;

}


h1 {

 color:#1f4e79;

}


button {

 background:#1f4e79;

}



Vantagens do hexadecimal

Comparação dos formatos de cores

Formato Exemplo
Nome blue
Hexadecimal #0000FF
RGB rgb(0,0,255)
RGBA rgba(0,0,255,0.5)

Exercício Prático

Crie uma página HTML utilizando diferentes cores hexadecimal:

  1. Crie um título azul.
  2. Adicione um fundo cinza.
  3. Crie um botão verde.
  4. Utilize uma borda personalizada.
🎓 Aula concluída! Agora você sabe utilizar cores hexadecimal em HTML e CSS.