3 façons de créer des palettes de couleurs avec CSS

Apprenez à créer des palettes de couleurs belles et efficaces pour vos projets Web à l'aide de CSS . Explorons 3 façons de créer des palettes de couleurs avec CSS et abordons les couleurs relatives avec les fonctions de couleurs LCH et LAB désormais expérimentales.

Choisir une palette de couleurs pour un site Web est une tâche difficile. Ce processus repose en grande partie sur la connaissance du design, de la théorie des couleurs et du contraste.

Vers le début d’un processus approfondi de conception Web, nous commençons généralement par un outil de conception comme Figma. Grâce à cet outil de conception, nous pouvons élaborer soigneusement nos conceptions, essayer différentes combinaisons de couleurs et éventuellement décider à quoi devrait ressembler le produit final.

La conception terminée peut ensuite être transformée en un prototype fonctionnel en utilisant différentes approches architecturales avec CSS et HTML. Ce didacticiel se concentre principalement sur les techniques CSS permettant de configurer des jeux de couleurs et de les appliquer pendant le processus de mise en œuvre de la conception.

Au fur et à mesure que nous parcourons le didacticiel, je vais vous montrer trois techniques CSS, dont deux sont reconnues par les professionnels, pour créer et implémenter une palette de couleurs. J'aborderai également les couleurs relatives avec les fonctions de couleur LCH et LAB désormais expérimentales.

Avec une compréhension de base des concepts de couleurs, vous pouvez utiliser n’importe laquelle de ces techniques avec ou sans plan de conception. Avant d’entrer dans les détails techniques, passons en revue quelques principes de base de conception Web et de coloration.

Comprendre la règle de conception 60-30-10

En règle générale, la règle séculaire du design 60-30-10 fonctionne très bien dans tous les domaines de la coloration et de la décoration. Le Web ne fait pas exception ; créer votre propre palette de couleurs est beaucoup plus facile lorsque vous commencez avec cette règle.

Chaque ensemble de chiffres de la règle 60-30-10 représente une épaisseur de couleur. Par souci de simplicité, appelons chacune d’elles respectivement couleurs primaires, secondaires et d’accentuation.

La couleur primaire couvre au maximum « l’espace » du design, c’est-à-dire environ 60 % de l’espace d’une page. Par exemple, il s’agit généralement de la couleur utilisée en arrière-plan.

Vient ensuite la couleur secondaire, qui occupe environ 30 % de la surface de conception. La plupart du temps, c'est la couleur des éléments de texte qui flotte sur la couleur primaire.

Enfin, la couleur d’accent met en valeur des détails de conception petits mais cruciaux, qui ne devraient représenter qu’environ 10 % de la zone de conception. Les boutons d’appel à l’action et les hyperliens sont les endroits les plus courants où une couleur d’accent est appliquée.

Cette approche de répartition des couleurs dans l'interface utilisateur nous évitera le mal de tête lié à l'utilisation de trop de couleurs dans nos conceptions et à l'obtention d'une palette de couleurs compliquée.

Explorer les concepts d’harmonie et de contraste des couleurs

L'harmonie des couleurs procure un sentiment d'ordre et d'équilibre dans une expérience visuelle. Lorsqu’un design n’est pas visuellement harmonieux, il laisse au spectateur un sentiment d’ennui ou de chaos.

En tant que partie intégrante de l’harmonie des couleurs, le contraste des couleurs mesure dans quelle mesure une couleur est lisible ou accessible lorsqu’elle est placée sur une autre. Les concepteurs doivent vérifier que le contraste des couleurs dans leurs créations est suffisamment élevé pour répondre aux normes d'accessibilité des couleurs avant de finaliser les couleurs de leur travail.

Les principes de la théorie des couleurs couvrent également certaines façons universelles de choisir des couleurs harmonieuses. Examinons-en deux, que nous utiliserons plus tard dans l'article pour générer une palette de couleurs.

Des couleurs complémentaires

Une roue chromatique organise les couleurs autour d’un cercle. Cela permet de représenter une couleur par la valeur de degré attribuée à sa position sur la roue.

Deux couleurs opposées sur la roue chromatique sont des couleurs complémentaires, comme le rouge et le cyan ou le bleu et le jaune. Vous pouvez calculer la correspondance complémentaire d'une teinte donnée en y ajoutant ou en soustrayant 180 degrés :

On dit que les couleurs complémentaires créent un contraste et une stabilité maximum, rendant ainsi les designs plus accessibles en termes de couleurs. Plus loin dans l’article, nous utiliserons des couleurs complémentaires pour générer la contrepartie contrastée pour une teinte donnée.

Couleurs analogues

