Couleur HSL : la façon la plus simple d’écrire les couleurs en CSS

Une couleur HSL s’écrit avec trois nombres : teinte, saturation et luminosité. En CSS, hsl(262 83% 58%) signifie une teinte de 262 degrés (violet), 83 % de saturation (vive) et 58 % de luminosité (un peu au-dessus du milieu). C’est le même violet que #7c3bed, mais vous pouvez le lire. Plus clair ? Augmentez le dernier nombre. Plus doux ? Baissez celui du milieu. Cette propriété, un sens par nombre, fait du HSL la façon la plus simple d’écrire des couleurs à la main.

Ce que signifient teinte, saturation et luminosité

La teinte est une position sur le cercle chromatique, exprimée en degrés. Le rouge est à 0 et à nouveau à 360, le jaune à 60, le vert à 120, le cyan à 180, le bleu à 240 et le magenta à 300. Modifier la teinte fait tourner la couleur tout en gardant son intensité.

La saturation est la quantité de couleur. À 0 %, toutes les teintes donnent le même gris ; à 100 %, la couleur est aussi vive que l’écran le permet. La luminosité va du noir à 0 % au blanc à 100 %, avec la teinte pure à 50 %. Le modèle est détaillé plus largement dans teinte, saturation et luminosité, qui explique aussi en quoi le HSB (ou TSV) des applis de design diffère du HSL du CSS.

La syntaxe HSL en CSS

Il existe deux écritures. La moderne sépare les valeurs par des espaces et place l’alpha après une barre oblique. L’ancienne utilise des virgules et une fonction hsla() distincte. Les navigateurs acceptent les deux, et hsl() prend désormais l’alpha aussi : hsla() n’est donc plus nécessaire. La référence MDN de hsl() liste toutes les formes.

.button {
  /* modern syntax */
  background: hsl(262 83% 58%);

  /* with 80% opacity */
  background: hsl(262 83% 58% / 0.8);

  /* older comma syntax, still valid */
  background: hsla(262, 83%, 58%, 0.8);

  /* hue can carry a unit */
  background: hsl(262deg 83% 58%);
}

Construire une gamme en changeant la luminosité

C’est là que le HSL prend tout son sens. Fixez la teinte et la saturation, faites varier la luminosité par paliers, et vous obtenez une famille de teintes et nuances qui vont clairement ensemble. Voici un violet en sept paliers, avec l’hex correspondant à chacun.

Associez cela aux propriétés personnalisées CSS et tout votre thème repose sur deux nombres. Stockez une fois la teinte et la saturation, puis choisissez une luminosité par rôle. Changez la variable de teinte et toute l’interface passe du violet au sarcelle : c’est l’idée derrière les variables CSS pour les thèmes.

:root {
  --brand-h: 262;
  --brand-s: 83%;

  --brand-50:  hsl(var(--brand-h) var(--brand-s) 95%);
  --brand-200: hsl(var(--brand-h) var(--brand-s) 85%);
  --brand-500: hsl(var(--brand-h) var(--brand-s) 58%);
  --brand-800: hsl(var(--brand-h) var(--brand-s) 30%);
}

/* a teal theme is one line */
.theme-teal {
  --brand-h: 175;
}

Couleurs relatives

Les navigateurs récents prennent aussi en charge la syntaxe des couleurs relatives, qui lit les composantes HSL de n’importe quelle couleur et permet de les ajuster. hsl(from var(--brand) h s calc(l + 15%)) donne une version plus claire de la couleur de marque, même si elle a été définie en hex. Vérifiez la prise en charge actuelle sur caniuse avant de vous y fier, et gardez une valeur de repli simple. Pour mélanger deux couleurs plutôt qu’en ajuster une, l’outil est color-mix() en CSS.

Là où le HSL vous trompe

Le HSL est un réarrangement du RGB, pas un modèle de la vision humaine. Sa luminosité est une simple moyenne du canal le plus fort et du plus faible : elle ignore que nos yeux perçoivent le jaune et le vert comme bien plus clairs que le bleu. Résultat : deux couleurs de luminosité HSL identique peuvent avoir une clarté perçue sans rapport.

Cela compte à deux endroits. D’abord, une gamme construite par paliers de luminosité HSL sera inégale d’une teinte à l’autre : un jaune à 50 % est bien trop clair pour du texte alors qu’un bleu à 50 % passe sans peine. Testez toujours les vraies paires avec un vérificateur de contraste. Ensuite, les dégradés et palettes générées qui font tourner la teinte à luminosité fixe s’éclaircissent et s’assombrissent en passant par le jaune et le bleu.

OKLCH garde la même idée accessible (luminosité, intensité, teinte) mais mesure la luminosité comme l’œil. Si vous démarrez un nouveau design system, c’est le meilleur choix par défaut ; si vous modifiez du CSS existant ou voulez un réglage rapide et lisible, le HSL reste parfaitement valable.

Convertir du HSL en hex et inversement

Vous aurez rarement à faire le calcul, car tous les outils de design et les outils de développement des navigateurs convertissent pour vous : cliquez sur une pastille de couleur dans les devtools de Chrome ou Firefox et faites défiler les formats. En coulisse, le HSL est d’abord converti en RGB, et le passage du RGB à l’hex est une simple arithmétique de paires, expliquée dans hex en RGB. Attendez-vous à de petites différences d’arrondi : hsl(262 83% 58%) tombe sur #7c3bed, à un pas du #7c3aed dont vous êtes peut-être parti, car des pourcentages entiers ne peuvent pas atteindre chacune des 16,7 millions de valeurs hex.

Si vous créez dans Gradiently, vous touchez rarement à ces nombres : un Mark porte sa propre palette, et avec Pro, le kit de marque stocke vos couleurs pour que le Designer les applique à votre place.