Nessa aula de cores e background no CSS vamos aprender como funcionam os sistemas de cores hexadecimal e rgb, além de aprender a criar plano de fundo nos elementos de nossa página HTML.

Em vários exemplos nas aulas passadas usamos a propriedade color para alterar a cor de texto dos elementos, porém utilizamos como valor da cor o próprio nome em inglês como por exemplo “color: green”.

Como estamos evoluindo nosso conhecimento em CSS, não podemos nos prender apenas as cores simples para usar em nossos projetos, pois quando eu digo que a cor do texto por exemplo deve ser “blue” eu não estou aproveitando a infinidade de tons azuis que eu posso utilizar.

Cor RGB

Para sairmos da simplicidade das cores simples nominais, temos 2 sistemas de cores na web que nos oferece uma enorme gama de tons no qual podemos misturar e criar a cor personalizada que desejamos.

O primeiro sistema de cores que vamos falar é o RGB. A sigla significa “red, green, blue”. O funcionamento desse sistema é bem simples: Atribuímos 3 valores, o primeiro representa o quanto de vermelho eu quero nessa cor, o segundo valor é o quanto de verde e o terceiro o quanto de azul.

Os valores vão de 0 até 255, ou seja temos 256 tons disponíveis de vermelho, verde e azul para misturarmos livremente e criarmos a nossa cor personalizada. Veja exemplo aplicando em: <p>Texto de exemplo</p>

Resultado:

Texto de exemplo

Nesse exemplo acima informamos que a cor de texto do parágrafo deveria ser uma mistura que tivesse 100 de vermelho, 255 de verde e 50 de azul. Como resultado tivemos uma predominância de verde na nossa cor.

Cor hexadecimal

Um outro tipo de sistema de cores que podemos usar em nosso CSS e ter uma vasta quantidade de tonalidades para criarmos nossa cor personalizada é o sistema de cores hexadecimal.

Uma cor hexadecimal é representada no CSS com a “#” seguida de 6 digitos, que podem ser números de 0 até 9, ou letras de “a” até “f”.

Um exemplo de cor hexadecimal no CSS:

Como resultado teremos:

Texto de exemplo

O funcionamento do hexadecimal é parecido com o rgb: Os primeiros 2 valores representam o quanto de vermelho existe nessa cor, o 3º e 4º valores representam o quanto de verde queremos e o 5º e 6º representam o quanto de azul queremos.

A diferente é que cada dígito da cor só pode receber um valor de 0 a 15. Daí você pode se perguntar “mas se o número só vai até 9 como representamos valores de 10 até 15?”. Simples: para o número 10 usamos a letra “a”, o 11 a letra “b”, assim sucessivamente até chegarmos em 15 (representado pela letra F).

No exemplo que criamos a cor “64FF32” dizemos que essa cor tem: “64” de vermelho que convertido de hexadecimal para decimal temos 100 , FF de verde (255) e 32 de azul (50 em rgb).

Então essa cor em hexadecimal é a mesma cor que criamos no rgb:

color: rgb(100,255,50):

A conta funciona utilizando conversão de valor na base 16 para a base 10. Caso queira se aprofundar e entender como funciona a conversão veja esse vídeo.

Background

Quando queremos preencher o fundo dos elementos com uma cor ou até mesmo inserir uma imagem como plano de fundo usamos a propriedade background.

Para aplicar por exemplo uma cor de fundo no elemento:

<div id=”teste”>Teste</div> usamos:

Como resultado teremos:

Teste

Além de nos possibilitar mudar a cor de fundos dos elementos, a propriedade background nos permite também colocar imagens como plano de fundo de um determinado elemento.

No exemplo abaixo peguei o endereço da marca desse site e coloquei como plano de fundo:

Teremos esse resultado:

Teste

Perceba que a imagem de fundo ficou cortada, justamente por ela ser maior que a altura de 200px da div. Podemos ajustar as dimensões da imagem de background com a propriedade: background-size. Veja um exemplo:

Teremos:

Teste

Perceba que quando a imagem de fundo não preenche todo o espaço do elemento, ela naturalmente se repete até preencher tudo. Uma solução para isso é usarmos a propriedade “background-repeat: no-repeat” como abaixo:

Teremos assim:

Teste

Agora que já aprendemos muita coisa sobre cores e background no CSS, vamos seguir evoluindo na próxima aula no qual vamos aprender sobre margem, espaçamento e bordas.