Cores em CSS - A propriedade color (RGB, Hexadecimal e por nome da cor)

Neste tutorial de CSS de nossa apostila, vamos falar sobre as diversas maneiras de se definir a cor de um texto através do atributo color do CSS, que é através do código hexadecimal das cores, de seus nomes em inglês ou através do sistema RGB.

Saiba como se tornar um Webmaster Profissional com Certificado

Como usar cor em CSS

Se você falar com qualquer pessoa sobre design, provavelmente a primeira coisa que irá surgir na mente é a ideia de cores: escolher uma cor, combinar, misturar, escolher um leque agradável, se certificar que elas irão agradar aos olhos dos usuários etc etc.

Por mais simples que isso possa aparecer, definir as cores de um novo projeto é um dos passos mais importantes que você deve tomar em webdesign, pois elas irão fazer parte da identidade visual de seu site.

Entre no site da UOL, verá que eles tem um leque de cores que identificam seus sites e subdomínios.
Entre no portal da Globo.com, verá que eles usam camadas e tons de cores específicos em todos os sites, que acabam caracterizando visualmente o site.

Cores é alto tão importante que existem zilhões de estudos de Psicologia, Psiquiatria e até de Marketing sobre as cores. Se pesquisar pela internet, verá que tem cores indicadas para leitura, para persuadir alguém de alguma ideia, cores que ajudam a vender algo, tons que intensificam o sentimento de desejo e outras coisas.

E como tudo mais, o CSS não deixaria essa importante ferramenta, que são as cores em sites, de fora, e de como é de praxe, o Cascading Style Sheets nos fornece uma gama de possibilidades para estilizar nossos sites HTML, e todos através de um atributo, o "color", que será alvo de estudo deste tutorial de nosso Curso de CSS.

Nomes de cores em CSS - color: nome-da-cor

Sem dúvidas, a maneira mais fácil de usar cores em seus websites, através de códigos CSS, é simplesmente usando os nomes das cores como valor para o atributo "color".

Porém, como tudo em HTML, CSS, Programação e Computação de um modo geral, terá que usar os nomes em inglês. Mas nesta altura de nossos tutoriais, você já deve estar habituado a isso, pois todas as tags, propriedades e valores que usamos em nosso curso foram em inglês.

A sintaxe é a mais simples possível, veja:

color: NomeDaCor;

Por exemplo, para que todas as tags de cabeçalhos H1 fiquem na cor azul ("Blue" em inglês) e todos os textos de parágrafos fiquem na cor cinza ("Gray" em inglês), nossa folha de estilos será:

h1 {
 color: blue;
}

p {
 color: gray;
}
Vejamos mais exemplos de nomes de cores, em inglês, para você usar em seus sites HTML:

<div style="color: red"> Red - Cor vermelha</div>
<div style="color: yellow"> Yellow - Cor amarela</div>
<div style="color: blue"> Blue - Cor azul</div>
<div style="color: green"> Green - Cor verde</div>
<div style="color: pink"> Pink - Cor rosa</div>
<div style="color: lime"> Lime- Cor verde-limão</div>
<div style="color: olive"> Olieve - Cor oliva</div>

O resultado destes códigos é:
Red - Cor vermelha
Yellow - Cor amarela
Blue - Cor azul
Green - Cor verde
Pink - Cor rosa
Lime- Cor verde-limão
Olieve - Cor oliva

Para outras cores, veja o artigo Web Colors da Wikipedia.
Obviamente, é esse método de escolher os nomes das cores é limitado ao nome das cores.
Como existem milhões de cores e tonalidades diferentes, não vamos decorar milhões de nomes (até porque não existem).

Para isso, vamos aprender outras maneiras mais sofisticadas e precisas, para escolher cores de uma maneira mais profissional, que irá nos permitir fazer qualquer coisa com as cores.




Sistema de Cores RGB - color: rgb(255,255,255) rgb(100%, 100%,100%)

Se você lembrar bem de sua época de infância, provavelmente vai lembrar quando brincava de pintar e sua professora ensinou a criar cores misturando outras.

Existem três cores bem especiais, que são chamadas as cores primárias, que são as cores vermelha, verde e azul. Em inglês: Red, Green e Blue.
Elas são especiais porque com elas podemos formar todas as outras, apenas misturando essas cores.

