Para atribuir cores aos elementos com CSS (texto, bordas, background) temos a opção de utilizar os seguintes valores fixos ou funções:

  • Nome da cor (em inglês), como red, blue, yellow, etc;
  • Código Hexadecimal, como #ffffff, #ababab, etc;
  • RGB: função que define uma cor de acordo com os valores de vermelho, verde e azul (Red, Green e Blue) que a compõem;
  • RGBA: função que define uma cor de acordo com os valores de Red, Green, Blue e Alpha-Opacity. O último parâmetro diz respeito à opacidade da cor e varia de 0 (totalmente transparente) a 1 (totalmente opaco);
  • HSL: função que define a cor de acordo com os valores de Hue, Saturation e Lightness. O valor de hue representa um ângulo na roda de cores, logo, varia de 0 a 360. O segundo argumento, saturation, varia de 0 a 100% e representa a saturação da cor, ou seja, o quão “viva” (valores maiores) ou “apagada” (valores menores) a cor será. Por fim, lightness indica a luminosidade aplicada sobre a cor. Seu valor também varia de 0 (totalmente escuro, ou preto) a 100% (totalmente iluminado, ou branco).
  • HSLA: funciona da mesma forma que a HSL, contando apenas com um argumento alpha adicional, assim como na RGBA.

Sintaxe

Qualquer um dos valores e funções vistos acima pode ser atribuído a propriedades que recebem cores, como color e background-color. Por exemplo:

    01 background-color: nome_da_cor;
    02 background-color: #codigo_hexadecimal;
    03 background-color: rgb(red, green, blue);
    04 background-color: rgba(red, green, blue, alpha);
    05 color: hsl(hue, saturation, lightness);
    06 color: hsla(hue, saturation, lightness, alpha);
    

Exemplo

Abaixo temos um exemplo de uso das diversas opções de atribuição de cores no CSS:

01 <!DOCTYPE html>
02 <html lang="pt-br">
03 <head>
04     <meta charset="UTF-8">
05     <meta name="viewport" content="width=device-width, initial-scale=1.0">
06     <title>Cores em CSS</title>
07     <style>
08         div { height: 50px }
09         #div1 { background-color: yellow; }        
10         #div2 { background-color: #ababab; }
11         #div3 { background-color: rgb(125, 89, 65); }
12         #div4 { background-color: rgba(125, 89, 65, 0.5); }
13         #div5 { background-color: hsl(120, 100%, 50%); }
14         #div6 { background-color: hsla(120, 50%, 50%, 0.5);}
15     </style>
16 </head>
17 <body>
18     <div id="div1"></div>
19     <div id="div2"></div>
20     <div id="div3"></div>
21     <div id="div4"></div>
22     <div id="div5"></div>
23     <div id="div6"></div>
24 </body>
25 </html>
    

Linha 8: atribuimos uma altura padrão a todas as divs apenas para que possamos compará-las;

Linhas 9 a 14: definimos a cor do plano de fundo das divs usando diferentes valores para a propriedade background-color.

O resultado desse código pode ser visto na figura abaixo. Preceba que quando utilizamos o argumento Alpha-Opacity (em RGBA e HSLA) a div ficou mais transparente:

Cores definidas de diferentes formas

A roda de cores

Enquanto a função RGBA pode ser facilmente compreendida, pois apenas adiciona o argumento de opacidade à função RGB já existente na versão anterior das CSS, a formação da cor com o padrão HSL requer o entendimento da “roda de cores”, que pode ser vista na Figura 2.

Roda de cores

Figura 2. Roda de cores

É importante observar que devido ao argumento Hue se tratar de um ângulo, todos os seus valores possíveis estão contidos na faixa de 0 a 360 graus (sendo que os valores extremos são equivalentes). Valores fora dessa faixa serão automaticamente convertidos. Por exemplo: -120º = 240º, 450º = 90º, etc.


Clique aqui e veja mais exemplos criados pela comunidade DevMedia :)