En tant que graphiste/designer, je suis souvent interpelé sur la symbolique des couleurs et leur interprétation dans les applications.  Voici donc un court voyage dans le monde de l’arc en ciel.

 

La couleur comme référent culturel

Chez Microsoft, nous avons à cœur de promouvoir des interfaces compréhensibles et appréhendables par le plus grand nombre et, dans la mesure du possible, la moins “chargée” culturellement, tout comme nous nous efforçons de nous en tenir à des codes culturellement neutres. Ceci en conservant comme ambition de pouvoir favoriser l’adoption de nos interfaces par la masse, de réduire le délai d’apprentissage et d’assimilation des contenus et enfin de réduire les conflits d’interprétation. Cependant, vous ne pouvez pas ne pas savoir que les couleurs sont en grande partie inoculées des l’enfance comme autant de marqueurs culturels, en commençant par l’apparence sexualisée de nos vêtements (bleu-garçon/ rose-fille), le drapeau national ou d’autres critères moins évidents, comme l’affectif lié à une couleur évoquant un moment particulièrement pénible (le blanc du dentiste), ou plus agréable (la couleur des cheveux de maman). Bref, en couleur, comme dans tout ce qui fait appel au pathos, il est impossible de nier la dimension affective et culturelle des couleurs et de notre perception. Et, en bonne connaissance de cause, il faudra au graphiste/designer un peu de connaissance pour éviter les écueils les pus grossiers. Dans ce genre de tracas, nous, en tant que graphistes/designers/responsables des crayons de couleurs, devront faire appel à un peu de pédagogie pour expliquer que Jaune caca d’oie, ce n’est pas une couleur mais un jugement de valeur sévère pour un ton proche du jaune foncé (spéciale dédicace). par ailleurs, nulle couleur n’est foncièrement laide. c’est souvent l’association malheureuse de plusieurs tons ou de formes associées à ces couleurs qui les rendent peu agréables.

 

Un peu de théorie

La couleur, c’est d’abord un contexte. Et il n’en existe que deux. Soit la couleur est soustractive, comme l’impression, la peinture, c’est à dire que l’ajout d’une tonalité à une couleur va faire tendre le résultat vers le noir. Dans ce cas, la représentation typique des couleurs se fait par sa valeur en CMJN (Cyan, Majenta, Jaune, Noir, les 4 primaires en impression), et en pourcentage de chaque primaire. Sinon, c’est de la couleur additive, comme la lumière et les écrans, à savoir que toute valeur ajoutée à une couleur va avoir tendance à éclaircir le résultat. Dans ce mode, les primaires sont le rouge, le vert et le bleu (RGB). Par exemple, la lumière solaire est blanche et se décompose en un ensemble de nuances contenant ses trois primaires. Nous ne descendrons pas ici au valeurs infra(rouge) ou ultra(violet) qui ne sont pas perçues. Cette différence de contexte est juste primordiale, puisque certaines couleurs ne sont accessibles que dans un mode et pas dans l’autre (Fluos), ou disponibles via un rayonnement spécifique (lumière dite noire). De plus, dans le cadre de l’impression, les couleurs finales qui vont sur le papier sont soustractives, mais traitées par des logiciels sur écrans, donc avec de la couleur additive, avec un joli gap d’interprétation à la clef. Pour l’exemple, un rouge pur en additif (RGB=255,0,0) ne sera pas disponible en soustractif et sera interprété en RGB 231,43,0 pour obtenir son équivalent imprimable le plus proche. Ceci est d’autant plus vrai que les couleurs sont étalonnées par des normes très précises et par des gabarits standardisés (Pantone, …).

Soustrative Additive

 

Pour la suite de cet article, nous ne parlerons plus que de couleurs additives, puisque ce sont celles qui nous intéressent pour le moment, celles des écrans.

Au niveau du  codage des couleurs, la norme couramment admise aujourd’hui est le RGB. Chaque canal de couleur est codé sur une valeur comprise entre 0 et 255. Plus la valeur est basse, moins ce canal est présent dans la résultante (le mélange des trois canaux). Dans cet exemple, le gris est obtenu par un mélange identique des trois canaux de couleurs. La combinatoire de ces valeurs autorise donc plus de 16 millions de couleurs, ce qui est suffisant pour que l’œil humain ne discerne pas de ruptures dans les valeurs. Ceci dit, il existe de nombreuses autres méthodes d’encodage et notamment la méthode hexadécimale, ou chaque canal est codé sur deux digits, valant respectivement une valeur comprise entre 00 (équivalent de 0 en hexa) et FF (255). Dans ce schéma, le code #000000 représente le noir et le code #FFFFFF représente le blanc. Vous constaterez qu’il n’est affaire ici que de protocole, puisque le nombre de couleurs adressables demeure le même. Enfin, d’autres méthodes existent mais sont peu employées (HSB, lab).

