hsl()

Il est facile d'utiliser des couleurs complémentaires avec hsl(), car celles-ci sont positionnées à l'opposé du cercle de couleur utilisé par la teinte. Ainsi, si theta est l'angle de la teinte d'une couleur, on pourra obtenir la couleur complémentaire avec l'angle 180deg-theta.

teinte

Un angle (type <angle>) sur le cercle des couleurs. Lorsqu'il est écrit sans unité, il est interprété comme étant exprimé en degré. Par définition, on a red=0deg=360deg, et les autres couleurs distribuées sur le cercle avec green=120deg, blue=240deg, etc. Sa valeur étant un <angle>, elle boucle sur elle-même et on a donc -120deg=240deg, 480deg=120deg, -1turn=1turn, etc. Ce cercle chromatique pourra vous aider à trouver l'angle associé à une couleur donnée :

saturation

Un pourcentage (type <percentage>) où 100% indique une couleur complètement saturée et où 0% indique une couleur complètement désaturée, c'est-à-dire un niveau de gris.

luminosite

Un pourcentage (type <percentage>) où 100% fournit du blanc, où 0% fournit du noir, et où 50% fournit une couleur « normale ».

alpha Facultatif

A (alpha) peut être un nombre (type <number>) compris entre 0 et 1, ou un pourcentage (type <percentage>), où 1 correspond à 100% (opacité complète) et 0 à 0% (transparence complète).

La fonction hsl() fonctionne bien avec la fonction conic-gradient(), les deux travaillant avec des angles.

<div></div>

div {
  width: 100px;
  height: 100px;
  background: conic-gradient(
    hsl(360, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(0, 100%, 50%)
  );
  clip-path: circle(closest-side);
}

• La fonction hsla(), un synonyme historique pour cette fonction.
• Le type <color> qui permet de représenter n'importe quelle couleur en CSS.
• Un sélecteur de couleur HSL