Listes de 3 240 couleurs HSL.
- Couleurs HSL
- HSL Saturation 10 %
- HSL Saturation 20 %
- HSL Saturation 30 %
- HSL Saturation 40 %
- HSL Saturation 50 %
- HSL Saturation 60 %
- HSL Saturation 70 %
- HSL Saturation 80 %
- HSL Saturation 90 %
- HSL Saturation 100 %
- Couleurs HSL 360 saturées
- Couleurs HSL 36 saturées
- Couleurs HSL 12 saturées
- Couleurs HSL (12 couleurs)
- Conversion HSL en RVB
- Télécharger les nuanciers HSL
Couleurs HSL
L’espace colorimétrique HSL (Hue Saturation Lightness) ou HSV (Hue Saturation Value) ou traduit en français par TSL (Teinte Saturation Luminosité) utilise la roue des couleurs, la saturation et la luminosité.
– Teinte : le type de la couleur, par exemples : 0° Rouge, 60° Jaune, 120° Vert, 180° Cyan, 240° Bleu… La Teinte s’étend de 0 à 360°
– Saturation : la saturation est de 100% pour la couleur la plus intense (blanc) et de 0% pour l’absence de couleur (noir)
– Luminosité : 50% pour la couleur la plus saturée, assombrissement vers 0% (noir), éclaircissement vers 100% (blanc)
En HTML/CSS il s’écrit avec la formule : hsl(teinte, saturation%, luminosité%), par exemple <span style="color:hsl(0, 100%, 50%)">Rouge hsl(0, 100%, 50%)</span>. Le premier nombre la Teinte (Hue) définit l’angle dans la roue des couleurs, le deuxième la Saturation et le troisième la Luminosité (Lightness). Le modèle de couleurs HSL définit des couleurs dans l’espace de couleur sRGB
Le HSL (et le hsla) sont pris en compte par les navigateurs Internet.
Voir les explications pour le HSL sur Wikipedia ▷ Wikipédia – Teinte saturation luminosité
Roue des couleurs HSL
Roue des couleurs HSL
Exemple de roue des couleurs (ou cercle chromatique) : la luminosité à l’extérieure est à 70% (plus claire), au centre à 50% (saturation maximale), à l’intérieure à 30% (plus sombre). La luminosité à 0% de n’importe quelle couleur est le noir.
Couleurs HSL principales et secondaires
12 couleurs principales et secondaire + Blanc, Gris, Noir
Couleurs HSLA (avec canal alpha)
HSLA : comme pour le RVB (rgba) on peut ajouter une valeur d’opacité (de transparence) à la couleur avec un canal Alpha. Dans ce cas on écrit : hsl(teinte, saturation%, luminosité%, alpha). La valeur alpha (opacité) va de 1 (opaque) à 0 (transparent).
Exemple avec la couleur Rouge et un canal Alpha (hsla), avec codes Hexa et rgba
Les codes Hexa et rgba correspondant au hsla prennent également une valeur d’opacité (transparence). Le Hexa est sur 8 bits (au lieu de 6) et le rgba s’écrit avec le canal alpha.
TSL dans Photoshop
Dans Photoshop le Sélecteur de couleurs indique « TSL » mais en fait c’est du HSB (Hue Saturation Brightness) donc différent du HSL. Pour une couleur donnée, en HSL la Luminosité est à 50% et en HSB elle est à 100% (la Teinte et la Saturation sont identiques). Donc si vous convertissez une couleur RVB en TSL dans Photoshop vous obtiendrez sa valeur en HSB (et pas en HSL).
Capture de la version de Photoshop en anglais, on voit que TSL se nomme HSB (également dans Illustrator).
Sélecteur de couleurs Photoshop (anglais)
Donc dans Photoshop, lorsque qu’on convertit du RVB en TSL on obtient du HSB (ou HSV) avec une Luminosité de 100%, alors que le HSL à une Luminosité de 50 %.
HSL Saturation 10 %
360 couleurs HSL. La Teinte varie en vertical de 10 en 10%, la Saturation est à 10 %, la Luminosité varie en horizontal de 10 en 10%. Survoler les couleurs pour voir les codes HSL.
HSL Saturation 20 %
360 couleurs HSL. La Teinte varie en vertical de 10 en 10%, la Saturation est à 10 %, la Luminosité varie en horizontal de 10 en 10%. Survoler les couleurs pour voir les codes HSL.
HSL Saturation 30 %
360 couleurs HSL. La Teinte varie de 10 en 10, la Saturation est à 30 %, la Luminosité varie de 10 en 10%. Survoler les couleurs pour voir les codes HSL.
HSL Saturation 40 %
360 couleurs HSL. La Teinte varie de 10 en 10, la Saturation est à 40 %, la Luminosité varie de 10 en 10%. Survoler les couleurs pour voir les codes HSL.
HSL Saturation 50 %
360 couleurs HSL. La Teinte varie de 10 en 10, la Saturation est à 50 %, la Luminosité varie de 10 en 10%. Survoler les couleurs pour voir les codes HSL.
HSL Saturation 60 %
360 couleurs HSL. La Teinte varie de 10 en 10, la Saturation est à 60 %, la Luminosité varie de 10 en 10%. Survoler les couleurs pour voir les codes HSL.
HSL Saturation 70 %
360 couleurs HSL. La Teinte varie de 10 en 10, la Saturation est à 70 %, la Luminosité varie de 10 en 10%. Survoler les couleurs pour voir les codes HSL.
HSL Saturation 80 %
360 couleurs HSL. La Teinte varie de 10 en 10, la Saturation est à 80 %, la Luminosité varie de 10 en 10%. Survoler les couleurs pour voir les codes HSL.
HSL Saturation 90 %
360 couleurs HSL. La Teinte varie de 10 en 10, la Saturation est à 90 %, la Luminosité varie de 10 en 10%. Survoler les couleurs pour voir les codes HSL.
HSL Saturation 100 %
360 couleurs HSL. La Teinte varie de 10 en 10, la Saturation est à 100 %, la Luminosité varie de 10 en 10%. Survoler les couleurs pour voir les codes HSL.
Couleurs HSL 360 saturées
Liste de 360 couleurs HSL des couleurs saturées de 0° à 359° : Teinte de 1 en 1, Saturation 100 % et Luminosité 50 %
Couleurs HSL 36 saturées
Liste de 36 couleurs HSL saturées, Teinte de 10° en 10°, Saturation 100% et Luminosité 50%
Couleurs HSL 12 saturées
Liste des 12 couleurs HSL saturées (12 couleurs principales et secondaires saturées de 30 en 30°), Saturation 100% et Luminosité 50% (Rouge, Orange, Jaune, Jaune-vert, Vert, Bleu-vert, Cyan, Bleu ciel, Bleu, Violet, Magenta, Rose)
Couleurs HSL (12 couleurs)
Variation des 12 couleurs HSL principales et secondaires. Variation de la Teinte de 30°, Saturation et Luminosité de 10% (1188 couleurs).
Rouge
Couleur Rouge : Saturation en horizontal et Luminosité en vertical (99 couleurs).
Orange
Couleur Orange : Saturation en horizontal et Luminosité en vertical (99 couleurs).
Jaune
Couleur Jaune : Saturation en horizontal et Luminosité en vertical (99 couleurs).
Jaune-vert
Couleur Jaune-vert : Saturation en horizontal et Luminosité en vertical (99 couleurs).
Vert
Couleur Vert : Saturation en horizontal et Luminosité en vertical (99 couleurs).
Bleu-vert
Couleur Bleu-vert : Saturation en horizontal et Luminosité en vertical (99 couleurs).
Cyan
Couleur Cyan : Saturation en horizontal et Luminosité en vertical (99 couleurs).
Bleu ciel
Couleur Bleu ciel : Saturation en horizontal et Luminosité en vertical (99 couleurs).
Bleu
Couleur Bleu : Saturation en horizontal et Luminosité en vertical (99 couleurs).
Violet
Couleur Violet : Saturation en horizontal et Luminosité en vertical (99 couleurs).
Magenta
Couleur Magenta : Saturation en horizontal et Luminosité en vertical (99 couleurs).
Rose
Couleur Rose : Saturation en horizontal et Luminosité en vertical (99 couleurs).
Conversion HSL en RVB
Conversion des 3 240 couleurs HSL en RVB (sRVB). Avec codes Hexa et RVB.
HSL saturation 100 % en RVB
320 couleurs HSL avec une Saturation de 100 %, de 10 en 10%, avec codes Hexa et RVB
HSL saturation 90 % en RVB
324 couleurs HSL avec une Saturation de 90 %, de 10 en 10%, avec codes Hexa et RVB
HSL saturation 80 % en RVB
324 couleurs HSL avec une Saturation de 80 %, de 10 en 10%, avec codes Hexa et RVB
HSL saturation 70 % en RVB
324 couleurs HSL avec une Saturation de 70 %, de 10 en 10%, avec codes Hexa et RVB
HSL saturation 60 % en RVB
324 couleurs HSL avec une Saturation de 60 %, de 10 en 10%, avec codes Hexa et RVB
HSL saturation 50 % en RVB
324 couleurs HSL avec une Saturation de 50 %, de 10 en 10%, avec codes Hexa et RVB
HSL saturation 40 % en RVB
324 couleurs HSL avec une Saturation de 40 %, de 10 en 10%, avec codes Hexa et RVB
HSL saturation 30 % en RVB
324 couleurs HSL avec une Saturation de 30 %, de 10 en 10%, avec codes Hexa et RVB
HSL saturation 20 % en RVB
324 couleurs HSL avec une Saturation de 20 %, de 10 en 10%, avec codes Hexa et RVB
HSL saturation 10 % en RVB
324 couleurs HSL avec une Saturation de 10 %, de 10 en 10%, avec codes Hexa et RVB
Télécharger les nuanciers HSL
Nuancier des couleurs HSL
– Nuancier HSL contient 3 240 couleurs : variation de la Teinte de 10°, Saturation et Luminosité de 10%

Télécharger : Nuancier HSLTéléchargé 533 fois – 753,04 Ko
Le fichier .zip contient les fichiers .aco et .ase et l’image du nuancier.
3 Nuanciers HSL des couleurs saturées
– Nuancier HSL couleurs saturées : 360 couleurs saturées de 0 à 359° (Saturation 100% et Luminosité 50%)
– Nuancier HSL 36 couleurs saturées : la Teinte varie de 10° (Saturation 100% et Luminosité 50%)
– Nuancier HSL 12 couleurs saturées : 12 couleurs principales et secondaires saturées, Saturation 100% et Luminosité 50% (Rouge, Orange, Jaune, Jaune-vert, Vert, Bleu-vert, Cyan, Bleu ciel, Bleu, Violet, Magenta, Rose)
Nuancier HSL 360 couleurs saturées
Nuancier HSL 36 couleurs saturées
Nuancier HSL 12 couleurs saturées
Télécharger : Nuancier HSL couleurs saturéesTéléchargé 458 fois – 406,45 Ko
Le fichier .zip contient les fichiers .aco et .ase et les images des nuanciers.
13 Nuanciers HSL 12 couleurs
13 Nuanciers HSL 12 couleurs gratuits : 12 couleurs principales et secondaires. Pour chaque couleurs la Saturation et la Luminosité varient de 10%
– 1 nuancier HSL (global) des 12 couleurs : 1 188 couleurs (12 x 99)
– 12 nuanciers HSL individuels avec 99 couleurs chacun (11 x 9) : Rouge, Orange, Jaune, Jaune-vert, Vert, Bleu-vert, Cyan, Bleu ciel, Bleu, Violet, Magenta, Rose
Nuancier HSL 1188 couleurs (global)
12 Nuanciers HSL couleurs individuelles
Télécharger : Nuanciers HSL 12 couleursTéléchargé 443 fois – 935,33 Ko
Le fichier .zip contient les 13 fichiers .aco et .ase et les images des nuanciers.