Tous nous savons à quelle importance les couleurs revêtent-elles dans tout ce qui nous entoure, que ce soit dans un schéma de site web, une image, une vidéo ou n’importe quelle autre élément graphique. Encore une fois, la couleur est une expérience subjective résultant de l’interaction entre la lumière, l’oeil et le cerveau. Ajouter des couleurs au site web donne une nouvelle vie à l’ensemble du schéma et des éléments graphiques. Personne n’aime visiter des pages web avec que des couleurs blanche, noire et grise. Les couleurs rendent les éléments plus réels et attrayants pour l’oeil humain.
Non seulement théoriquement, mais la psychologie entraîne également son lot quand nous utilisons des couleurs sur les sites web. Il a été scientifiquement prouvé que un ensemble précis de couleurs déclenche des émotions particulières dans le cerveau humain, comme les couleurs d’automne telles que l’orange et le jaune représentant la joie ou le bonheur, le rouge pour les saisons festives, et le bleu perçu comme calme et de confiance. De plus, vous avez certainement remarqué que de nombreuses entreprises de nourriture utilisent souvent le rouge et le jaune sur leurs sites web, les entreprises pharmaceutiques tendent à utiliser le vert sur leurs sites, les entreprises de fitness parfois utilisent l’orange, et ainsi de suite.
Créer une interface utilisateur implique plusieurs choses, y compris les schémas de site web CSS, les éléments, la positionnement CSS, la navigation, le texte, etc. En outre, un autre facteur qui influence l’interface utilisateur est les couleurs HSL dans CSS. Les couleurs CSS jouent également un rôle important dans l’interface utilisateur, ce qui est l’un des facteurs que la plupart des gens évitent.
Non seulement les développeurs de sites web mais également les photographes professionnels et les éditeurs de vidéo utilisent beaucoup ce jeu de couleurs. Créer une image parfaite est leur métier, et pour cela, ils utilisent beaucoup de contraste de couleur. Par conséquent, choisir le jeu idéal de couleurs pour les éléments est extrêmement important.
Le CSS possède de nombreuses propriétés, telles que background-color, color, linear-gradient, etc., qui permettent aux utilisateurs d’ajouter ou remplir la couleur souhaitée dans les éléments. toutes ces propriétés aident également les utilisateurs à rendre les polices de caractères colorées ou à ajouter même des motifs de couleurs美丽s aux textes et éléments.
Toutes les propriétés de couleur CSS requièrent une méthode de couleur pour définir la couleur et ensuite remplir cette couleur dans l’élément spécifié. CSS dispose de quelques méthodes de couleur intégrées, telles que HSL, RGB, HSLA, Hexadecimal, etc. Encore, ces méthodes de couleur exigent une collection de valeurs entières dans différentes unités pour récupérer la couleur.
Bien que de nombreux blogs et tutoriels se concentrent sur les méthodes RGB et Hexadecimal, il existe une nécessité de couvrir les aspects fondamentaux de la méthode HSL. Dans ce blog, nous plongerons profondément dans le rôle des couleurs HSL dans CSS, couvrant tous les détails autour de la méthode HSL et comment elle diffère des autres méthodes.
Avant de sauter directement sur la méthode HSL, discutons les deux autres méthodes de couleur CSS – RGB et Hexadecimal, et pourquoi nous avons besoin des couleurs HSL dans CSS.
Difference Between RGB and Hex
La méthode RGB fonctionne en considérant que chaque couleur est une combinaison de Rouge, Vert et Bleu. Cette méthode exige trois valeurs décimales assignées dans la plage 0 – 255 dans la fonction rgb(). Ces valeurs spécifient le niveau d’intensité pour chacune des trois couleurs, représentant la valeur 0 comme la plus basse intensité et 255 comme la plus haute intensité.
Voici quelques exemples de combinaisons de couleurs RGB à différentes intensités :
Prenons un exemple pour comprendre le fonctionnement du système RGB.
.container {
background-color: rgb(0, 200, 120);
width: 100%;
height: 100px;
}Sortie :
Maintenant, passons au système hexadécimal. Il fonctionne également sur le principe que chaque couleur est une combinaison de Rouge, Vert et Bleu. Le système hexadécimal nécessite trois nombres hexadécimaux de deux caractères et commence par le signe ‘#’. Ces trois valeurs hexadécimales spécifient respectivement les niveaux d’intensité du Rouge, du Vert et du Bleu.
Comme il y a une involvement de valeurs hexadécimales, et que la base hexadécimale vaut entre 0 et 15, où les valeurs dans la gamme de 10 à 15 sont représentées par les lettres A à F. Par conséquent, 00 donne la couleur avec l’intensité la plus faible, et FF entraîne le niveau d’intensité le plus élevé.
Voici quelques couleurs hexadécimales courantes avec leurs codes :
Prenons un exemple pour comprendre le fonctionnement du système hexadécimal.
.container1{
background-color:#91D8E4;
}Sortie :
Travailler avec les systèmes RGB et hexadécimal est pratique et peut nous donner tout ce que nous voulons. Mais ce n’est pas vrai. Travailler avec ces deux systèmes n’est pas aussi facile que ça semble. Voyons comment.
Problèmes associés aux codes de couleur RGB et hexadécimaux.
L’un des problèmes significatifs que ces deux méthodes apportent est qu’elles ne sont pas intuitives. Cela signifie qu’elles ne fonctionnent pas selon la manière dont le cerveau humain reconnaît les couleurs. Lorsqu’une personne voit une couleur, le cerveau humain ne la segmente pas en couleurs Rouge, Vert et Bleu. Par conséquent, il devient difficile pour nous de reconnaître les couleurs à travers leurs numéros RGB et Hexadecimal ou décimal.
Parmi ces difficultés, une instance que les développeurs ou les testeurs peuvent rencontrer dans leur vie quotidienne est la nécessité de conversion RGB en Hexadécimal ou l’inverse pour une meilleure compréhension et une meilleure communication humaine.
Lors de la création d’une interface utilisateur, les designers UI et les développeurs Web ont besoin de plusieurs teintes de couleur particulière pour maintenir un thème constant dans l’interface. Par exemple, 30 teintes de bleu, 20 teintes de vert, 10 teintes d’orange, etc., selon les besoins. Cela peut créer de la confusion si nous utilisons des variables CSS pour stocker ces nombreuses variations de couleurs. Lorsque nous remarquons que les valeurs RGB de toutes ces variations sont indépendantes, les choses se compliquent.
Cependant, les défauts des méthodes RGB et Hexadecimal peuvent être corrigés avec les couleurs HSL en CSS. Maintenant, voyons le rôle des couleurs HSL en CSS en commençant la discussion par ce que signifie la méthode HSL, comment elle fonctionne et comment elle surmonte les insuffisances des méthodes RGB et Hexadecimal.
Qu’est-ce que les couleurs HSL ?
HSL signifie Vue, saturation et luminosité. En d’autres termes, HSL est composé de trois facteurs de mesure – Vue, saturation et luminosité. Comme les deux autres méthodes mentionnées ci-dessus, la méthode HSL fonctionne sur l’observation que chaque couleur est une combinaison de Rouge, Vert et Bleu.
Comme les couleurs primaires dans le format HSL sont le Rouge, le Vert et le Bleu, le cercle des couleurs RGB est le concept central derrière les couleurs HSL dans CSS.
Le cercle des couleurs RGB (Rouge Vert Bleu) représente principalement les couleurs remplies à l’intérieur d’un cercle. Ce cercle affiche les relations entre les couleurs primaires, secondaires et tertiaires. Cependant, il existe trois types de cercles des couleurs – RGB (Rouge Vert Bleu), CMY (Cyan Magenta Yellow) et RYB (Rouge Jaune Bleu).
Le graphique ci-dessus représente le cercle des couleurs RGB. Vous pouvez observer que le rouge est à 0 degrés, le vert à 120 degrés et le bleu à 240 degrés. Faisons un plus profond plongeon dans ces trois caractéristiques et comprenons ce qui se passe derrière les coulisses lorsque nous utilisons les couleurs HSL dans CSS.
Vue
La vue est la première valeur assignée dans cette méthode lors de l’utilisation des couleurs HSL dans CSS. C’est la mesure de l’angle de la couleur sur le cercle des couleurs. La valeur d’angle définie est calculée à partir de l’axe positive x en direction antihoraire, et la couleur à cet angle est retournée. Comme c’est la mesure d’un angle, sa valeur par défaut est en degrés. Cependant, cette méthode nous permet de définir des valeurs d’angle dans d’autres unités, y compris rad, grad et tour.
La valeur de l’unité d’angle se situe dans une plage de 0 à 360 degrés. Le rouge se trouve à 0 degrés, le vert à 120 degrés et le bleu à 240 degrés. Pour le rad, la plage des valeurs est de 0 à 6,28 rad. Les unités de valeur les plus couramment utilisées dans les couleurs HSL en CSS sont les valeurs en degrés.
Examinons un exemple pour comprendre le fonctionnement de la teinte.
div {
border: 2px solid;
height: 100px;
background-color: hsl(123deg, 39%, 49%);
}Sortie :
Bien que les valeurs d’angle soient limitées entre 0 et 360, elles peuvent accepter des valeurs inférieures à 0 degré et supérieures à 360 degrés. Lorsque la valeur est supérieure à 360, elle est convertie dans la plage en la soustrayant de 360. Dans le cas de valeurs inférieures à 0 ou de valeurs négatives, la valeur est additionnée à 360, et la valeur résultante est ensuite utilisée pour retrouver la couleur.
background-color: hsl(400deg, 39%, 49%);Sortie :
background-color: hsl(-120deg, 39%, 49%);Sortie :
<div class="container1">Container 1</div>
<div class="container2">Container 2</div>
div {
border: 2px solid;
height: 100px;
text-align: center;
font-size: 80px;
margin-bottom: 10px;
}
.container1 {
background-color: hsl(60, 39%, 49%);
}
.container2 {
background-color: hsl(420, 39%, 49%);
}Sortie :
Si nous considérons en termes de valeurs angulaires, alors 60 degrés et 420 degrés (420 – 360 = 60) valent les mêmes choses. Par conséquent, nous obtenons la même couleur de fond dans les deux conteneurs, comme observé dans l’exemple ci-dessus.
.container1 {
background-color: hsl(90, 39%, 49%);
}
.container2 {
background-color: hsl(-270, 39%, 49%);
}Sortie :
Ici, vous pouvez également observer que 90 degrés et -270 degrés donnent le même résultat pour la même raison que dans l’exemple précédent. 90 degrés et -270 degrés, les deux valeurs sont les mêmes si nous les prenons en termes de valeurs angulaires.
Maintenant, passons à la deuxième caractéristique de la méthode HSL, c’est-à-dire la saturation.
Saturation
La saturation définit le niveau de pureté de la couleur et dans quelle mesure la couleur sera saturée ou insaturée. En d’autres termes, la caractéristique de saturation manipule le niveau d’intensité de la couleur. La mesure de saturation accepte une valeur entière en pourcentage pour définir la saturation de la couleur.
Prenons un exemple pour comprendre le fonctionnement de la saturation.
.container{
background-color:hsl(60, 45%,49%);
}Sortie :
Si la valeur de la caractéristique de saturation est élevée, alors l’intensité de la couleur est également élevée, et la quantité de teinte grise dans cette couleur sera inférieure. Par conséquent, une valeur de 100% de la saturation donnera une couleur pure, une valeur de 50% donnera la moitié de la couleur et de la teinte grise, et 0% donnera la teinte grise complète.
.container1{
background-color:hsl(60, 0%,49%);
}
.container2{
background-color:hsl(420, 25%,49%);
}
.container3{
background-color:hsl(420, 50%,49%);
}
.container4{
background-color:hsl(420, 75%,49%);
}
.container5{
background-color:hsl(420, 100%,49%);
}Sortie :
Dans l’exemple ci-dessus, vous pouvez voir la différence que nous obtenons dans la couleur d’arrière-plan des conteneurs en augmentant la valeur de la caractéristique de saturation de 0% à 100%. À 0% de valeur, nous obtenons la couleur grise complète dans le conteneur 1, et comme la valeur augmente, l’intensité de la couleur augmente également. Enfin, l’intensité est la plus élevée à 100% dans le conteneur 5.
Comme la caractéristique de saturation accepte une valeur en pourcentage, la valeur obtenue se situe dans la gamme de 0% à 100%. De toute façon, l’utilisateur peut également passer des valeurs supérieures à 100% et inférieures à 0% dans la caractéristique de saturation.
Cependant, tout comme pour la caractéristique de teinte, il n’y a pas d’utilité à passer des valeurs en dehors des limites car si l’utilisateur passe une valeur supérieure à 100%, l’intensité de la couleur reste égale à 100%. Sur les valeurs inférieures à 0% (valeurs négatives), l’intensité reste égale à 0%.
.container1 {
background-color: hsl(60, 0%, 49%);
}
.container2 {
background-color: hsl(420, -25%, 49%);
}Sortie :
Ici, vous pouvez observer que nous avons assigné les valeurs 0% et -25% pour la caractéristique de saturation, et dans les deux conteneurs, nous obtenons le même arrière-plan de couleur.
.container1 {
background-color: hsl(60, 100%, 49%);
}
.container2 {
background-color: hsl(420, 200%, 49%);
}Sortie :
Dans cet exemple, nous avons initialisé les valeurs 100% et 200% pour la caractéristique de saturation, et pour ces deux valeurs différentes, nous obtenons le même arrière-plan de couleur dans les deux conteneurs.
Maintenant, il est temps pour la dernière caractéristique du méthode HSL utilisée dans les Couleurs HSL en CSS, c’est-à-dire la luminosité.
Luminosité
Comme le nom l’indique, la caractéristique de luminosité contrôle la quantité de lumière dans la couleur. En d’autres termes, la luminosité peut également être décrite comme la propriété qui contrôle combien cette couleur sera, claire ou sombre. Comme la caractéristique de saturation, la caractéristique de luminosité également exige une valeur entière en pourcentage.
Examinons un exemple pour comprendre le fonctionnement de la luminosité.
.container {
background-color: hsl(60, 39%, 49%);
}Sortie :
.container1 {
background-color: hsl(60, 39%, 0%);
color: white;
}
.container2 {
background-color: hsl(420, 39%, 25%);
}
.container3 {
background-color: hsl(420, 39%, 50%);
}
.container4 {
background-color: hsl(420, 39%, 75%);
}
.container5 {
background-color: hsl(420, 39%, 100%);
}
Sortie :
Ici, vous pouvez observer que à 0% de luminosité, le fond est noir de fond dans le Container 1, et comme la valeur de luminosité augmente, la luminosité de la couleur augmente, et à 100% de luminosité, la couleur est complète ; donc, le fond est blanc pur dans le Container 5.
Comme la caractéristique de saturation, la caractéristique de luminosité accepte des valeurs au-dessus de 100% et en-dessous de 0%. Cependant, les valeurs au-dessus de 100% fonctionnent de même que 100%, et les valeurs en-dessous de 0% (valeurs négatives) fonctionnent de même que 0%. Voyons cela en action.
.container1 {
background-color: hsl(60, 39%, 0%);
}
.container2 {
background-color: hsl(420, 39%, -25%);
}Sortie :
.container1 {
background-color: hsl(60, 39%, 100%);
}
.container2 {
background-color: hsl(420, 39%, 250%);
}Sortie :
Dans cet exemple, vous pouvez observer que, bien que nous avons assigné une valeur de luminosité de 100% dans le Container 1 et une valeur de 200% dans le Container 2, cela donne toujours le même résultat pour la couleur de fond.
Nous avons discuté des trois caractéristiques des couleurs HSL dans CSS, mais c’est pas fini. Une autre caractéristique sous les couleurs HSL dans CSS est « A », abréviation de « alpha ». C’est la quatrième caractéristique. La caractéristique alpha spécifie l’opacité de la couleur. En d’autres termes, la caractéristique alpha ne fait qu’ajuster le niveau de transparence de la couleur. Dans HSL, pour utiliser les caractéristiques alpha, la méthode HSLA est utilisée.
Contrairement aux autres caractéristiques des couleurs HSL dans CSS, qui requièrent une valeur composée d’unités, la caractéristique alpha n’exige pas de valeur avec unité. La caractéristique alpha demande une valeur unité-libre allant de 0 à 1. À 0, la couleur est invisible ou cachée ; à 1, la caractéristique alpha est à son maximum, et la couleur est complètement visible.
.container{
background-color:hsla(60, 39%,49%, 0);
}Sortie :
.container{
background-color:hsla(60, 39%,49%, 1);
}Sortie :
Ici, car nous avons assigné la caractéristique alpha avec une valeur de 1, la couleur de fond du conteneur apparaît, et nous pouvons démarrer la couleur de fond.
Demander une valeur unité-libre n’est pas le seul facteur qui distingue les caractéristiques alpha. Une caractéristique alpha peut accepter n’importe quelle valeur entre 0 et 1, même les valeurs décimales (0.1, 0.2, 0.01), ce qui ne fonctionne pas dans les autres caractéristiques des couleurs HSL dans CSS.
.container {
background-color: hsla(60, 39%, 49%, 0.5);
}Sortie :
Dans cet exemple, comme vous pouvez le constater, nous avons affecté une valeur de 0.5 (demi) à la caractéristique alpha. Par conséquent, le résultat est que nous obtenons une couleur de fond avec une transparence de moitié dans le conteneur. Non seulement les décimales à un chiffre, les caractéristiques alpha acceptent également des valeurs à deux chiffres. Cela offre un contrôle complet sur le niveau de transparence de la couleur.
Voici un exemple montrant cela.
.container {
background-color: hsla(60, 39%, 49%, 0.25);
}Sortie :
Dans cet exemple, nous avons transmis une valeur de 0.25, qui est une valeur à deux chiffres, à la caractéristique alpha.
Avantages de l’utilisation des couleurs HSL dans CSS
Les couleurs HSL (Hue, Saturation, Lightness) constituent une nouvelle addition relativement récente au module de couleur CSS, offrant une manière plus intuitive et flexible de spécifier les couleurs dans le développement web. Comparativement aux codes de couleur RGB traditionnels ou hexadécimaux, les couleurs HSL dans CSS offrent une série d’avantages pour les designers et les développeurs.
Dans cette section, nous explorerons plus en détail les avantages de l’utilisation de couleurs HSL dans CSS et discuterons de la manière dont ils peuvent être utilisés pour créer des designs visuels attrayants et accessibles pour les pages web et les applications.
En ce qui concerne l’application pratique, les couleurs HSL dans CSS sont considérées à plusieurs niveaux professionnels pour leur utilisation en raison de leurs avantages.
Il existe plusieurs avantages de l’utilisation de couleurs HSL, comme indiqué ci-dessous :
- Améliore l’ensemble du workflow en rendant celui-ci beaucoup plus fluide
- Extremement utile lorsque nous obtenions différentes couleurs en conservant la couleur de base standard
- Une méthode puissante et directe qui offre une possibilité vaste de couleurs.
- Fonctionne sur la façon pratique dont les gens observent les couleurs et est facile à apprendre et à lire rapidement
- Les couleurs générées par la méthode HSL sont clairement exprimées, et on peut facilement imaginer le résultat.
Un autre avantage significatif de l’utilisation des couleurs HSL dans CSS est qu’il fonctionne également comme une alternative à RGB et peut être facilement converti en RGB. Étant donné que les méthodes RGB et HSL exigent toutes deux une collection de valeurs numériques pour fonctionner, nous pouvons tirer parti de méthodes qui peuvent facilement convertir les valeurs numériques des couleurs HSL en valeurs fractionnaires pour la méthode RGB.
Pour rendre les choses encore plus faciles, plusieurs convertisseurs de couleurs en ligne peuvent convertir les méthodes de couleurs d’une méthode à l’autre. Tous ces avantages font des couleurs HSL en CSS une méthode privilégiée pour définir les couleurs dans les projets. Et il y a bien d’autres raisons pour lesquelles le nombre de développeurs qui choisissent d’utiliser les couleurs HSL en CSS plutôt que d’autres augmente chaque jour. Bien que la plupart des experts CSS préfèrent encore utiliser les méthodes HEX ou RGB plutôt que HSL, cette dernière gagne en attention de jour en jour.
Applications de l’utilisation des couleurs HSL en CSS
Les couleurs HSL en CSS constituent un moyen polyvalent et intuitif de spécifier les couleurs et ont de nombreuses applications dans le développement Web. Voici quelques-unes des principales applications de l’utilisation des couleurs HSL en CSS:
Couleurs teintées
Au niveau professionnel, pour créer un thème constant dans l’ensemble de l’interface, le thème du site Web est conçu en utilisant différentes nuances d’une couleur particulière dans les différentes sections de l’interface. La méthode HSL s’avère très pratique dans de tels scénarios.
Dans cet exemple, nous avons considéré deux schémas de mise en page de sites Web de base. Dans les deux cas, la section en-tête est remplie d’un arrière-plan de couleur, et la section de contenu a le même arrière-plan mais une teinte beaucoup plus claire. Pour obtenir cet effet, nous avons conservé une valeur de caractéristique de luminosité basse dans la section en-tête et haute dans la section de contenu.
En expérimentant avec la valeur de caractéristique de luminosité à différents niveaux, nous pouvons obtenir des teintes sombres et claires du même numéro de couleur pour utiliser dans les thèmes du site Web.
Couleurs de Sombra Foncé au survol
Vous avez peut-être remarqué que certains éléments de l’interface du site Web changent de couleur lorsque l’utilisateur passe son curseur dessus. Leur couleur passe d’une teinte claire à une teinte foncée. Dans ce cas, les couleurs HSL en CSS jouent un rôle pour fournir les teintes sombres et claires d’une couleur commune.
button {
padding: 10px;
border-radius: 20px;
background-color: hsl(240, 39%, 70%);
color: white;
font-size: 20px;
}
button:hover {
background-color: hsl(240, 39%, 50%);
cursor: pointer;
}
Ici, vous pouvez observer que sur le bouton supérieur, la couleur est de teinte claire, pour cela, nous avons conservé la valeur de caractéristique de luminosité à 70%. Et après le survol, la couleur du bouton change vers une teinte foncée, comme vous pouvez remarquer sur le bouton inférieur. Pour obtenir cet effet, nous avons affecté une valeur de 50% à la caractéristique de luminosité, qui est inférieure au bouton supérieur.
Teintes de Blanc
La plupart du temps, nous avons besoin d’utiliser le blanc comme couleur de police pour que le texte soit légèrement différent de l’interface du site Web global. Mais utiliser la même teinte de blanc pour chaque texte rend l’expérience utilisateur ennuyeuse. Pour éviter cela, nous pouvons utiliser différentes teintes de blanc pour rendre le texte populaire et le maintenir intéressant.
Les couleurs HSL dans CSS peuvent nous aider à obtenir différentes teintes de blanc. Nous pouvons ajouter différentes valeurs à la caractéristique de luminosité dans la méthode HSL pour obtenir les différentes teintes de blanc.
.container1 {
color: hsl(30, 49%, 100%);
}
.container2 {
color: hsl(30, 49%, 90%);
}
.container3 {
color: hsl(30, 49%, 95%);
}
.container4 {
color: hsl(30, 49%, 85%);
}Sortie :
Dans cet exemple, vous pouvez observer que dans tous les quatre conteneurs, le texte n’est pas de la blanche base. Nous avons utilisé différentes teintes de blanc pour lui donner un aspect passionnant et le garder blanc. Pour cela, nous avons manipulé la valeur de la caractéristique de luminosité pour la couleur du police.
Types de boutons
Les couleurs HSL dans CSS sont également très pratiques quand nous avons deux teintes différentes du même bleu pour les boutons. En assignant différentes teintes d’un même bleu, il est facile pour l’utilisateur de détecter rapidement lequel est le bouton primaire et lequel est le secondaire.
Dans la vie réelle, les teintes sombres sont utilisées pour les boutons primaires, et les teintes claires sont utilisées pour les secondaires. Pour obtenir les teintes claires et sombres d’un même bleu, nous passons des valeurs élevées et basses à la caractéristique de luminosité dans la méthode HSL.
Faisons-en l’expérience en considérant un exemple.
.primary {
color: white;
background-color: hsl(10, 49%, 55%);
}
.secondary {
background-color: hsl(10, 49%, 80%);
}Sortie :
Dans l’exemple ci-dessus, le bouton supérieur est le principal et le bouton inférieur est le secondaire. La teinte sombre est utilisée dans le bouton principal avec une valeur de luminosité basse, et la teinte claire est utilisée dans le bouton secondaire avec une valeur de luminosité haute.
Couleurs de thème sombre
L’utilisation d’un contraste de couleurs correct est essentiel dans l’interface utilisateur. En particulier lorsque l’utilisateur a activé le thème sombre sur le site Web. Selon des études effectuées en 2022, 81,9 % des utilisateurs utilisent le thème sombre sur leurs smartphones. à partir de cela, vous pouvez imaginer l’importance du contraste de couleur dans les interfaces utilisateur de thème sombre.
Conformément aux normes d’accessibilité de WCAG, un rapport de contraste de至少 4:5:1 pour le texte du corps contre des surfaces sombres devrait être maintenu. Et pour respecter cette règle, l’utilisation de couleurs saturées est évitée dans les thèmes sombres. L’utilisation de couleurs saturées augmente également la fatigue oculaire si elles sont utilisées avec un fond sombre.
Dans la figure ci-dessus, il est évident que l’on peut lire le texte avec une valeur de saturation faible plus facilement que le texte avec une valeur de saturation élevée. Par conséquent, il est toujours recommandé d’utiliser des couleurs non saturées contre des fond sombres.
Comment Choisir le Meilleur Spécificateur de Couleur
Les trois méthodes que nous avons discutées ont leurs avantages et désavantages. Il dépend de l’utilisation du cas qui spécifie le meilleur pour elle. Il n’y a pas de facteur commun sur lequel nous pouvons comparer toutes les trois spécifications de couleur, mais examinez-en chacune.
Hexadécimal
Si vous ne faites pas partie d’un domaine de conception et de projets pour usage personnel, alors vous pourriez avoir à utiliser la méthode hexadécimale pour spécifier les couleurs. De nombreux développeurs préfèrent la méthode hexadécimale en raison de sa simplicité, qui ne comprend pas trop de complexité, contrairement aux couleurs RGB et HSL dans CSS.
Copiez le code hexadécimal de la couleur de votre choix et embarquez-le dans votre programme. Cependant, des défis se posent lorsque nous devons manipuler l’opacité de la couleur. La méthode hexadécimale ne permet pas aux utilisateurs de contrôler l’opacité de la couleur.
RGB
Maintenant, pour savoir quand choisir la méthode RGB : cette méthode est pratique pour tous les développeurs et designers professionnels dans le domaine de l’édition et de la conception de photos. Une autre raison est que la méthode RGB est la spécification de couleur la plus communément utilisée dans de nombreuses logiciels de conception populaires, y compris CorelDraw, PhotoShop et Illustrator. Cependant, la méthode RGB échoue quand il s’agit de proposer différentes teintes de la même couleur sans devenir trop complexe.
HSL
Maintenant, considérez la méthode HSL. Les développeurs web professionnels et les concepteurs d’interfaces d’utilisateurs tendent à maintenir un thème commun dans l’ensemble de l’interface. Dans ce cas, l’utilisation de la Couleur HSL dans CSS devient une aide précieuse en raison de sa capacité à modifier la teinte de la couleur en changeant les valeurs des caractéristiques de saturation et de luminosité. Enfin, tout revient à l’affinité personnelle. Vous pouvez choisir n’importe laquelle des trois spécifications pour effectuer votre travail.
Compatibilité des navigateurs
Il n’y a pas d’utilité à spécifier des couleurs si les couleurs définies ne donnent pas la sortie souhaitée dans les navigateurs. Pour éviter une telle situation, la spécification de couleur utilisée dans la conception de l’interface utilisateur doit être compatible avec chaque navigateur.
Heureusement, le fonctionnement des Couleurs HSL dans CSS est entièrement indépendant des navigateurs. La méthode HSL est pleinement compatible avec les navigateurs. Donc, peu importe le navigateur que l’utilisateur utilise, il se retrouvera toujours sur la page web avec des couleurs correctement définies.
Cependant, vous pouvez effectuer des tests de compatibilité navigateur croisé pour s’assurer que les couleurs HSL dans le CSS donnent les résultats souhaités sur tous les navigateurs. Les plateformes de test de qualité continue (c’est-à-dire LambdaTest) vous aident à exécuter des tests de compatibilité navigateur croisé sur différents navigateurs réels, appareils et combinaisons d’OS. Elle vérifie si les couleurs CSS spécifiées fonctionnent correctement dans les navigateurs et les appareils.
Conclusion
Ce blog nous a enseigné le rôle des couleurs HSL dans le CSS et comment elles se différentient d’autres méthodes de couleur. Nous avons également discuté des applications des couleurs HSL dans le CSS et leurs avantages. Nous avons également appris comment les couleurs HSL dans le CSS offrent une plus grande flexibilité et précision lors de la spécification des couleurs dans le design web.
En utilisant les couleurs HSL dans le CSS, les designers peuvent avoir plus de contrôle sur la saturation et la luminosité des couleurs, ce qui donne un plus large éventail de teintes et de tons disponibles pour utilisation dans les sites web et les applications pour correspondre à l’identité ou à la vision esthétique d’une marque.
Les couleurs HSL dans le CSS permettent une meilleure accessibilité aux personnes ayant des capacités spéciales ; en simple ajustement de la luminosité et de la saturation des couleurs, en créant plus de contraste et de lisibilité pour le texte et d’autres éléments de design, ce qui rend le navigation et la compréhension du contenu plus facile pour les utilisateurs. Globalement, les couleurs HSL dans le CSS constituent une puissante arme pour les web designers et développeurs pour créer des schémas de couleurs vives et accessibles dans leurs designs web.
Source:
https://dzone.com/articles/create-cohesive-ux-using-hsl-colors-in-css