CSS Cores: adicionando cor a elementos HTML

Nesta documentação de CSS falaremos sobre o uso das propriedades color e background-color para definir a cor de elementos HTML através do CSS.

Cores no CSS

Nesta documentação de CSS vamos falar do uso de duas propriedades: color e background-color.

Essas propriedades do CSS são utilizadas para modificar a cor de elementos HTML, e tem como objetivo melhorar a estética das páginas.

As cores no CSS podem ser definidas de várias maneiras e vamos conhecê-las durante este artigo.

Color e Background-color: na prática

Veja a seguir um exemplo de uso da propriedade color:

See the Pen background e color by Eduardo Soares (@eduscxbox) on CodePen.

Entendendo as propriedades de cores do CSS

Como já vimos, o CSS possui duas propriedades ligadas a cores: color e background-color. Vamos conhecê-las.

color

A propriedade color é utilizada para definir a cor do texto de um elemento HTML. Quando aplicada a um elemento, o texto dentro dele terá a cor definida. Por exemplo:

See the Pen Color Blue by Eduardo Soares (@eduscxbox) on CodePen.

Veja que o todo o texto dentro da tag p está em azul, mas os textos de fora da tag p continuam na sua cor original.

A propriedade color altera a cor do texto apenas nos elementos em que for aplicada.

background-color

A propriedade background-color é utilizada para definir a cor de fundo de um elemento HTML. Utilizando o mesmo exemplo do color, definiremos a cor de fundo da tag p para amarelo:

See the Pen BG Yellow by Eduardo Soares (@eduscxbox) on CodePen.

Veja que apenas a tag p está com fundo amarelo, o restante da página continua com o fundo branco padrão.

A propriedade background-color altera a cor de fundo apenas nos elementos em que for aplicada.

Definindo uma cor

As propriedades color e background-color aceitam diversos tipos de valores na hora de definir a cor de um elemento, e nesse tópico vamos conhecê-los.

Nominal

O valor nominal é quando indicamos a cor que queremos através do seu nome. No CSS, o nome das cores deve ser dado em inglês.

Por exemplo, se quisermos um texto vermelho, vamos definir a propriedade color com o valor red.

Veja alguns exemplos:

See the Pen Nominal by Eduardo Soares (@eduscxbox) on CodePen.

Note como para cada uma das três linhas definimos uma cor diferente usando apenas seus nomes em inglês.

RGB

Outra forma de definir cores no CSS é através do RGB.

A sigla RGB vem do inglês para RED (vermelho), GREEN (verde), BLUE (azul) e permite a criação de diversas cores através da mistura dessas três cores.

No CSS, esses valores vão de 0 até 255. Se quisermos definir a cor vermelha em RGB faríamos assim:

p { color: rgb(255,0,0); }

O primeiro parâmetro corresponde ao R (vermelho), o segundo ao G (verde) e o terceiro ao B (azul).

Com os valores 255,0,0 estamos dizendo que queremos 255 de vermelho, e 0 de verde e azul.

Veja outros exemplos de RGB:

See the Pen Untitled by Eduardo Soares (@eduscxbox) on CodePen.

RGBA

O RGBA tem o mesmo funcionamento do RGB, porém, ele ganha um parâmetro extra, o A (Alpha). O que esse parâmetro faz é definir o nível de transparência de uma cor.

O parâmetro A deve ser definido com um valor entre 0 e 1:

Veja nesse exemplo:

See the Pen RGBA by Eduardo Soares (@eduscxbox) on CodePen.

Hexadecimal

No CSS, as cores no formato hexadecimal são essencialmente uma forma diferente de escrever cores RGB.

Esse formato conta com seis caracteres que podem variar entre: 0 1 2 3 4 5 6 7 8 9 A B C D E F.

Esses valores são utilizados em pares, e se organizam de modo onde os dois primeiros valores representam o R, os dois próximos são o G e os dois últimos o B. Valores Hexadecimais são sempre precedidos pelo sinal #:

Veja alguns exemplos:

Veja o exemplo abaixo:

See the Pen Untitled by Eduardo Soares (@eduscxbox) on CodePen.

HSL

Também é possível definir cores no HTML através do uso de H(Hue), S(Saturation), L (Lightness).

O valor de H se baseia na roda de cores (apresentada na Figura 1), e vai de 0 a 360.

Figura 1. Roda de cores

O valor de H determina a posição da roda. Por exemplo, ao definir H como 120, a cor será posicionada onde está o número 120 da imagem, ou seja, a cor verde.

O valor S determina a saturação da cor, ou seja, se a cor será mais viva ou mais fraca. O valor de S vai de 0 a 100%, onde:

Por exemplo:

background-color: hsl(120, 50%, 50%);//Aqui será um verde mais fosco background-color: hsl(120, 100%, 50%);//Enquanto aqui será um verde mais vivo e vibrante

Por fim, temos o parâmetro L (Lightness), que define a luminosidade. Seu valor também vai de 0% a 100%, sendo seu valor padrão 50%.

Quanto mais forte for o valor de L, mais iluminado, e quanto menor mais iluminado. Veja:

Veja a seguir alguns exemplos de HSL>

See the Pen Untitled by Eduardo Soares (@eduscxbox) on CodePen.

HSLA

Assim como o RGB, o HSL também possui uma variação que permite modificar a transparência.

Todas as regras do HSL são idênticas para o HSLA, a diferença está apenas na definição do parâmetro A.

Assim como no RGBA, o parâmetro A do HSLA recebe valores entre 0 e 1, funcionando da seguinte maneira:

Veja nesse exemplo:

See the Pen HSLA by Eduardo Soares (@eduscxbox) on CodePen.

Exemplo prático de cores no CSS

Veja no exemplo prático a seguir como utilizamos a propriedade color para definir as cores de texto e de fundo da página:

See the Pen Exemplo Prático - Textarea by Eduardo Soares (@eduscxbox) on CodePen.

Você pode notar o uso de cores de fundo e texto por toda a página, como no topo, no título, no botão e no rodapé.

Através do uso de cores podemos melhorar a estética das nossas páginas HTML, dando mais vida a elas.

Artigos relacionados