Un ensemble de trois couleurs est analogue si elles apparaissent ensemble sur une roue chromatique en 12 parties, comme le jaune-vert, le jaune et le jaune-orange. La contrepartie analogue d’une teinte donnée est calculée en y ajoutant ou en soustrayant 30 degrés :

Les combinaisons de couleurs réalisées avec des couleurs analogues sont généralement apaisantes et agréables à l’œil. L’utilisation de ces types de combinaisons de couleurs nous évitera d’avoir à sélectionner manuellement des couleurs aléatoires dans la roue chromatique et à vérifier à nouveau leur harmonie.

Maintenant que nous avons une idée générale de la théorie des couleurs et du design, entrons dans le côté technique des choses, c'est-à-dire les différentes méthodes pour générer des palettes de couleurs avec CSS.

Pour une palette de couleurs pratique et flexible, nous allons utiliser le modèle de couleurs HSL. Si vous n'avez pas encore travaillé avec HSL, voici pourquoi vous devriez le faire .

Création de palettes de couleurs avec des variables CSS Sass

Bien que l'utilisation de propriétés personnalisées calc()soit aujourd'hui la méthode privilégiée pour travailler avec CSS, les développeurs familiers avec un préprocesseur tel que Sass peuvent utiliser cette technique à la place. Un préprocesseur CSS offre un contrôle plus granulaire sur les choses que le CSS natif, ce qui est probablement la meilleure raison d'utiliser cette méthode plutôt que d'autres.

Choisissons une teinte et générons une palette de couleurs en utilisant uniquement les variables Sass :

$hue: 150;

Sur la base de ce dont nous avons discuté ci-dessus concernant les couleurs complémentaires et analogues, écrivons trois fonctions qui prennent la $huevaleur et génèrent ses couleurs complémentaires et analogues. Il existe deux fonctions distinctes pour obtenir les voisins analogues gauche et droit respectifs d'une teinte donnée :

//
// Complementary hue can be obtained by adding or 
// substracting 180 from the specified hue amount.
//
@function complementary($hue) {
  @return $hue + 180; 
}
//
// The right analogous neighbor of a given hue 
// amount can be obtained by adding 30 to it.
//
@function rightAnalogous($hue) {
  @return $hue + 30;
}

//
// The left analogous neighbor of a given hue 
// amount can be obtained by subtracting 30 
// from it.
//
@function leftAnalogous($hue) {
  @return $hue - 30;
}

À l'aide de ces fonctions Sass, calculons les teintes complémentaires et analogues pour celles que $hue: 150;nous avons définies au début de cette section :

$hue: 150;
$hueAnalogousV1: rightAnalogous($hue);
$hueAnalogousV2: leftAnalogous($hue);
$hueComplement: complementary($hue);

Nous avons maintenant quatre valeurs de teinte différentes à utiliser, que nous pouvons utiliser pour créer nos couleurs primaires, secondaires et d'accentuation. En gardant à l’esprit l’application de chacune de ces valeurs de couleur, voici comment nous pouvons les déclarer en ajustant les paramètres HSL de saturation et de luminosité :

$primaryColor: hsl($hue 30% 90%);
$secondaryColor: hsl($hueComplement 25% 20%);
$accentColor: hsl($hueAnalogousV1 50% 50%);

Étant donné que la couleur primaire occupera la majorité de l’espace de l’écran, la couleur secondaire doit bien contraster avec elle. La teinte complémentaire est la mieux adaptée à cet effet, elle est donc utilisée comme couleur secondaire.

Notre couleur d'accent peut être n'importe laquelle des teintes analogues que nous avons créées ci-dessus, à condition que la saturation soit suffisamment élevée pour que l'accent reste pertinent pour les détails mis en évidence.

Enfin, nous aurons peut-être besoin de variations plus sombres de notre couleur primaire pour décorer les bordures et les séparateurs. De même, des variations plus claires de notre couleur secondaire peuvent être utilisées pour représenter des détails de texte moins importants comme les légendes et les étiquettes.

$primaryDark500: hsl($hue 20% 85%);
$primaryDark600: hsl($hue 20% 75%);
$secondaryLight500: hsl($hueComplement 5% 30%),
$secondaryLight900: hsl($hueComplement 5% 95%),

Ci-dessus, j'ai utilisé des nombres tels que 500, 600et 900pour représenter la luminosité et l'obscurité relatives d'une couleur particulière. Cela m'aide à rappeler ce que signifie une valeur de couleur particulière.

Dans le cas de composants mis en évidence comme les CTA, la couleur d'accent sera l'arrière-plan, donc planifier des couleurs qui contrastent bien avec la couleur d'accent serait une sage décision :

