# Couleur HSL : la façon la plus simple d’écrire les couleurs en CSS [Canonical HTML page](https://gradiently.design/fr/guide/hsl-colors) L’hex dit au navigateur quoi peindre. Le HSL vous dit ce qu’est la couleur : quelle teinte, quelle intensité, quelle clarté. C’est donc le format le plus simple à modifier à la main. ## The short version - Une couleur HSL décrit une couleur par sa teinte, sa saturation et sa luminosité plutôt que par des quantités de rouge, de vert et de bleu. - La teinte est un angle sur le cercle chromatique, de 0 à 360 degrés : 0 est le rouge, 120 le vert et 240 le bleu. - La saturation va de 0 % (gris) à 100 % (couleur pleine), et la luminosité de 0 % (noir) à 100 % (blanc), en passant par 50 % (la teinte pure). - Le CSS moderne l’écrit hsl(262 83% 58%), avec un alpha facultatif après une barre oblique, et tous les navigateurs utilisés le prennent en charge. - La luminosité HSL ne correspond pas à la clarté perçue : deux couleurs de même luminosité peuvent avoir des contrastes très différents. 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](https://gradiently.design/fr/guide/color-wheel), 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é. Teinte de 0 à 360 degrés: `linear-gradient(90deg, #ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%)` Toutes les teintes à 100 % de saturation et 50 % de luminosité. De gauche à droite : 0, 60, 120, 180, 240, 300 et retour à 360. 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é](https://gradiently.design/fr/guide/hue-saturation-brightness), qui explique aussi en quoi le HSB (ou TSV) des applis de design diffère du HSL du CSS. | Valeur | Plage | Effet d’une modification | | --- | --- | --- | | Teinte | 0 à 360 (degrés) | Fait tourner la couleur : du violet au bleu au sarcelle | | Saturation | 0 % à 100 % | Du gris à la couleur pleine | | Luminosité | 0 % à 100 % | Du noir, par la teinte pure à 50 %, jusqu’au blanc | | Alpha (facultatif) | 0 à 1, ou 0 % à 100 % | De l’invisible à l’opaque | Quatre nombres, chacun avec un seul rôle. Toute la force du format tient dans cette séparation. ## 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()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl) liste toutes les formes. ```css .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%); } ``` Les quatre donnent le même violet. La deuxième et la troisième ajoutent 80 % d’opacité. ## 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](https://gradiently.design/fr/guide/tints-tones-shades) qui vont clairement ensemble. Voici un violet en sept paliers, avec l’hex correspondant à chacun. - L 95% #efe8fd: #efe8fd - L 85% #d0b9f8: #d0b9f8 - L 70% #a273f2: #a273f2 - L 58% #7c3bed: #7c3bed - L 45% #5914d2: #5914d2 - L 30% #3c0d8c: #3c0d8c - L 15% #1e0746: #1e0746 hsl(262 83% L) à sept valeurs de luminosité. Les paliers clairs pour les fonds, le milieu pour les boutons, les paliers sombres pour le texte. 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](https://gradiently.design/fr/guide/css-custom-properties-theming). ```css :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; } ``` Chaque couleur de marque dérive de la même teinte : la gamme ne peut jamais sortir de la famille. ### 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](https://gradiently.design/fr/guide/css-color-mix). ## 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. - hsl(60 100% 50%): #ffff00 - hsl(120 100% 50%): #00ff00 - hsl(0 100% 50%): #ff0000 - hsl(240 100% 50%): #0000ff Les quatre ont 50 % de luminosité. Sur du blanc, le jaune a un rapport de contraste d’environ 1,07:1 et le bleu d’environ 8,6:1. 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](https://gradiently.design/fr/guide/color-contrast-accessibility). 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. ### Le HSL convient pour - Lire et modifier des couleurs à la main - Les teintes et nuances d’une seule couleur - Changer de thème rapidement avec des variables - Désaturer une couleur pour un état atténué ### Préférez OKLCH pour - Des gammes cohérentes entre teintes différentes - Un contraste prévisible à partir de la luminosité - Des dégradés à la clarté régulière - Les palettes générées des design systems [OKLCH](https://gradiently.design/fr/guide/oklch-explained) 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](https://gradiently.design/fr/guide/hex-to-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. ## FAQ ### Que signifie HSL ? Hue, saturation, lightness : teinte, saturation et luminosité. La teinte est l’angle sur le cercle chromatique, la saturation l’intensité de la couleur, et la luminosité sa proximité avec le noir ou le blanc. ### Comment écrire une couleur HSL en CSS ? Utilisez hsl(teinte saturation% luminosité%), par exemple hsl(262 83% 58%). Ajoutez la transparence après une barre oblique : `hsl(262 83% 58% / 0.5)`. ### hsla() est-il encore nécessaire ? Non. hsl() accepte une valeur alpha dans tous les navigateurs actuels : hsla() n’est conservé que pour l’ancien code. ### Quelle est la différence entre HSL et RGB ? Le RGB indique combien de lumière rouge, verte et bleue mélanger ; le HSL indique quelle teinte, quelle intensité et quelle clarté. Ils décrivent les mêmes couleurs, mais le HSL est plus facile à ajuster à la main. ### Pourquoi deux couleurs HSL de même luminosité paraissent-elles différentes ? La luminosité HSL ignore la sensibilité de l’œil à chaque teinte : à valeur égale, le jaune paraît bien plus clair que le bleu. OKLCH corrige cela avec une luminosité perceptuelle.