CSS: cores

(Elivelto Ebermam)

Uma das coisas que tornam as páginas web mais bonitas são as cores. Por isso vamos aprender a adicionar cores na página web por meio do CSS. Mas antes de ir para os códigos, vamos entender como funciona as cores no computador.

Sistema RGB

Nas aulas de artes aprendemos sobre cores primárias, secundárias e terciárias. Combinando as cores primárias conseguimos as cores secundárias e assim por diante. Nesse caso as cores primárias são amarelo, azul e vermelho, e a partir dessas três cores consegue-se formar todas as outras. No entanto, dispositivos eletrônicos que emitem luz usam o sistema RGB para produzir as cores.

RGB é a sigla de Red (vermelho), Green (verde) e Blue (azul). Combinando essas três cores formam-se as demais.

Fonte: Wikimedia Commons

Dessa forma cada cor é formada por uma quantidade de vermelho, verde e azul. Cada uma dessas cores pode assumir um valor de 0 a 255, onde 0 indica ausência daquela cor e 255 indica presença máxima. Veja alguns exemplos:

Cor	Quantidade de vermelho R	Quantidade de verde G	Quantidade de Azul B	Amostra
Vermelha	255	0	0
Verde	0	255	0	------------
Azul	0	0	255	-
Amarela	255	255	0
Ciano	0	255	255
Púrpura	255	0	255
Laranja	255	165	0
Branca	255	255	255
Preta	0	0	0

Cores no CSS

Agora que conhecemos o sistema de cores que o computador usa, vamos aprender a usá-las nas regras CSS. A primeira coisa que temos que definir é onde vamos aplicar a regra CSS. Por exemplo, vamos aplicá-la a um parágrafo:

p {

}

Entretanto a regra acima está vazia, ou seja, sem propriedades. Uma das propriedades relacionadas a cores no CSS é a propriedade color. Essa propriedade define a cor da letra. Então em uma regra para o seletor, ela definirá a cor da letra dos parágrafos:

p {

color : green;

}

A regra acima define que os parágrafos terão letra de cor verde. Note que o valor da propriedade color é “green”, que significa verde. Essa é apenas uma forma de informar o valor de color, existem três formas de se fazer isso: por nome, por valor e por código hexadecimal.

Forma de especificar cor em CSS	Exemplo
Por nome	p { color : red; }
Por valor	p { color : rgb(255, 0, 0); }
Por código hexadecimal	p { color : #FF0000; }

Na especificação por nome, o valor é o nome de uma cor pré-definida (em inglês). A desvantagem dessa forma é que só se pode usar cores pré-definidas, ou seja, há menos possibilidades do que as outras formas.

Nas especificação por valor, é usada a função rgb e dentro dela há três valores, correspondentes as cores vermelho, verde e azul. Cada um desses valores pode ir de 0 a 255. A combinação desses três valores gera uma cor. Dessa forma há mais de 16 milhões de combinações possíveis, ou seja, mais de 16 milhões de cores diferentes.

A especificação por código decimal é semelhante a anterior, porém, usa números hexadecimais ao invés de decimais. Após o símbolo #, os primeiros dois dígitos são referentes a cor vermelha, os dois seguintes a cor verde e os dois últimos a cor azul. Os valores vão de 00 (que corresponde ao valor 0) a FF (que corresponde ao valor 255).

Além dos parágrafos, as cores podem ser aplicados a diversos outros elementos. Veja um exemplo para título e parágrafo:

Nesse exemplo escrevemos o código CSS dentro do HTML, usando vinculação interna. Definimos uma regra para os títulos de nível 1 (h1): letras serão verdes. Definimos também uma regra para os parágrafos (p): letras serão azuis.

Cor de fundo

A propriedade color não é a única que trabalha com cores em CSS. Além da cor da letra dos elementos, pode definir também a cor de fundo dos elementos. Para isso usamos a propriedade background-color. Seu uso é feito da mesma forma que a propriedade color, veja:

p {

background-color : yellow;

}

Aplicando essa regra em um documento HTML, temos o seguinte resultado:

As outras formas de especificação de valores também são validas para essa propriedade. Além disso, pode-se combinar as propriedades color e background-color. Por exemplo, podemos escrever um parágrafo com letras verdes e com fundo amarelo:

Outra coisa interessante que pode-se fazer é definir a cor de fundo de toda a página html. Para isso temos que aplicar a regra CSS no seletor body, veja: