Un nuancier fonctionnel est un nuancier dont les couleurs voisines sur l’échelle des gris du nuancier ont des valeurs de gris régulièrement étagées. Les valeurs dont il est ici question désignent le degré de luminosité d’une couleur sur une échelle de niveaux de gris allant du noir (luminosité minimale) au blanc (luminosité maximale).
Cette qualité permet de garantir une bonne lisibilité quelque soient les couleurs du nuancier utilisées en premier plan et en arrière plan (… pour le fond et la forme). Un tel nuancier permet d’optimiser l’usage des couleurs choisies sur les déclinaisons des produits de communication imprimés et hébergés. En effet chaque couleur est utilisable sur toute les autres sans perte de contraste.
De plus, quelque soit les problèmes de discrimination chromatique auxquels sont confrontés les lecteurs, un bon étagement de la luminosité des couleurs permet à tous de mieux distinguer forme et fond.
De plus, nous le verrons dans la pratique, construire un nuancier en veillant à l’étagement des valeurs génère des palettes chromatiques assez harmonieuses, pour peu que le nombre des valeurs utilisées soit inférieur à 5.
Remarques préliminaires
Le problème de l’étagement des valeurs (ou degrés de luminosité) des couleurs n’est pas facile à résoudre. Ce problème est directement lié à la manière de convertir les couleurs en niveaux de gris. Il est également lié à la manière de paramétrer numériquement la couleur (CMJN, RGB, HSL, etc.).
Le vocabulaire de la couleur est très spécifique. Les mêmes mots ne recouvrent pas toujours les mêmes concepts suivant qu’ils sont en lien avec la photographie, la peinture, le design graphique, la science de la colorimétrie, etc. De plus, les traductions de l’anglais (en particulier les traductions automatiques) ne donnent pas toujours des résultats très satisfaisants en français… bref, nous abordons là un sujet particulièrement délicat à cerner.
Si vous souhaitez approfondir la question, je vous invite alors à consulter les sites suivants :
- http://pourpre.com/fr/nuanciers/
- http://pourpre.com/fr/glossaire
- http://www.blog-couleur.com/?-Notions-de-colorimetrie-
Dans ce cours, nous utiliserons alternativement les termes “nuancier” et “palette de couleurs” ou “palettes chromatiques”. Ces 3 termes désignent tous une suite de couleurs choisies pour s’associer dans un contexte précis.
L’application en ligne Coolors
L’application Coolors est d’un usage assez intuitif. Dotée de fonctionnalités de plus en plus nombreuses au fil des versions, elle permet notamment de construire (avec un minimum de méthode) des nuanciers fonctionnels.
La création d’une nouvelle palette de 5 couleurs (nombre des couleurs affichées par défaut) s’effectue en cliquant sur la barre d’espace. Vous pouvez choisir le type d’accord coloré que vous souhaitez générer.
Quand des couleurs vous plaisent et que vous souhaitez les conserver, verrouillez-les en cliquant sur le cadenas affiché au survol de la couleur par le curseur (en bas de la liste des icônes). Appuyez de nouveau sur la barre d’espace pour générer d’autres couleurs. Modifiez la méthode de génération des couleurs si vous le jugez nécessaire (la méthode d’origine es “Auto”).
Concernant les différents types d’accords colorés, je vous renvoie vers les sites et vidéos traitants de la théorie des couleurs.
- https://www.pourpasunrond.fr/theorie-couleurs/
- https://99designs.fr/blog/conseils-design/la-theorie-des-couleurs/
Évaluation du niveau de gris d’une couleur dans Coolors
La théorie des couleurs ne suffit pas
Dans la pratique la théorie des couleurs ne suffit pas pour créer des nuanciers fonctionnels. Passez votre écran en noir et blanc sur les palettes générées avec les outils qui se réclament de cette théorie, vous constaterez que plusieurs couleurs ont des degrés de luminosité (valeurs) très proches. Ces couleurs sont inutilisables l’une sur l’autre.
L’étagement des valeurs est primordial
Pour évaluer le degré de luminosité (la valeur) des couleurs, j’opte pour la conversion en niveaux de gris par le biais du filtre “Achromatopsia”. Je choisis de lire le pourcentage de noir affiché en CMJN pour évaluer le niveau de gris correspondant.
Dans Coolors, le nom des couleurs est affiché par défaut en mode hexadécimal. Cela ne nous renseigne pas sur le degré de luminosité correspondant en pourcentage de noir (la valeur de la couleur ramenée en niveaux de gris).
En utilisant le filtre Achromatopsia, j’obtiens une conversion en niveaux de gris des couleurs de la palette.
J’applique le filtre pour accéder au nuancier en gris. Il est alors possible de convertir les noms hexadécimaux en pourcentages CMJN. Cela s’effectue en cliquant sur le nom de la couleur (affichée en hexadécimal) puis en choisissant “CMJN” dans la liste des affichages proposés. Dès lors, un clic sur tous les noms hexadécimaux des gris affichera leur équivalent CMJN et donc le pourcentage de noir correspondant.
Un moyen plus rapide de parvenir à lire le pourcentage de noir CMJN des différents gris de la palette convertie consiste à paramétrer en CMJN l’information secondaire placée sous le nom hexadécimal de la couleur.
Pour revenir à la palette des couleurs, utilisez le bouton de retour en arrière (annulation de la dernière opération).
Exemples de nuanciers fonctionnels créés avec Coolors
Les nuanciers fonctionnels présentés maintenant ont chacun leurs particularités. Vous serez attentifs aux couleurs positionnées aux extrémités de chaque nuancier (la couleur la plus foncée et la couleur la plus claire). En effet, il peut s’agir du noir et du blanc mais aussi de couleurs très foncées ou très claires.
Vous remarquerez l’usage de gris colorés (avec pourcentages CMJ) ou neutres (sans pourcentages CMJ) au sein de certaines palettes de couleurs. Le gris s’accorde avec toutes les couleurs et les nuanciers construits avec du gris apportent souvent une note de sérieux à un ensemble de couleurs.
Nuanciers de 3 couleurs
L’étagement régulier des nuanciers de 3 couleurs varie de 50% à 40% suivant la valeur de la couleur la plus foncée et celle de la valeur la plus claire. Avec de tels écarts entre les valeurs des couleurs, on dispose d’une marge de manœuvre importante sans grand risque d’altérer la lisibilité des textes.
Exemples de nuanciers fonctionnels de 3 couleurs et sauvegarde des URL
Les nuanciers fonctionnels ci-dessous intègrent une couleur très foncée (90%) et une couleur très claire (10%). Le premier nuancier présente un accord de teintes analogues (très proches l’une de l’autre sur le cercle chromatique). Le second présente un accord de teintes complémentaires (opposées l’une à l’autre sur le cercle chromatique).
➜ Vous noterez que les URL des nuanciers créés avec Coolors mentionnent les valeurs hexadécimales des couleurs choisies. Sauvegarder l’URL c’est sauvegarder la palette des couleurs.
Nuanciers de 4 couleurs
L’étagement régulier des nuanciers de 4 couleurs varie de 26% à 34% suivant la valeur de la couleur la plus foncée et celle de la valeur la plus claire.
Exemples de nuanciers fonctionnels de 4 couleurs et pourcentages CMJN
Les nuanciers fonctionnels ci-dessous intègrent une couleur très foncée (95%) et une couleur très claire (5%) ainsi qu’un gris coloré à 35%.
➜ Pour voir les différentes notations des couleurs du nuancier, cliquez sur le bouton “View”. Sélectionnez ensuite la couleur voulue dans la fenêtres ”View palette”. Vous pourrez ainsi noter les pourcentages CMJN des couleurs sélectionnées.
Nuanciers de 5 couleurs
L’étagement régulier des nuanciers de 5 couleurs varie de 20% à 25% suivant la valeur de la couleur la plus foncée et celle de la valeur la plus claire.
Exemples de nuanciers fonctionnels de 5 couleurs
Les nuanciers fonctionnels ci-dessous intègrent le noir et le blanc ainsi qu’un gris neutre de 50% (#808080).
Astuces pratiques avec Coolors
Partir de nuanciers de gris étagés pour créer des nuanciers fonctionnels
Pour contrôler l’étagement des valeurs des couleurs des nuanciers fonctionnels, nous avons besoin de repérer quelques valeurs clés en pourcentage de noir. Vous trouverez ci-dessous la listes des valeurs hexadécimales correspondantes
Nuanciers de gris avec noir et blanc
5 valeurs régulièrement étagées
- 100% ⇄ #000000
- 75% ⇄ #404040
- 50% ⇄ #808080 ou #7f7f7f
- 25% ⇄ #bfbfbf
- 0% ⇄ #ffffff
Différence de valeur entre 2 couleurs voisines : 25%
4 valeurs régulièrement étagées
- 100% ⇄ #000000
- 67% ⇄ #555555
- 33% ⇄ #ababab
- 0% ⇄ #ffffff
Différence de valeur entre 2 couleurs voisines : 33% ou 34%
3 valeurs régulièrement étagées
- 100% ⇄ #000000
- 50% ⇄ #808080 ou #7f7f7f
- 0% ⇄ #ffffff
Différence de valeur entre 2 couleurs voisines : 50%
Nuanciers de gris avec couleur très foncée et couleur très claire
5 valeurs régulièrement étagées
- 90% ⇄ #191919
- 70% ⇄ #4d4d4d
- 50% ⇄ #808080 ou #7f7f7f
- 30% ⇄ #b3b3b3
- 10% ⇄ #e6e6e6 ou #e5e5e5
Différence de valeur entre 2 couleurs voisines : 20%
- 95% ⇄ #0d0d0d
- 63% ⇄ #5e5e5e
- 50% ⇄ #808080 ou #7f7f7f
- 27% ⇄ #bababa
- 5% ⇄ #f2f2f2
Différence de valeur entre 2 couleurs voisines : 22% ou 23%
4 valeurs régulièrement étagées
- 90% ⇄ #191919
- 63% ⇄ #5e5e5e
- 37% ⇄ #a1a1a1
- 10% ⇄ #e6e6e6 ou #e5e5e5
Différence de valeur entre 2 couleurs voisines : 26% ou 27%
- 95% ⇄ #0d0d0d
- 65% ⇄ #545454
- 35% ⇄ #a6a6a6
- 5% ⇄ #f2f2f2
Différence de valeur entre 2 couleurs voisines : 30%
3 valeurs régulièrement étagées
- 90% ⇄ #191919
- 50% ⇄ #808080 ou #7f7f7f
- 10% ⇄ #e6e6e6 ou #e5e5e5
Différence de valeur entre 2 couleurs voisines : 40%
- 95% ⇄ #0d0d0d
- 50% ⇄ #808080 ou #7f7f7f
- 5% ⇄ #f2f2f2
Différence de valeur entre 2 couleurs voisines : 45%
Ces échelles de gris régulièrement étagés sont un excellent point de départ pour construire rapidement un nuancier fonctionnel (surtout s’il doit contenir un gris neutre).
➜ Pour conserver une couleur en cours de recherche, cliquez sur cadenas présent en bas de la liste d’icônes affichées au survol de chaque couleur.
➜ Coolors permet de choisir le type d’accord de teintes à mettre en œuvre lors de la production de couleurs aléatoires (couleurs non verrouillées).
Attention : les nuanciers fonctionnels obtenus avec Coolors doivent être vérifiés en convertissant les images de ces nuanciers en niveau de gris. Des rectifications sont parfois nécessaires 😉
Les nuanciers pour le Web
➜ La question de l’accessibilité est primordiale en design pour le Web. Il existe de nombreux outils de contrôle du contraste de la couleur du texte sur la couleur du fond (comme contrast-ratio.com ou colorable, par exemple).
Des générateurs de nuanciers conformes aux normes d’accessibilité du Web sont disponibles en ligne (comme hello-color ou clrs.cc par exemple). Ces 2 outils proposent seulement des palettes de 2 couleurs (une foncée et une claire), tellement les normes sont contraignantes !
Je vous propose cependant une palette de couleurs moyennes permettant de créer des nuanciers fonctionnels de 3 couleurs (dont le noir et le blanc) respectant la norme d’accessibilité AA (pour toutes les tailles de texte).
Quelques sites permettent de vérifier la compatibilité d’un nuancier entier avec les normes d’accessibilité en vigueur. En voici deux (le premier est plus intuitif à utiliser que le second) :