HSL para HEX

Compare HSL com HEX

CSS 3 apresenta outra maneira de definir cores usando HSL (do inglês. Hue, Saturation, Lightness). é um modelo em que a cor é determinada por três parâmetros: matiz, saturação e luminosidade. Vamos dar uma olhada em cada parâmetro separadamente. A principal vantagem do HSL é a capacidade de especificar características de cores independentemente umas das outras. Isso abre oportunidades tremendas para você. Você pode facilmente tornar a cor mais clara, mais escura, mais saturada ou dessaturada. E ao mesmo tempo mantendo sua sombra. Ou vice-versa - mude os matizes sem alterar sua saturação ou brilho. Freqüentemente, os pré-processadores são usados para usar esses recursos, mas é possível sem eles. A função hsl () é usada para especificar cores HSL. A função assume três valores, separados por uma vírgula: Matiz, Saturação e Luminosidade. Ao alterar os valores de saturação e brilho, você pode obter matizes adjacentes para uma cor específica.

Na maioria dos casos, é possível reconhecer uma cor por um código hexadecimal, levando em consideração apenas os primeiros dígitos dos pares. No exemplo abaixo, está claro que a cor é misturada com muito vermelho, um pouco de azul e nenhum verde. Entender cores por código hexadecimal permite que um web designer navegue no código da página mais rápido e, além disso, você sempre pode impressionar colegas ou clientes dizendo Ah, que tom maravilhoso de vinho. Você também pode alterar facilmente o brilho, o matiz ou a saturação de uma cor editando apenas seu código hexadecimal. No primeiro exemplo abaixo, um dos pares é alterado em etapas de 10%, enquanto o brilho da cor aumenta. No segundo exemplo, o brilho aumenta, mas a saturação diminui. Os valores RGB também podem ser especificados usando valores de cor hexadecimais (HEX) na forma: #RRGGBB, onde RR (vermelho), GG (verde) e BB (azul) são valores hexadecimais de 00 a FF (o mesmo que o decimal 0- 255). O sistema hexadecimal, em contraste com o sistema decimal, é baseado, como seu nome sugere, no número 16.