Minicursos - CSS

Cores


No artigo sobre Herança eu dei um exemplo definindo algumas cores e, para isso, usei o próprio nome da cor.

body
{
color:brown;
}

i
{
color:red;
}

Apesar de funcionar, essa não é a maneira correta de se definir cor a algum objeto. Primeiro porque alguns navegadores não reconhecem algumas cores definidas pelo nome e, segundo porque através de nomes poderíamos definir apenas alguns tons e não tiraríamos proveitos dos quase infinitos tons disponíveis. Para solucionar esse problema existem duas formas que podem ser utilizadas, que são a definição através de valores hexadecimais, e pelo sistema RGB (Red, Green, Blue). O inconveniente é que tanto uma quanto a outra são praticamente ilegíveis para nós, humanos, mas para os computadores elas são claras e podem formar qualquer tonalidade de cor.

O sistema hexadecimal também é conhecido como sistema de Base 16, pois conta com 10 números e mais 6 letras, de A até F, para fazer a identificação.

Um exemplo de cor definida através desse sistema seria:

Body
{
Background-color: #DAA520;
}

Percebam que foram usados números, mas também letras. Nesse exemplo utilizei o D como o mais alto valor, representando o número 13 na base decimal, mas poderia ter utilizado até o F, que nessa mesma base representaria o 15. O símbolo # é fundamental e faz parte da sintaxe do comando.

Já o sistema RGB se baseia no princípio de que, combinando as três cores primárias, o vermelho, verde e o azul, pode-se formar qualquer outra tonalidade. A junção das três formaria o branco e a ausência de todas elas, o preto.

A intensidade com que cada cor é inserida nos códigos CSS através do sistema RGB varia de 0 a 255. Aliás, se você está começando a se aventurar no mundo da programação ou da computação em geral, acostume-se com intervalos de 256 unidades, que equivale a 28. Utilizando esse intervalo é possível armazenar cada valor de cor em um 1 byte cheio, ou seja, usando os 8 bits, por isso ele foi escolhido.

Um exemplo de representação de cores usando o sistema RGB seria:

Body
{
Background-color: rgb(200, 255, 150);
}

A regra, em si, é parecida com o sistema hexadecimal, trocando-se apenas o símbolo # pelo rgb e definindo, entre parênteses, a intensidade que se quer de cada uma das cores, na ordem vermelho, verde e azul.

Também é possível utilizar uma variação desse sistema RGB, que é a utilização de porcentagem no lugar do número, como no exemplo abaixo:

Body
{
Background-color: rgb(70%, 50%, 90%);
}

Não é comum encontrarmos quem utilize essa forma, mas coloquei apenas para que você saiba que é possível. Aliás, a forma encontrada na maioria dos sites é a primeira, que utiliza o método hexadecimal.

De qualquer forma, como eu havia dito, nenhuma dessas maneiras é intuitiva e ninguém irá tentar decorar qual combinação formará determinada cor. Sendo assim, vou recomendar um site abaixo, que contém uma enorme variedade de cores e, se elas não forem suficientes, você pode montar sua cor e já ter acesso ao código da mesma.


Clique aqui para acessar o "HTML Color Codes"


No tópico seguinte falarei sobre as unidades de medida do CSS



Veja também

O que acontece com o cérebro no exato momento em que morremos

O que passa em nossa cabeça no momento da morte? Não se sabe exatamente e, embora os cientistas tenham alguma resposta, a resposta continua sendo um grande mistério. Além de difícil solução, tentar respondê-la pode criar implicações éticas. No entanto, uma equipe de cientistas da Universidade...

Ler Notícia Completa
Você gostará destes vídeos: