MEILLEUR SITE POUR LES DÉVELOPPEURS WEB
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript Comment faire Plus 🔍 ◑ RÉFÉRENCES EXERCICES

CSS Tutoriel

CSS MAISON CSS Introduction CSS Syntaxe CSS Sélecteurs CSS Comment faire CSS Commentaires CSS Couleurs
Couleurs RGB HEX HSL
CSS Arrière-plans
Couleur d'arrière-plan Image d'arrière-plan Répétition en arrière-plan Pièce jointe en arrière-plan Raccourci d'arrière-plan
CSS Frontières
Frontières Largeur de la bordure Couleur de la bordure Côtés de frontière Raccourci de bordure Bordures arrondies
CSS Marges
Marges Effondrement de la marge
CSS Remplissage CSS Hauteur/Largeur CSS Modèle de boîte CSS Plan
Aperçu Largeur du contour Couleur du contour Abréviation de plan Décalage du contour
CSS Texte
Couleur du texte Alignement du texte Décoration de texte Transformation de texte Espacement du texte Ombre de texte
CSS Polices
Famille de polices Font Web Safe Polices de secours Style de police Taille de la police Police Google Couplages de polices Raccourci de police
CSS Icônes CSS Liens CSS Listes CSS Tableaux
Bordures de tableau Taille du tableau Alignement des tableaux Style de tableau Tableau réactif
CSS Affichage CSS Largeur maximale CSS Position CSS z-index CSS Débordement CSS Flottant
Float Clear Float Exemples
Bloc CSS en ligne CSS Alignement CSS Combinateurs CSS Pseudo-classe CSS Pseudo-élément CSS Opacité CSS Barre de navigation
Barre de navigation Barre de navigation verticale Barre de navigation horizontale
CSS listes déroulantes CSS Galerie d'images CSS Sprites d'images CSS Sélecteurs d'attr CSS Formulaires CSS Compteurs CSS Mise en page du site Web CSS Unités CSS Spécificité CSS !important CSS Fonctions mathématiques

CSS avancé

CSS Coins arrondis CSS Images de bordure CSS Arrière-plans CSS Couleurs CSS Mots clés de couleur CSS Dégradés
Dégradés linéaires Dégradés radiaux Dégradés coniques
CSS Ombres
Effets d'ombre Ombre de boîte
CSS Effets de texte CSS Polices Web CSS Transformations 2D CSS Transformations 3D CSS Transitions CSS Animations CSS Info-bulles CSS Images de style CSS Réflexion d'image CSS Ajustement d'objet CSS Position de l'objet CSS Masquage CSS Boutons CSS Pagination CSS plusieurs colonnes CSS Interface utilisateur CSS Variables
La fonction var() Remplacement des variables Variables et JavaScript Variables dans les requêtes multimédia
CSS Box Sizing CSS Requêtes multimédias CSS MQ Exemples CSS Flexbox
CSS Flexbox CSS Flex Récipient CSS Flex Articles CSS Flex Sensible

CSS Adaptatif

RWD Introduction RWD Porte d'affichage RWD Vue Grille RWD Requêtes multimédias RWD Images RWD Vidéos RWD Cadres RWD Modèles

CSS Grid

Grid Introduction Grid Récipient Grid Article

CSS SASS

SASS Tutoriel

CSS Exemples

CSS Modèles CSS Exemples CSS Extraits CSS Quiz CSS Exercices CSS Certificat

CSS Références

CSS Référence CSS Sélecteurs CSS Fonctions CSS Audio de référence Polices CSS Web Safe CSS animable CSS Unités CSS Convertisseur PX-EM CSS Couleurs CSS Valeurs de couleur Valeurs CSS par défaut CSS Prise en charge du navigateur

Leçons CSS pour les débutants

En Ua Es De

CSS HSL Couleurs

❮ Prev Next ❯

HSL signifie hue (teinte), saturation (saturation) et lightness (luminosité).

HSL Valeur

En CSS, une couleur peut être spécifiée à l'aide de la teinte, de la saturation et de la luminosité (HSL) sous la forme :

hsl(hue, saturation, lightness)

La teinte est un degré sur le cercle chromatique, de 0 à 360. 0 correspond au rouge, 120 au vert et 240 au bleu.

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

La luminosité est également un pourcentage : 0 % correspond au noir, 50 % correspond à une couleur ni claire ni foncée, et 100 % correspond au blanc.

Essayez de mélanger les valeurs HSL ci-dessous :

 

HUE

0

SATURATION

100%

LIGHTNESS

50%

Exemple

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

Try it Yourself »

Saturation

La saturation peut être décrite comme l'intensité d'une couleur.

100 % correspond à une couleur pure, sans nuances de gris.

50 % correspond à 50 % de gris, mais la couleur reste visible.

0 % correspond à un gris complet, la couleur est invisible.

Exemple

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

Try it Yourself »

Lightness / Luminosité

La luminosité d'une couleur peut être décrite comme la quantité de lumière que vous souhaitez donner à la couleur, où 0 % signifie pas de lumière (noir), 50 % signifie 50 % de lumière (ni foncé ni clair) 100 % signifie une luminosité totale (blanc).

Exemple

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)

Try it Yourself »

Nuances de gris

Les nuances de gris sont souvent définies en définissant la teinte et la saturation sur 0, et en ajustant la luminosité de 0 % à 100 % pour obtenir des nuances plus foncées/plus claires :

Exemple

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

Try it Yourself »

Valeur HSLA

Les valeurs de couleur HSLA sont une extension des valeurs de couleur HSL avec un canal alpha, qui spécifie l'opacité d'une couleur.

Une valeur de couleur HSLA est spécifiée avec :

hsla(hue, saturation, lightness, alpha)

Le paramètre alpha est un nombre compris entre 0,0 (transparent) et 1,0 (pas transparent du tout) :

Essayez de mélanger les valeurs HSLA ci-dessous :

 

HUE

0

SATURATION

100%

LIGHTNESS

50%

ALPHA

0.5

Exemple

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)

Try it Yourself »

CSS — Couleurs HSL — Vidéo W3Schools

Cette vidéo est une introduction aux couleurs HSL en CSS.

Fait partie d'une série de tutoriels vidéo pour apprendre le CSS pour les débutants !

❮ Prev Next ❯