Definindo cores em uma regra CSS

Recomendo vivamente que ao terminar a leitura deste tutorial você visite o tutorial Módulo CSS3 para cores (link abre em nova janela) e conheça as sintaxes de declarações de cores com uso de RGBA, HSL e HSLA

Introdução

O objetivop deste tutorial é detalhar as diferentes maneiras de se escrever a sintaxe para os valores das cores em uma regra CSS

Observe as regras de estilo a seguir:

CSS
div.um {background-color: #FF0000;}
div.dois {background-color: #F00;}
div.tres {background-color: rgb(255, 0, 0);}
div.quatro {background-color: rgb(100%, 0%, 0%);}
div.cinco {background-color: red;}
div.seis {background-color: ThreeDShadow;}

Como você já; deve ter concluido apresentei 06 (seis) maneiras diferentes de definir uma cor de fundo para uma DIV .

E, se considerarmos que para as duas primeiras regras é válido usar letras minúsculas, existem 08 (oito) maneiras de se definir uma cor em uma regra CSS.

As maneiras mais usadas são as mostradas em 1 e em 2, ou seja, com uso do código hexadecimal de cores.

O efeito das regras no navegador

Observe agora no screenshot a seguir como estas seis DIV's serão renderizadas.

Screenshot mostrando a renderização das seis divs e suas cores

As cinco primeiras estão com a mesma cor de fundo, vermelha o que nos leva a concluir que as cinco primeiras regras mostradas são equivalentes, ou seja são cinco maneiras diferentes de definir um mesmo valor para uma cor.

#FF0000 = #F00 = rgb(255,0,0) = rgb(100%,0%,0%) = red

A sexta cor, ThreeDShadow depende do equipamento do usuário.

Vejamos cada uma delas detalhadamente.

Definir uma cor pelo seu código hexadecimal

Esta é a maneira mais conhecida de definir uma cor.

Convém ressaltar que em uma regra CSS é indiferente usar letras maiúsculas ou minúsculas na sintaxe hexadecimal de cores e também que é válido abreviar a notação para três dígitos.

Na notação abreviada cada um dos três dígitos é automaticamente dobrado conforme exemplos a seguir:

#FFF = #FFFFFF #CF9 = #CCFF99 #cde = #ccddee #49c = #4499cc

Não é do escopo deste tutorial detalhar o código hexadecimal, contudo ressalto que os dezesseis dígitos hexadecimais são:
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F e somente eles são válidos para definir uma cor, podendo em geral ser usada qualquer combinação deles. Assim: #FFDDHH não define uma cor, pois H não é válido.

Existem várias ferramentas online para determinar o código hexadecimal de uma cor. Uma das que eu costumo usar e indico para vocês é essa: ColorSchemer

Definir uma cor pelo seu código rgb

rgb é abreviatura para:
r = red (vermelha)
g = green (verde)
b = blue (azul)

Assim o código rgb(xxx, yyy, zzz) indica uma cor obtida com a mistura de uma quantidade xxx de vermelho com yyy de verde e com zzz de azul.

Duas são as maneiras de se definir a quantidade de cada uma das três cores:

Uma faixa de númeração de 0 (zero) até 255
Em percentagem de 0% até 100%

Não é válido usar em uma definição número e percentagem.

CSS

/* definições válidas */
rgb(145, 230, 50)
rgb(20%, 0%, 70%)

/* definição inválida */
rgb(255, 20%, 120)

Não é do escopo deste tutorial detalhar as misturas de cor rgb.

No link indicado no item anterior é possível determinar também, o código rgb de uma cor

Definir cor por palavra-chave

Você pode definir uma cor usando o nome da cor. Os nomes de cor válidos são os listados nas recomendações CSS do W3C.

As Recomendações para CSS 2.1 listam as seguintes 17 cores:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, e yellow

As dezessete cores

Assim, as regras a seguir são válidas para definir cor

CSS
p {color: aqua;}
div {background-color: teal;}

Definir cor baseado no sistema operacional do usuário

As recomendações para CSS2.1 preconizam a definição da cor baseado nas cores adotadas pelo sistema operacional do usuário.

Este tipo de unidade de definição de cor denominado System Colors está; em desuso e não deverá; constar das futuras Recomendações CSS3.

Trata-se de uma lista de nomes de cores válidas à semelhança da listagem de cores por palavra-chave e que se refere a áreas do sistema operacional.

As cores previstas são:

Embora os valores CSS sejam "case insensitives" recomenda-se usar a grafia com letras maiúsculas e minúsculas ao se escrever o nome das cores de sistema por razões de legibilidade, conforme mostrado a seguir.

CSS

p {color: ThreeDLightShadow;}
div {background: ButtonShadow;}

Visite uma página mostrando as cores do seu sistema operacional (link abre em nova janela).

Ir para o tutorial Módulo CSS3 para cores (link abre em nova janela).

Compartilhe essa matéria com seus amigos

logo twitter logo facebook logo linkedin logo reddit

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.