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:
- 0 = 100% transparente / invisível
- 0.5 = semitransparente
- 1 = totalmente opaco / sem transparência
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 #:
- 0 Equivale o valor mais baixo (preto)
- F equivale ao valor mais alto (branco)
Veja alguns exemplos:
- #000000 = Cor Preta
- #FFFFFF = Cor Branca
- #FF0000 = Cor Vermelha
- #00FF00 = Cor Verde
- #0000FF = Cor Azul
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.
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:
- 0 = Preto e Branco
- 50% = Cor leve
- 100% = Cor forte
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:
- 0% = Totalmente escuro (preto)
- 50% = Iluminação normal
- 100% = Totalmente iluminado (branco)
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:
- 0 = 100% transparente / invisível
- 0.5 = semitransparente
- 1 = totalmente opaco / sem transparência
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.
