Você pode atribuir um valor de HSL onde quer que você use cores na sua página web HTML5 e CSS3. O código para HSLcolors mostra como o esquema de HSL pode ser usado em sua página:

Este é um título
Este é um parágrafo

Para especificar uma cor usando o esquema de HSL, faça o seguinte:

1. Configure suas seletores como de costume.

   No CSS, criar um selector para cada elemento que você deseja colorir.

2. Adicionar a regra de cor.

   Aplicar um ou ambos, para cada selector.

3. Use a função de HSL.

   Usando HSL seguido por parênteses indica que você deseja calcular a cor usando a técnica HSL.

4. Indicar o matiz.

   Imagine uma roda de cores com vermelho na parte superior. A tonalidade é o ângulo (em graus) da cor que você quer escolher. Matiz deve ter um valor entre 0 e 360.

5. Determinar a saturação.

   Saturação é medido como uma porcentagem. Saturação de 0% indica uma escala de cinza (em algum lugar entre o preto e branco), enquanto a saturação de 100% é uma cor totalmente saturada, sem tons de cinza. Você precisa incluir o sinal de porcentagem, como parte do valor da saturação.

6. Especificar a leveza.

   Leveza também é indicada em percentagem, com 0% sendo completamente preta e 100% sendo completamente branco. Um valor de luminosidade de 50% irá determinar uma cor equilibrada entre o branco eo preto. valores de luminosidade também deve incluir o sinal de porcentagem.

O modelo HSL é uma adição relativamente recente para CSS, por isso não pode trabalhar com navegadores mais antigos, mas pode ser extremamente útil. HSL torna mais fácil de prever se as cores vai ficar bem juntos. Se você manter qualquer dois do HSL valoriza o mesmo e mudar o terceiro, as duas cores é provável que se encaixam bem.