Enfin, nous disposons également, pour des raisons historiques ou de performances de nuanciers réduits, dont les valeurs ne couvrent pas tout le spectre de la vision humaine. on parle alors de couleurs indexées. Celles-ci peuvent donc se voir réduites à 256 valeurs, ou 128 (voire moins) selon le type de compression que l’on applique. C’est notamment le propre de formats de fichiers comme le .GIF qui n’autorise que 256 tons. Bien entendu, moins une images contient de tons différents, plus léger sera son poids, surtout en cas de compression.

 

La roue chromatique

la couleur est souvent représentée dans le monde informatique sous forme de tableau à deux entrées, une pour les valeurs dans un intervalle donné et une pour la nuance affectée, mais si l’on considère que le spectre de la lumière visible reboucle entre le rouge et le violet, la représentation la plus proche intuitivement de la réalité est certainement sous forme de roue chromatique. cette représentation, en plus d’être intuitive, offre aussi l’élégance de faire figurer toutes les valeurs sur un seul graphique.

Colorpicker  ROue

 

 

Les associations de couleurs

Depuis longtemps, les couleurs ont été étudiés, disséquées et des ensembles chromatiques se sont dégagés. Ces ensembles proposent généralement des nuances formant une harmonie spécifique en accordant certains tons ou certaines couleurs entre elles. Vous connaissez sans doute les couleurs dites “complémentaires”, puisqu’elles répondent naturellement à un défaut du cerveau, que vous pouvez tester assez facilement : Si vous posez un carton d’un blanc pur sur un mur vert très clair, le carton, par contraste apparaitra légèrement rose. En fait, le cerveau fait un raccourci entre une couleur et son opposée sur la roue chromatique. Ainsi, lorsque l’on parle de couleurs complémentaires, on met pour l’exemple en opposition le vert et le rouge, le orange et le bleu ou le jaune et le violet. ces couleurs présentent l’avantage de disposer d’un très fort taux de contraste entre elles. Ceci dit, mal employées, elles sont souvent dérangeantes car trop en opposition. On parle aussi assez souvent d’ensemble monochromatique lorsque les tons sont tous choisis dans une couleur donnée. Autre type, la triade, qui propose un triolet de valeurs écartées de 120° sur la roue chromatique. Vous pouvez retrouver toutes ces associations dans des applications spécifiques, telles que Kuler (https://kuler.adobe.com/#create/fromacolor). Et bien entendu, on peut expérimenter par soi-même, afin de dégager de nouvelles tendances ou des usages hors-normes.

 

la psychologie des couleurs

Encore une fois, il est ici assez délicat de tenter de dégager des notions psychologiques qui ne soit pas “clichés” ou qui soit applicables partout et en tout lieux puisque le propre de la psychologie est d’être intrinsèque. Ceci dit, un grand nombre d’expressions populaires démontrent que la couleur dépeint notre état psychologique (une colère noire…). De manière plus technique, des psychologues se sont penchés sur l’impact de la couleur sur notre ressenti, comme notamment Max Lüscher. Ce docteur helvétique pensait que la  couleur est une donnée universelle et objective, mais que sa perception est fortement subjective. Cette théorie à pour effet directe que l’interprétation de la perception des couleurs permet de définir une profil psychologique d’une personne. Max Lüscher a donc créer un test, dont le but est de présenter 8 cartons de couleurs différentes (Bleu, Jaune, Vert, Rouge, Violet, Marron, Gris et Noir) à un sujet et à lui demander de les classer par préférence. Ce classement est sensé refléter un état psychologique étudiable du sujet. Bien que ces études restent controversées (effet Barnum), il est toutefois peu étonnant que certaines couleurs soient associées à certains traits psychologiques, à certains critères psychologiques.

le bleu est associé au calme, à la réflexion, au mouvements lents. C’est une couleur agréable pour les environnements de travail, propre à l’atmosphère studieuse. C’est notamment la couleur institutionnelle des produits de la gamme Windows, mais aussi de Dell, de HP, de Facebook, de WordPress, Twitter, Flickr,…. C’est statistiquement la couleur préférée des hommes. C’est aussi la couleur la mieux représentée dans les paquets de M&M’s.

Le jaune est la couleur de l’excentricité, de l’exubérance, de la spontanéité, de l’optimisme et de l’action. C’est souvent la couleur de marques automobiles (Renault, Opel, Subaru). C’est la couleur la plus rapidement décodée par le cerveau humain et aussi celle qui fait le plus pleurer les bébés. C’est la couleur la moins représentée dans les paquets de M&M’s.

Le vert symbolise la défense, la continuité, la fierté, la persistance, la tranquillité et le calme. On retrouve ici des identifiants écologiques, bien sûr, mais également Starbucks. C’est aussi celle du père Noël original, avant que les marques le transforment en bonhomme rouge. Evidemment c’est aussi la couleur du dollars et de nombreuses monnaies de par le monde. C’est la couleur préférée des médecins, puisqu’elle est sensée vous éviter un ulcère.

Le rouge, c’est la couleur de l’agressivité, de l’action, de la compétition, de la volonté, de l’excitation et du désir. C’est bien sûr la couleur de Ferrari, des Rolling Stones, de Virgin et de Oracle. Aux JO de 2004, les athlètes portant du rouge ont significativement reçu plus de distinctions. La statistiques de la proportion des voitures rouges dans les accidents est une légende urbaine que l’on aime bien croire. Surtout ceux qui ont des voitures grises.

Le violet est associé à la sagesse, à l’enchantement, au domaine du surnaturel, du succès et de la richesse, de la royauté, de l’élévation spirituelle. Cette couleur est relativement peu commune en terme de branding, mais on la trouve tout de même dans les logos de Yahoo ou de Scifi. C’est la couleur préférée des rois et reines. C’est l’argon qui est utilisé dans les néon violets.

Le marron et l’orange sont les couleurs du corps de de la vision extérieure. ce sont des couleurs charnelles, sensuelles, confiantes et brillantes. Elles sont portées par des marques aussi célèbres que Fanta, Firefox, UPS, La Fnac… Le orange est la couleur fétiche des Pays-Bas.

Le Gris, est bien sûr la couleur de la prudence, de la concession, de la neutralité, de l’équilibre, de l’institution et du commerce. Hormis pour la couleur des costumes qui illustre bien ce propos, nous retrouvons cette tonalité dans des logos de compagnies internationales, souvent associés à la police de caractère. C’est le cas pour Microsoft, Autodesk, Apple, Wikipédia, EADS ou Mercedes-Benz. Si vous voyez tout gris, c’est que vous êtes daltonien. la bonne nouvelle, c’est que vous voyez plus de nuances de gris que les autres. Et oui, les chiens perçoivent aussi les couleurs (sauf le rouge).

 

 

Les couleurs dans l’univers Microsoft.

En dehors de toute notion de branding de marque, Microsoft propose un certain nombre de lignes directrices en ce qui concerne l’usage des couleurs dans les interfaces. Et ceci pour favoriser un aspect enjoué, volontaire et radicalement moderne des interfaces d’aujourd’hui. Ces couleurs, généralement sont assez hautes dans le spectre de la saturation (mais pas au plus haut, un peu de retenue) et globalement dans des tonalités diverses en ce qui concerne les accentuations (les couleurs qui portent le contenu) et neutres (blanc, noir, gris ou gris colorés) pour les fonds. c’est d’autant plus vrai en ce qui concerne la charte Windows Phone qui est décrite par les couleurs de thèmes utilisables pour les utilisateurs (voir ci-dessous). Note à propos des thèmes : Je suis assez favorable, si rien ne vous oblige à faire autrement (charte existante, contradiction flagrante, volonté artistique délibérée), d’utiliser dans les applications la couleur du thème choisie par votre utilisateur, puisque d’une certaine manière, vous ferez vivre votre application dans son univers.

Theme_PSD

 

En ce qui concerne Windows 8, le nuancier sera tout aussi coloré et dynamique, mais pourra comporter plus de nuances. Il ressemblera donc à ceci :

 

image

 

Toutefois, il ne s’agit ici que de propositions et encore une fois, le premier critère de sélection des couleurs de votre application doit reposer sur une stratégie volontaire (De qui, de quoi, à qui et pourquoi parle mon application). En plus de la charte graphique, vous saurez maintenant ajuster vos couleurs en fonction des différents modes et des feelings associés aux différentes tonalités. Gageons que ces quelques notions sauront vous inspirer et vous apporter quelques réflexions pour le développement des vos applications !