$accentColor: hsl($hueRightAnalogous 40% 40%);
$accentColorLight900: hsl($hueRightAnalogous 40% 95%);
$accentColor2: hsl($hueLeftAnalogous 40% 40%);
$accentColor2Light900: hsl($hueLeftAnalogous 40% 90%);

Mettons en pratique tout ce que nous avons couvert jusqu'à présent. Voici un exemple de page simple décorée de couleurs harmonieuses qui respectent toutes les directives d'accessibilité des couleurs et de contraste :

La palette se reconstruit et tout s’ajuste – presque comme par magie ! - une fois que vous avez modifié la valeur de $huedans l'exemple ci-dessus.

Si vous utilisez Google Chrome, voici un conseil : vous pouvez vérifier les problèmes de contraste dans les outils de développement Chrome en cliquant sur le menu kebab, en accédant à « Plus d'outils », puis en sélectionnant « Présentation CSS » :

Essayez-le sur la démo Codepen que nous venons de parcourir.

Création de palettes de couleurs à l'aide de variables CSS et HSL

Essentiellement, cette approche revient à supprimer les fonctionnalités Sass de la technique ci-dessus et à ajouter des variables CSS à la place . Pour les calculs mathématiques, on peut simplement utiliser la calc()fonction CSS. Cependant, cela ne nous donne pas l’approche DRY que nous avions avec Sass.

Cela dit, Sass peut être combiné avec cette technique sur le plan du développement, ce qui signifie que nous pouvons toujours profiter de ses avantages. Je garderai cet exemple sans Sass pour garder les choses simples, mais vous pouvez choisir de coupler Sass avec cette méthode comme exercice :

:root {
  --hue: 300; /* Let's try a different hue this time */
  --hueComplement: calc(var(--hue) + 180);
  --hueRightAnalogous: calc(var(--hue) + 30);
  --hueLeftAnalogous: calc(var(--hue) - 30);
}

Comme vous pouvez le voir ci-dessus, nous devons calculer manuellement les teintes complémentaires et analogues. Le reste du processus est à peu près le même que la dernière technique, sauf que les propriétés personnalisées CSS ( var(--hue)par exemple) sont utilisées à la place des variables Sass.

L'exemple suivant illustre comment les variables CSS peuvent être utilisées pour créer des variations pour les couleurs primaires et secondaires :

:root {
  ...
  --primaryDark500: hsl(var(--hue) 20% 85%);
  --primaryDark600: hsl(var(--hue) 20% 75%);
  --secondaryLight500: hsl(var(--hueComplement) 5% 30%);
  --secondaryLight900: hsl(var(--hueComplement) 5% 95%);
}

La même chose peut être faite pour générer des teintes offrant un meilleur contraste avec les couleurs d’accent :

:root {
  ...
  --accentV1: hsl(var(--hueRightAnalogous) 40% 40%);
  --accentV1Light900: color-mix(in hsl, var(--accentV1) 20%, white 80%);
  --accentV2: hsl(var(--hueLeftAnalogous) 40% 40%);
  --accentV2Light900: color-mix(in hsl, var(--accentV2) 20%, white 80%);
}

Vous trouverez ci-dessous à quoi ressemble notre démo une fois que nous avons rassemblé les étapes de la technique dont nous venons de parler. Vous pouvez essayer de redéfinir la valeur de teinte sur 150 et voir comment le résultat est exactement le même que l'exemple partagé dans la dernière technique :

Créer des palettes de couleurs avec color-mix()etcolor-contrast()

La plupart des navigateurs ne prennent pas encore en charge color-mix()les color-contrast()fonctions CSS4. Par conséquent, cette méthode est encore en phase d’évolution et pourrait ne pas être pleinement fonctionnelle. Cependant, étant donné que le Web évolue si rapidement, il peut être utile de se renseigner sur ces fonctions.

Utiliser la color-mix()fonction CSS pour créer une palette de couleurs

La color-mix()fonction est actuellement disponible en tant que fonctionnalité expérimentale sur Firefox uniquement. Vous pouvez l'activer en ouvrant la configuration du navigateur Firefox ( about:config), en recherchant layout.css.color-mix.enabled, puis en le définissant sur true.

Avec color-mix(), nous n'avons pas nécessairement besoin d'ajuster la saturation et la luminosité d'une couleur à chaque fois que nous avons besoin d'une nuance ou d'une teinte différente pour notre utilisation. Nous pouvons simplement mélanger du noir ou du blanc avec une couleur donnée pour y parvenir.

Pour comprendre rapidement comment cela fonctionne, voici un exemple simple de génération de vert en mélangeant du bleu avec du jaune :

:root {
  --neon-green: color-mix(in hsl, yellow 60%, blue);
}

Le premier paramètre color-mix()représente le profil de couleur et les deux autres représentent les couleurs à mélanger pour en générer une nouvelle.

Si nous implémentons cette fonction dans la dernière méthode que nous avons abordée, voici comment cela simplifiera les choses pour générer différentes variations :

:root{
  ...
  --primary: hsl(var(--hue) 25% 95%);
  --primaryDark500: color-mix(in hsl, var(--primary) 90%, black);
  --primaryLight500: color-mix(in hsl, var(--primary) 90%, white);
}

J'ai remplacé les ajustements HSL dans la méthode ci-dessus par color-mix()et voici ce que j'ai obtenu. Assurez-vous de voir ceci sur Firefox avec color-mix()le support activé :

En savoir plus dans la documentation MDN sur lacolor-mix() syntaxe et les paramètres.

Utilisation de la fonction CSS color-contrast() pour créer une palette de couleurs

La color-contrast()fonction n'est actuellement prise en charge que sur Safari 15 à 16.1 . Cela signifie que vous ne pouvez pas le tester sans problème sous Windows ou Linux, car Apple a arrêté de créer Safari pour Windows et Linux depuis longtemps.

Comme expliqué dans la documentation MDN, la color-contrast()fonction sélectionne la meilleure couleur contrastée pour une couleur donnée parmi une gamme de choix de couleurs. Voici un exemple pour montrer comment cela fonctionne :

:root{
  --accent: blue;
  --accentLight900: color-contrast(var(--accent) vs white, cyan, magenta, black);
}

Nous devrons attendre un peu jusqu'à ce que nous puissions combiner cette fonction avec nos techniques existantes pour décider de schémas de couleurs plus contrastés.

Explorer la syntaxe relative des couleurs en CSS avec LCH et LAB

Les capacités d'affichage de nos appareils ont évolué beaucoup plus rapidement que la prise en charge CSS des couleurs. La gamme ou gamme de couleurs d'un moniteur moderne est plus proche de l'espace colorimétrique P3 , qui couvre près de 87 % de toutes les couleurs de la surface réfléchie.

En comparaison, sRGB couvre moins de 70 % de cette gamme. Il n'est actuellement pas possible d'accéder aux couleurs au-delà du sRGB avec CSS.

La bonne nouvelle est que CSS Color Module Level 4 travaille activement à apporter la prise en charge des espaces colorimétriques lchenlab tant que fonctions CSS à nos navigateurs.

En termes simples, LAB et LCH sont des espaces colorimétriques avancés qui fournissent des couleurs plus précises et plus vives. Ces espaces colorimétriques fonctionnent presque comme l’œil humain pour percevoir et générer des couleurs.

Les deux espaces colorimétriques sont similaires à bien des égards. LCH correspond aux coordonnées polaires : luminosité, saturation et teinte. Pendant ce temps, LAB travaille avec des coordonnées cartésiennes : légèreté et deux axes chromatiques.

Contrairement au HSL et au RVB, LCH et LAB restituent toutes les couleurs avec la même luminosité. De même, toutes les couleurs ayant la même valeur chromatique apparaissent également saturées. De cette façon, nous pouvons garder nos couleurs plus liées les unes aux autres et créer des palettes de couleurs plus vives avec CSS.

Voici un exemple montrant comment nous pouvons obtenir des couleurs relatives avec l' lchespace colorimétrique introduit dans l'article State of CSS 2022. Cet exemple montre comment la lchfonction prendra une couleur hexadécimale de base et la changera en variation LCH avec des personnalisations de luminosité, de chrominance et de teinte :

:root {
  --primary: #eef;
  --primaryDarker: lch(from var(--primary) 90% c h);
  --primaryGrayish: lch(from var(--primary) l 50% h);
  --primaryYellowish: lch(from var(--primary) l c 77%);
}

Il sera fascinant de voir les variations de ces espaces combinées avec d'autres fonctionnalités expérimentales comme color-mixet color-contrastdans le futur.

Conclusion

Dans l'article ci-dessus, nous avons découvert les bases de l'harmonie et du contraste des couleurs, la règle 60-30-10 de répartition des couleurs et trois techniques pour créer des palettes de couleurs avec CSS. Nous avons également examiné rapidement l’avenir potentiel de la syntaxe des couleurs relatives en CSS.

Choisir soigneusement les couleurs pour une superbe palette de couleurs est généralement une décision de conception. En tant que développeur front-end qui crée souvent des interfaces dans des navigateurs plutôt que dans des outils de conception, ces techniques peuvent vous aider à mieux comprendre l'harmonie et le contraste des couleurs.

En plus de coder des interfaces plus intuitives et interactives, vous constaterez peut-être également qu’il est moins stressant de convertir la conception en code avec ces connaissances.

Source : https://blog.logrocket.com

#css