Les couleurs sont les composants les plus importants utilisés pour donner un meilleur aspect et une meilleure application à toute application ou site Web. Vous pouvez ajouter des couleurs aux éléments HTML en utilisant différentes propriétés CSS. Dans CSS, il existe trois méthodes avancées, telles que RVB, Code Hex et HSL, qui peuvent être utilisées pour spécifier des couleurs aux éléments HTML.

Cet article vous guidera sur les méthodes de couleur HSL et HSLA. Alors, plongeons-nous dans!

Quelles sont les couleurs HTML HSL?

Les couleurs HTML peuvent être utilisées en spécifiant la teinte, la saturation et la légèreté en utilisant la méthode HSL (). Le format de fonction que nous utilisons pour indiquer la couleur HSL est mentionné ci-dessous:

HSL (teinte, saturation, légèreté)

Discutons-les un par un!

• "teinte»: La teinte est la couleur de base de la roue chromatique. Il est sélectionné dans la roue en spécifiant le degré de 0 à 360 sur la roue chromatique. Par exemple, 0 indique le rouge, 120 représente le vert et 240 produit la couleur bleue.
• "saturation»: L'intensité des couleurs est connue sous le nom de saturation. C'est le pourcentage de valeur où 100% indique la couleur pure, 50% indique que la couleur a une nuance de gris de 50% et 0% représente le gris complet, ce qui signifie que nous ne pouvons voir aucune couleur.
• "légèreté»: La légèreté montre la quantité de lumière que nous voulons ajouter à la couleur. C'est également un pourcentage de valeur où 100% de légèreté définit le blanc, 0% définit la couleur noire et 50% définit la couleur normale.

Exemple

Dans le fichier html, ajoutez d'abord un div et ajoutez un titre, et un paragraphe à l'intérieur:

Nom du sujet: équipe

Nous sommes une équipe. Nous travaillons pour une mission commune.

Maintenant, nous allons styliser la manière suivante:

• Le "largeur«La valeur de la propriété du div est définie comme«100%".
• "hauteur" comme "200px".
• Attribuez le «Couleur de l'arrière plan«Propriété comme«HSL (233, 63%, 89%)», Où 233 indique Hue, 63% représente la saturation et 89% représente la légèreté.
• Le "taille de police«La valeur est définie comme«30px".
• Le "alignement de texte«La valeur de la propriété est définie comme«centre".

div
Largeur: 100%;
hauteur: 200px;
Color en arrière-plan: HSL (233, 63%, 89%);
taille de police: 30px;
Texte-aligne: Centre;

Maintenant, style le

Tag en lui offrant une couleur HSL. Pour appliquer la couleur au texte, nous utiliserons le «couleur«Valeur de la propriété comme«HSL (273, 99%, 28%)»:

H1
Couleur: HSL (273, 99%, 28%);

Attribuons une couleur HSL différente au

étiqueter. Pour ce faire, le «couleur«La valeur de la propriété est définie comme«HSL (12, 94%, 25%)»:

p
Couleur: HSL (12, 94%, 25%);

Voici un résultat des couleurs HSL supplémentaires:

Il y a une extension de la méthode de couleur HSL connue sous le nom de HSLA.

Quelles sont les couleurs HSLA?

Les couleurs HSLA peuvent être définies comme le modèle de couleur HSLA, car il s'agit d'une extension de HSL. La syntaxe de la fonction HSLA () est donnée comme suit:

HSLA (teinte, saturation, légèreté, alpha)

Ici, la valeur alpha a une plage entre «0.0" pour "1.0», Où 0.0 produit entièrement transparent et 1.0 produit entièrement opaque.

Exemple

Prenons un exemple pour appliquer les couleurs HSLA aux titres ajoutés:

HSLA (89, 100%, 64%, 0.5)

HSLA (89, 100%, 64%, 1)

Ensuite, appliquez les couleurs HSLA comme arrière-plan aux titres ajoutés avec "0.5" et "1”Valeurs alpha, respectivement. Notez que les valeurs des autres paramètres sont les mêmes:

.En-tête1
Color en arrière-plan: HSLA (89, 100%, 64%, 0.5);

.En-tête2
Color en arrière-plan: HSLA (89, 100%, 64%, 1);

L'image ci-dessous représente les deux mêmes couleurs avec différentes valeurs alpha:

Nous avons compilé les informations essentielles liées aux couleurs HTML HSL et HSLA.

Conclusion

En utilisant la méthode HSL (), les couleurs HTML HSL peuvent être appliquées en spécifiant la valeur de la teinte, de la saturation et de la légèreté. Cependant, HSLA est une extension de HSL avec le canal alpha. Ce modèle de couleur peut être appliqué à l'aide de la fonction HSLA (). Ce blog a expliqué ce que sont les couleurs HTML HSL et HSLA et comment les appliquer aux composants HTML.