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

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

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

destinadas a definir cores. Os valores possíveis para tais propriedades podem ser definidos usandos-se os seguintes tipos de dados:

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:

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.

#            

[ Retornar ao Índice ]