Cores CSS - Definição com notação hexadecimal

Colaboração: Maurí­cio (Maujor) Samy Silva

Data de Publicação: 08 de novembro de 2017

As especificações do W3C para as CSS preveem várias propriedades, tais como color, background-color, border-color e outras, destinadas a definir cores. Os valores possí­veis para tais propriedades podem ser definidos usando-se os seguintes tipos de dados:

• valor expressso por uma palavra-chave,
• valor expressso em número hexadecimal,
• valor expressso por uma função RGB,
• valor expressso por uma função RGBA,
• valor expressso por uma função HSL,
• valor expressso por uma função HSLA.

Número hexadecimal

Nessa dica mostraremos a definição de cores em CSS com uso de número hexadecimal.

O conjunto dos 16 dí­gitos para representação de números no sistema hexadecimal é mostrado a seguir: S = { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F }

O tipo de dado número hexadecimal para definir uma cor consiste em um número hexadecimal com três ou seis dí­gitos precedido do sinal de pontuação cerquilha (#), também conhecido como jogo da velha ou tralha. Por exemplo:

• #ff0000 para a cor vermelha,
• #00ff00 para a cor verde,
• #0000ff para cor azul,
• #ff00ff para cor roxa,.

Mais informações sobre números hexadecimais na Wikipedia.

Sintaxe

O dí­gito hexadecimal é insensí­vel ao tamanho da caixa, ou seja, #ff00ff é equivalente a #FF00fF, ou qualquer outra combinação de caixa.

O uso de três dí­gitos é uma maneira abreviada de se representar números que se repetem dois a dois, ou seja, #ff00ff é equivalente a #f0f e #dd77aa é equivalente a #d7a.

A sintaxe CSS para se definir cores é conforme mostrada a seguir:

div {
  background-color: #80ddfa;
  color: #4682ba;
  border-color: #8df;
 }

Composição da cor CSS

Em CSS o número hexadecimal tem o formato geral #RRGGBB (#RedGreenBlue), ou seja, os dois primeiros dí­gitos definem a quantidade de cor RED (vermelha), os dois seguintes definem a quantidade de cor GREEN (verde) e os dois últimos definem a quantidade de cor BLUE (blue) que entram na composição da cor. O menor número hexadecimal de dois dí­gitos é 00 e o maior é FF.

No exemplo mostrado no í­nicio da matéria a cor #ff0000 é uma mistura de o máximo (FF) de RED com zero (00) de GREEN e zero (00) de BLUE, ou seja cor vermelha e a cor #ff00ff é uma mistura de o máximo (FF) de RED com zero (00) de GREEN e o máximo (FF) de BLUE, ou seja, cor roxa que é o resultado da mistura de vermelho com azul.

Área interativa

Escolha os seis dígitos hexadecimais para definir a mistura de RED GREEN e BLUE, clique OK e observe o retângulo preenchido com a cor que você definiu.

# 0 1 2 3 4 5 6 7 8 9 A B C D E F 0 1 2 3 4 5 6 7 8 9 A B C D E F     0 1 2 3 4 5 6 7 8 9 A B C D E F 0 1 2 3 4 5 6 7 8 9 A B C D E F     0 1 2 3 4 5 6 7 8 9 A B C D E F 0 1 2 3 4 5 6 7 8 9 A B C D E F     OK