É muito difícil você não ter visto uma cor no formato hexadecimal: #AAAAAA, certo? Mas o que realmente significam esses números e letras? Qual a relação entre uma representação de cor Hexadecimal com a representação RGB, com a RGBA ou com a HSL/HSLA?
No CSS, é possível representar as cores de quatro formas diferentes. Named Colors, Hexadecimal, RGB/RGBA e HSL/HSLA. Vamos ver um pouquinho sobre cada uma delas?
Named Colors
É o formato mais fácil (e menos recomendado) para usar cores no CSS. É fácil porque basta você declarar no css: color: red (quem nunca fez isso pra debugar o CSS não é programador de verdade. E não é recomendado porque há apenas uma pequena parcela das cores que possuem nome (red, blue, olive, tomato, e por aí vai...).
Na verdade as cores nomeadas têm suporte de browser para browser (ou seja, em teoria, pode ser que um nome seja reconhecido em um navegador, mas não em outro). Mas a lista padrão amplamente aceita, chamada X11 - veja todas elas, contém 140 cores.
Partindo então para os formatos mais úteis em webdesign, vamos falar um pouco das cores Hexadecimal. Mas antes, o formato tradicional: o RGB
RGB - Red, Green, Blue
O RGB significa exatamente o que seu nome quer dizer: balanço entre Vermelho, Verde e Azul. Então, para representarmos as cores no formato RGB, precisamos necessariamente passar 3 parâmetros, cada um representando a porcentagem (sim, é possível passar porcentagem no RGB) ou um valor de 0 a 255.
Assim, uma típica representação RGB seria:
color: rgb(120,100,50)
color: rgb(80%,10%,20%)
Não é difícil então calcular quantas cores são representáveis com esse formato: 256 * 256 * 256 = 16.7 milhões.
E o RGBA?
O formato RGBA nada mais é que o RGB adicionando-se um alpha, que representa a porcentagem de transparência/opacidade.
O parâmetro alpha deve ser representado entre 0 (totalmente transparente) e 1 (totalmente opaco).
Exemplo:
background-color: rgba(100, 255, 200, 0.3)
Hexadecimal
Não há dúvidas de que o formado de cores hexadecimal é o mais popular entre os programadores. Isso porque é uma sintaxe curta, simples e relativamente fácil de aprender. Basta um # seguido de 6 caracteres hexadecimais.
E ao contrário do que pode parecer o nome hexadecimal não tem a ver com o fato de a representação conter 6 caracteres. Na verdade, hexadecimal decorre da utilização de contagem base-16 (ao contrário da tradicional base-10) para representar 3 números.
Eu explico: O formato HEX é apenas uma outra forma de representar o formato RGB. Cada par de números do HEX representa um canal de cor: #RRGGBB. Os dois primeiros números representam o vermelho (red), os dois do meio representam o verde (green) e os dois últimos, o azul (blue).
E porque hexadecimal? Porque é uma forma de conseguirmos representar de forma mais sucinta os 256 números do intervalo de 0 a 255.
Veja que se fossemos utilizar base-10 (decimal), para cada par de dígitos conseguiríamos representar 100 números. (0 a 99). Quando a gente usa hexadecimal (0, 1, 2,3 ,4, 5, 6, 7, 8, 9, A, B, C, D, E, F), conseguimos representar com dois dígitos 256 cores, que é exatamente o que precisamos!
HSL
O formato HSL é menos popular, mas pode ser mais interessante para utilizar no nosso código - e eu vou explicar o porquê.
Primeiro, o princípio: HSL significa Hue, Saturation, Lightness. Hue a gente pode traduzir para "tonalidade" ou "matiz" de cor.
Não é difícil: mudando o Hue você muda a cor em si. Mudando saturação, você muda se quer mais preto e branco ou mais colorido (0% a 100%). Mudando a luminosidade (de 0% a 100%, você deixa a cor mais clara ou mais escura.
O Hue, que é o primeiro canal, nada mais é do que um círculo em que cada grau é uma tonalidade diferente (0 a 360). Note que o valor 0 é igual ao 360, que é igual ao 720 e por aí vai... é como se você estivesse dando voltas em um círculo de cores
E esse sistema talvez seja mais fácil para, por exemplo, fazer um botão com hover. Basta mudar o terceiro canal, de luminosidade, e voilá, você tem a mesma cor em um tom mais claro ou escuro. Também é fácil saber qual a cor está exatamente ao contrário do espectro (basta adicionar ou subtrair 180).
background-color: hsl(170, 50%, 45%);
HSLA
Da mesma forma que temos o RGBA, temos o HSLA. Nada mais é do que adicionarmos o canal alpha ao sistema HSL. O Alpha do HSL assim como o RGB vai de 0 a 1.
Veja Mais
Um dos principais recursos para aprender cores na web está aqui. Dá uma olhada!