Pegue as inicias dos nomes, em inglês, dessas cores primárias e temos a sigla: RGB,que dá nome a um sistema de escolha de cores poderosíssimo e super versátil, que é vastamente usando em HTML e CSS, pois vai nos permitir criar milhões de cores.

Sistema RGB em valores de 0 a 255 - rgb( x, x, x)

Uma das maneiras desse sistema de cores é através de valores, que vão de 0 até 255 (totalizando 256 possibilidades), para cada cor primária.
Ou seja, vamos escolher um número de 0 até 255 para o Red, outro para o Green e outro para o Blue, e então usamos esses números no rgb e nosso browser renderiza e nos mostra a cor resultante dessas misturas.

Interessante, não?
Vamos ver como é a sintaxe:

rgb( número pro red, número pro green, número pro blue)

Por exemplo, o código da cor preta é: rgb( 0, 0, 0)
Então para definir a cor preta para as tags de parágrafo, por exemplo:

p{
   color: rgb(0,0,0);
}
Já o código da cor amarela é: rgb(255, 2550)

Quanto maior o número, maior é a presença daquela cor primária no resultado.
Assim, a cor preta é a ausência das cores primárias, por isso o 0, 0 e 0.
Já o amarelo é a mistura das cores vermelha e verde, e nada de azul Por isso botamos 255 pro vermelho e 255 pro verde, e nada pro azul.

Confira mais códigos de cores usando o sistema RGB em valores:
http://pt.wikipedia.org/wiki/HTML_nomes_de_cores

Ou seja, podemos escolher 256 valores para cor primária, o que resulta na incrível possibilidade de 256 x 256 x 256 = 16.777.216

Ou seja, quase 17 milhões de opções de cores!

Sistema de cor em RGB usando porcentagem - rgb(%, %, %)

Como vimos, o sistema RGB nada mais é que uma mistura de vermelho, verde e azul.
Demos a quantidade (de 0 até 255) de cada cor, e o sistema mistura e dá o resultado.

Se você não quiser se preocupar com esses números, pode usar porcentagem para dizer o quanto de red, de green e de blue vai na "mistura".
Logo, a sintaxe para usar o sistema RGB com porcentagem é:

rgb( % pro red, % pro green, % pro blue)

Por exemplo, o código da cor branca é: color: rgb( 100%, 100%, 100%)
Do amarelo: color: rgb(100%, 100%, 0%)

No link da Wikipedia que passamos, há a porcentagem que você deve usar para criar diversas cores.
Mas os sistemas rgb são iguais, só muda a maneira na qual você vai especificar a quantidade de cada cor primária.

Cores em CSS usando Hexadecimal - color: #FFFFFF

Por fim, e não menos importante (pelo contrário, é o sistema de cores mais usado para criar sites), vamos falar sobre o uso da propriedade color em CSS com valores de cores representados por números hexadecimais.

Antes de explicamos o que é um hexadecimal, vamos falar do sistema decimal, que é o que usamos e é composto de 10 (deci) elementos: 0, 1, 2, 3, 4, 5, ,6 ,7 8 e 9
O hexadecimal possui 16 elementos: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E e F.

Assim, a sintaxe para definir uma cor em hexadecimal é:

color: #xxxxxx;

Onde x é um número hexadecimal.
Ou seja, cada cor é definida por 6 elementos, onde eles podem variar de 0 até a letra F, totalizando 16 valores para cada "x".

E assim como no sistema RGB, esses números representam os diferentes valores das cores primárias.
Os dois primeiros dígitos hexadecimais são da cor primária vermelha, os dois seguintes do verde e os dois últimos números da cor azul.

Assim, a cor preta é a ausência dessas cores: color: #000000;
Já a cor branca é a mistura dessas cores: color: #FFFFFF;
O amarelo é a presença total do vermelho e verde, e nada de azul: color: #FFFF00;
A cor azul é a presença só desta cor primária: color: #0000FF;

Veja agora mais alguns links que contém nomes e códigos de diversas cores para usar em HTML e CSS:
http://www.w3schools.com/cssref/css_colors.asp
http://www.w3schools.com/cssref/css_colornames.asp
http://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/

Nenhum comentário: