Cores CSS

As cores são especificadas usando nomes de cores predefinidos ou valores RGB, HEX, HSL, RGBA, HSLA.

Nomes de cores

Em CSS, uma cor pode ser especificada usando um nome de cor predefinido:

CSS/HTML suporta 140 nomes de cores padrão.

Cor de fundo

Você pode definir a cor de fundo para elementos HTML:

                                    
h1.text-background-color {
    background-color: DodgerBlue;
}

p.text-background-color {
    background-color: Tomato;
}
                                

Cor do texto

Você pode definir a cor do texto:

                                    
h1.text-color {
    color: Tomato;
}

p.text-color {
    color: DodgerBlue;
}
                                

Cor da borda

Você pode definir a cor das bordas:

                                    
h1.border-color-tomato {
    border: 2px solid Tomato;

}

h1.border-color-dodger-blue {
    border: 2px solid DodgerBlue;
}

h1.border-color-violet {
    border: 2px solid Violet;
}
                                

Valores de cores

Em CSS, as cores também podem ser especificadas usando valores RGB, valores HEX, valores HSL, valores RGBA e valores HSLA:

                                        
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
                                    

O mesmo que o nome da cor "Tomate":

Igual ao nome da cor "Tomato", mas 50% transparente:

Cores RGB

Um valor de cor RGB representa fontes de luz VERMELHA, VERDE e AZUL.

Valor RGB

Em CSS, uma cor pode ser especificada como um valor RGB, usando esta fórmula:

rgb ( vermelho, verde , azul )

Cada parâmetro (vermelho, verde e azul) define a intensidade da cor entre 0 e 255.

Por exemplo, rgb(255, 0, 0) é exibido como vermelho, porque vermelho é definido como seu valor mais alto (255) e os outros são definidos como 0.

Para exibir preto, defina todos os parâmetros de cor para 0, assim: rgb(0, 0, 0).

Para exibir branco, defina todos os parâmetros de cor para 255, assim: rgb(255, 255, 255).

Experimente misturando os valores RGB abaixo:

Desafio:Tons de cinza são frequentemente definidos usando valores iguais para todas as 3 fontes de luz. Tente fazer um tom de cinza!

Valor RGBA

Os valores de cor RGBA são uma extensão dos valores de cor RGB com um canal alfa - que especifica a opacidade de uma cor.

Um valor de cor RGBA é especificado com:

rgba( vermelho, verde , azul, alfa )

O parâmetro alfa é um número entre 0,0 (totalmente transparente) e 1,0 (nada transparente):

Experimente misturando os valores RGBA abaixo:

Cores HEX

Valor HEX

#rrggbb

Onde rr (vermelho), gg (verde) e bb (azul) são valores hexadecimais entre 00 e ff (o mesmo que decimal 0-255).

Por exemplo, #ff0000 é exibido como vermelho, porque o vermelho é definido com o valor mais alto (ff) e os outros são definidos com o valor mais baixo (00).

Para exibir preto, defina todos os valores para 00, assim: #000000.

Para exibir branco, defina todos os valores para ff, assim: #ffffff.

Experimente misturando os valores HEX abaixo:

Valor HEX de 3 dígitos

Às vezes, você verá um código hexadecimal de 3 dígitos na fonte CSS.

O código hexadecimal de 3 dígitos é uma abreviação para alguns códigos hexadecimais de 6 dígitos.

O código hexadecimal de 3 dígitos tem o seguinte formato:

#rgb

Onde r, g e b representam os componentes vermelho, verde e azul com valores entre 0 e f.

O código hexadecimal de 3 dígitos só pode ser usado quando ambos os valores (RR, GG e BB) são os mesmos para cada componente. Então, se temos #ff00cc, pode ser escrito assim: #f0c.

Aqui está um exemplo:

                                        
body {
    background-color: #fc9; /* same as #ffcc99 */
}

h1 {
    color: #f0f; /* same as #ff00ff */
}

p {
    color: #b58; /* same as #bb5588 */
}
                                    

Cores HSL

HSL significa matiz, saturação e leveza.

Valor HSL

Em CSS, uma cor pode ser especificada usando matiz, saturação e luminosidade (HSL) na forma:

hsl ( matiz , saturação , luminosidade )

Matiz é um grau na roda de cores de 0 a 360. 0 é vermelho, 120 é verde e 240 é azul.

A saturação é um valor percentual, 0% significa um tom de cinza e 100% é a cor completa.

A luminosidade também é uma porcentagem, 0% é preto, 50% não é claro nem escuro, 100% é branco.

Experimente misturando os valores HSL abaixo:

Saturação

A saturação pode ser descrita como a intensidade de uma cor.

100% é cor pura, sem tons de cinza.

50% é 50% cinza, mas você ainda pode ver a cor.

0% é completamente cinza, você não pode mais ver a cor.

Leveza

A claridade de uma cor pode ser descrita como quanta luz você quer dar à cor, onde 0% significa sem luz (preto), 50% significa 50% luz (nem escuro nem claro) 100% significa luminosidade total (branco).

Tons de cinza

Os tons de cinza geralmente são definidos definindo o matiz e a saturação como 0 e ajustando a luminosidade de 0% a 100% para obter tons mais escuros/mais claros.

Valor HSLA

Os valores de cor HSLA são uma extensão dos valores de cor HSL com um canal alfa - que especifica a opacidade de uma cor.

Um valor de cor HSLA é especificado com:

hsla( matiz, saturação , luminosidade, alfa).

O parâmetro alfa é um número entre 0,0 (totalmente transparente) e 1,0 (nada transparente).

Experimente misturando os valores de HSLA abaixo: