Padrão de cores RGB e RGBA

Cores em HTML5 podem ser representadas através dos padrões RGB (Red, Green, Blue) e RGBA (Red, Green, Blue, Alpha).

RGB

O padrão RGB utiliza parâmetros que variam de 0 a 255.
Valores iguais nos três parâmetros sempre irão apresentar tons de cinza.

Exemplos de cores:

rgb(255, 0, 0) representa a cor vermelho.
rgb(0, 255, 0) representa a cor limão.
rgb(0, 0, 255) representa a cor azul.
rgb(255, 255, 0) representa a cor amarelo.
rgb(255, 0, 255) representa a cor magenta.
rgb(0, 255, 255) representa a cor ciano.
rgb(128, 128, 128) representa a cor cinza.
rgb(0, 0, 0) representa a cor preto.
rgb(255, 255, 255) representa a cor branco.

RGBA

O padrão RGBA contém o parâmetro Alpha que varia de 0.0 até 1.0.
O padrão Alpha determina a opacidade, e quanto menor o seu valor, maior a sua transparência.

Exemplos de cores:

rgba(255, 0, 0, 1) vai gerar uma cor sem transparência: cor.
rgba(255, 0, 0, 0.75) vai gerar uma cor com 25% de transparência: cor.
rgba(255, 0, 0, 0.5) vai gerar uma cor com 50% de transparência: cor.
rgba(255, 0, 0, 0.25) vai gerar uma cor com 75% de transparência: cor.
rgba(255, 0, 0, 0) vai gerar uma cor com transparência total: cor.

Padrão de cores HEX

Cores em HTML5 podem ser representadas através do padrão HEX.

O padrão HEX utiliza os parâmetros #RRGGBB.
Cada parâmetro varia de 0 até FF em hexadecial.
RR representa Red, GG representa Green, e BB representa Blue.
Valores iguais nos três parâmetros sempre irão apresentar tons de cinza.

Exemplos de cores:

#ff0000 representa a cor vermelho.
#00ff00 representa a cor limão.
#0000ff representa a cor azul.
#ffff00 representa a cor amarelo.
#ff00ff representa a cor magenta.
#00ffff representa a cor ciano.
#808080 representa a cor cinza.
#000000 representa a cor preto.
#ffffff representa a cor branco.

Padrão de cores HSL e HSLA

Cores em HTML5 podem ser representadas através do padrão HSL (H, S%, L%) e HSLA (H, S%, L%, A).

HSL

Hue

Hue é o grau de saturação e varia de 0 até 360.
0 e 360 representam o mesmo grau de saturação.
0 representa a cor vermelho.
120 representa a cor verde.
240 representa a cor azul.

Saturation

Saturation representa a porcentagem de saturação da imagem.
0% representa um tom de cinza: cor.
50% vai representar um tom acinzentado: cor.
100% é a cor com saturação total: cor.

Lightness

Lightness representa a porcentagem de luz da cor.
0% representa nenhuma luz, portanto a cor preta: cor.
50% representa metade de luz, portanto apresenta um aspecto normal de coloração: cor.
100% representa luz total, portanto a cor branca: cor.

Tons de cinza

Tons de cinza geralmente são representados em HSL colocando o Hue em 0, a Saturation em 0% e ajustando os valores de Lightness.

Exemplos:

CINZA.
CINZA.
CINZA.
CINZA.

HSLA

O padrão HSLA contém o parâmetro Alpha que varia de 0.0 até 1.0.
O padrão Alpha determina a opacidade, e quanto menor o seu valor, maior a sua transparência.

Exemplos de cores:

hsla(0, 100%, 50%, 1) vai gerar uma cor sem transparência: cor.
hsla(0, 100%, 50%, 0.75) vai gerar uma cor com 25% de transparência: cor.
hsla(0, 100%, 50%, 0.5) vai gerar uma cor com 50% de transparência: cor.
hsla(0, 100%, 50%, 0.25) vai gerar uma cor com 75% de transparência: cor.
hsla(0, 100%, 50%, 0) vai gerar uma cor com transparência total: cor.