Couleurs HSL

Que sont les couleurs HSL ?

Le modèle colorimétrique HSL (Hue, Saturation, Lightness) est une façon de décrire les couleurs qui repose sur trois caractéristiques :

• Teinte : Il s’agit de la couleur primaire. Détermine le type de couleur, sa position sur la roue chromatique (du rouge au violet). Il est mesuré en degrés (de 0 à 360).
• Saturation : Caractérise l’intensité d’une couleur, sa pureté. Il est mesuré en pourcentage (de 0% à 100%). Plus la saturation est élevée, plus la couleur est vive. Si saturation = 0 %, la couleur devient grise. Si saturation = 100%, la couleur sera aussi brillante (saturée) que possible.
• Luminosité : détermine le degré de clarté ou d’obscurité de la couleur. Il est mesuré en pourcentage (de 0% à 100%). 0% est noir, 100% est blanc et 50% de couleur sera aussi pure et saturée que possible.

Où la HSL est-elle utilisée ?

• Webdesign et graphisme : HSL est pratique pour créer des schémas de couleurs, ajuster la luminosité et la saturation des couleurs.
• Édition d’images : HSL est utilisé pour corriger les couleurs, modifier la teinte, la saturation et la luminosité des images.
• Montage vidéo : HSL vous aide à créer des effets de couleur, à modifier les couleurs d’objets individuels dans la vidéo.

HSL donne une sensation de couleur plus naturelle que d’autres modèles tels que RGB.

Avantages de HSL

• Intuitif : HSL est plus facile à comprendre et à utiliser que d’autres modèles de couleurs tels que RGB ou HEX.
• Facile à régler : Il est facile de modifier les paramètres de couleur individuels (teinte, saturation, luminosité) sans affecter les autres.
• Large gamme de couleurs : HSL vous permet de créer de nombreuses nuances et combinaisons de couleurs différentes.

Inconvénients de HSL

• Pas toujours cohérent avec la perception : La HSL ne reflète pas toujours avec précision la façon dont une personne perçoit la couleur.
• Peut différer sur différents appareils : la couleur HSL peut être légèrement différente sur différents écrans et appareils.
• Pas toujours pris en charge dans toutes les applications : Bien que HSL soit populaire dans la conception Web, tous les outils logiciels ne le prennent pas en charge.

Cas d’utilisation de HSL

• Conception Web : en CSS, vous pouvez utiliser HSL pour styliser des éléments individuels :

  Exemple

  Utilisation des couleurs HSL lors de la mise en forme d’une page Web :

  p {
    color: hsl(120, 100%, 50%);
  }

  Il sera vert (120°), avec une saturation maximale (100%) et une légèreté moyenne (50%).
• Création de dégradés : HSL vous permet de créer des transitions fluides entre différentes couleurs.
• Graphiques : dans les éditeurs graphiques comme Photoshop, vous pouvez ajuster les couleurs à l’aide de HSL pour créer les nuances que vous souhaitez.
• Création de filtres de couleur : HSL est utilisé pour créer divers filtres de couleur pour les photos et les vidéos.

Comment obtenez-vous la couleur HSL ?

Pour obtenir une couleur HSL, vous pouvez utiliser une calculatrice HSL.

Couleurs HSL

valeurs de couleur HSL sont prises en charge dans IE9+, Firefox, Chrome, Safari et dans Opera 10+.

HSL est l’abréviation de teinte, saturation et légèreté.

Les valeurs de couleur TSL sont spécifiées avec : hsl(hue, saturation, lightness).

Hue / Teinte

La teinte est un degré sur la roue chromatique de 0 à 360. 0 est rouge, 120 est vert, 240 est bleu.

Saturation / Saturation

La saturation est une valeur en pourcentage ; 0 % signifie une nuance de gris et 100 % est la couleur complète.

Lightness Légèreté

La légèreté est également un pourcentage ; 0% est noir, 100% est blanc.

Essayez-le vous-même

Les valeurs de couleur HSL sont prises en charge dans tous les principaux navigateurs.