Ao trabalhar com cores, o css lhe permite utilizar os formatos hexadecimal (#FF9966) e RGB (rgb 125, 200, 34). No CSS 3 foi incluido um novo tipo de formato chamado HSL e o HSLA (semelhante ao RGBA).

Abaixo mostrarei as principais diferenças entre eles.

Hexadecimal

O hexadecimal possui apenas o valor referente a cor, utilizando o símbolo # no início de cada especificação de cor.

Exemplo:

RGB

O RGB possui três valores referente a cor, utilizando o formato rgb(red, green, blue) – vermelho, verde e azul, pode-se misturar a intensidade de cada cor e formar várias outras cores. Os valores utilizados devem ser de 0 (mais escuro) a 255 (mais claro).

rgb(0,0,0) = Preto;
rgb(255,255,255) = Branco (Mistura de todas as cores forma o branco);

Exemplo:

HSL (somente Browsers que suportem CSS 3)

O HSL é umas das novidades do CSS 3. Semelhante ao RGB, o HSL usa 3 valores: Hue (Matiz), Saturation (Saturação) e Lightness (Brilho, Luz e etc…).

A matiz é o grau da cor, sendo 0 ou 360 para o vermelho, 120 para o verde e 240 para o azul. Números entre cada valor determinam as diversas cores disponiveis. A saturação trabalha com porcentagem, sendo 100% para a cor real. O brilho ou luz também trabalha com valor em porcentagem, 0% é escuro (preto) e 100% é claro (branco).

Com esses valores a diversidade de cores é muito extensa.

Exemplo:

Quer saber mais sobre cores HSL, Clique aqui.

Até o próximo post!