HSL à HEX

Comparez HSL à HEX

CSS 3 introduit une autre façon de définir la couleur en utilisant HSL (de l'anglais. Hue, Saturation, Lightness). est un modèle dans lequel la couleur est déterminée par trois paramètres: teinte, saturation et clarté. Jetons un coup d'œil à chaque paramètre séparément. Le principal avantage de HSL est la possibilité de spécifier les caractéristiques de couleur indépendamment les unes des autres. Cela vous ouvre d'énormes opportunités. Vous pouvez facilement rendre la couleur plus claire, plus foncée, plus saturée ou désaturée. Et tout en conservant son ombre. Ou vice versa - changez les teintes sans changer leur saturation ou leur luminosité. Souvent, les préprocesseurs sont utilisés pour utiliser de telles fonctionnalités, mais c'est possible sans elles. La fonction hsl () est utilisée pour spécifier les couleurs TSL. La fonction prend trois valeurs, séparées par une virgule: Hue, Saturation et Lightness. En modifiant les valeurs de saturation et de luminosité, vous pouvez obtenir des teintes adjacentes pour une couleur particulière.

Dans la plupart des cas, il est possible de reconnaître une couleur par un code hexadécimal, en ne tenant compte que des premiers chiffres des paires. Dans l'exemple ci-dessous, il est clair que la couleur est mélangée avec beaucoup de rouge, un peu de bleu et pas du tout de vert. Comprendre la couleur par code hexadécimal permet à un concepteur Web de naviguer plus rapidement dans le code de la page, et en plus, vous pouvez toujours impressionner vos collègues ou clients en disant Ah, quelle merveilleuse nuance de bordeaux. Vous pouvez également modifier facilement la luminosité, la teinte ou la saturation d'une couleur en modifiant uniquement son code hexadécimal. Dans le premier exemple ci-dessous, l'une des paires est modifiée par incréments de 10%, tandis que la luminosité des couleurs augmente. Dans le deuxième exemple, la luminosité augmente, mais la saturation diminue. Les valeurs RVB peuvent également être spécifiées à l'aide de valeurs de couleur hexadécimales (HEX) sous la forme: #RRGGBB, où RR (rouge), GG (vert) et BB (bleu) sont des valeurs hexadécimales de 00 à FF (le même que le décimal 0- 255). Le système hexadécimal, contrairement au système décimal, est basé, comme son nom l'indique, sur le nombre 16.