Ce support (qui n’est pas vraiment un cours) est une liste de références en ligne sur la couleur, complétée par des exercices simples.
La couleur au quotidien
La place de la couleur
- https://www.youtube.com/watch?v=6Du3Ky1i_aM <– Vidéo : La couleur, comprendre son importance
Le lexique de la couleur
➜ Activité en préambule
Listez les termes que vous utilisez pour décrire la couleur et ses variations. Ajoutez à ces termes ceux que vous allez découvrir en consultant les sites mentionnés ci-dessous.
- https://astucesdartiste.com/valeur-tons-teintes-vocabulaire-couleur/ <– Tons, teintes, valeurs… : le vocabulaire de la couleur en peinture
- https://www.unesciencesouslarobe.com/theorie-couleur-vocabulaire/ <– Le lexique de la couleur en stylisme (2/2)
- https://www.jlphomedesign.com/dossiers-infos/lexique-de-la-couleur/ <– Lexique de la couleur en architecture
- https://visualdsgn.fr/vocabulaire-de-la-couleur/ <– Le vocabulaire de la couleur en design graphique
Il est nécessaire de clarifier le sens des termes que nous utilisons. Qu’est ce qu’une couleur assourdie, une couleur rompue, une couleur rabattue, une teinte désaturée, une couleur dominante ou tonique, un camaïeu de couleurs ?
Un concept voisin de la saturation : le chroma ou la chromaticité
- https://munsell.com/color-blog/difference-chroma-saturation/ <– Article en anglais assez détaillé sur la différence entre chromaticité et saturation
➜ Exercice
Sur l’illustration ci-dessus, extraite du sélecteur d’andrewwerth.com , dans quelle direction s’échelonne la luminosité ?
L’échelle de variation de la chromaticité varie entre une couleur donnée (plus ou moins lumineuse et saturée) et son équivalent sur une échelle de gris. Autrement dit, toutes les couleurs présentes sur une échelle de chromaticité ont la même valeur (ou degré de luminosité).
La symbolique des couleurs
➜ Exercice
Répondez au sondage lancé par le site pourpasunrond.fr
- https://docs.google.com/forms/d/e/1FAIpQLSeMot_9oERxAsO9eKLb7-ItpmYZE9shqdo7T1cWY_xRtMil9A/viewform <– sondage sur Google Forms
Couleurs et cultures
- https://colorleap.app/home <– Palettes par périodes de l’histoire de l’art
- https://99designs.fr/blog/conseils-design/signification-couleurs/ <– Signification des couleurs
- https://www.youtube.com/watch?v=s_2fFJ2DR5c&list=PLZW60CL4fAIjRyDg2etFLFwK2LPn2_9_q&index=5 <– Vidéo : Couleurs : leurs symboliques
Couleurs et émotions
- https://99designs.fr/blog/tendances/pouvoir-emotionnel-couleurs/ <– Le pouvoir émotionnel des couleurs
Les usages des couleurs
Couleurs et marketing
- https://pascalkermarrec.com/2018/04/13/les-couleurs-en-marketing/ <– Guide pratique des couleurs utilisées pour le marketing
- https://www.kaptiva.ca/psychologie-couleurs-sur-emotions-et-marketing <– l’influence des couleurs sur nos émotions et le marketing
Couleurs et identités visuelles
- https://99designs.fr/logo-design/business-of-color <– Utilisation des couleurs dans les logos
Couleurs et secteurs d’activité
- https://picular.co/ <– Picular
- https://leplus.nouvelobs.com/contribution/214947-code-couleur-graphisme-pourquoi-les-affiches-de-films-se-ressemblent-toutes.html <– Codes couleurs des affiches de cinéma
➜ Exercice
Faites des recherches de couleurs dans picular.co en utilisant exactement les expressions suivantes :
- yaourt
- yaourt bio
- yaourt 0%
- voiture
- voiture de sport
- parfum
- parfum de luxe
- lait entier
- lait demi-écrémé
- lampe de chevet
- lampe de bureau
- chaussure femme
- chaussure homme
- magazine de voyages
- magazine de mode
- etc.
La perception de la couleur et les normes d’accessibilité
Discrimination chromatique
- http://daltonien.free.fr/daltonien/rubrique.php3?id_rubrique=4 <– Témoignages de daltoniens
- https://studiobenziv.wordpress.com/2015/10/25/tester-sa-vision-des-couleurs/ <– Test de discrimination chromatique
- https://www.xrite.com/fr-fr/categories/visual-assessment-tools/fm-100-hue-test <– Explications détaillées sur le test de Farnsworth Munsell (vidéo en anglais)
➜ Exercice
Faites le test de discrimination chromatique proposé par le site de X-Rite. Si vous constatez une difficulté à distinguer certaines nuances, refaites le test une seconde fois.
Simulation des troubles de la vision des couleurs
Perception contextuelle des couleurs
- http://www.bonne-mesure.com/metamerisme.php <– Le métamérisme
- https://www.youtube.com/watch?v=FJX7SVq9cq8&list=PLZW60CL4fAIjRyDg2etFLFwK2LPn2_9_q&index=7 <– Vidéo : Couleurs : les contrastes
- https://tpe-les-illusions-d-optique.webnode.fr/different-types-dillusions/illusions-de-couleurs/ <– Illusions d’optique
Normes d’accessibilité
- https://www.technologie-handicap-accessibilite.net/dossiers/accessibilite-web/accessibilite-web-les-normes/ <– Les normes d’accessibilité du Web
- https://www.w3.org/Translations/WCAG20-fr/#visual-audio-contrast <– faciliter la perception visuelle du contenu par l’utilisateur
Les normes d’accessibilité mettent l’accent sur la nécessité de distinguer la forme sur le fond, pour toutes les personnes, y compris celles qui ne peuvent pas distinguer toutes les couleurs. ces normes mettent donc l’accent sur le contraste de luminosité entre la forme et le fond sur lequel elle se détache. Le contraste de luminosité entre deux couleurs joue un rôle clé dans la lisibilité des textes affichés avec ces couleurs
La notation informatique de la couleur
Les mélanges ou synthèses de couleurs
- http://www.optique-ingenieur.org/fr/cours/OPI_fr_M07_C02/co/Contenu_05.html <– présentation de 3 mélanges ou synthèses (additive, soustractive et autotypique)
RGB (ou RVB) cv CMJN
- http://jeromederieux.fr/cmjn/rvb-et-cmjn/ <– Reproduire les couleurs – Modes RVB et CMJN
- https://visualdsgn.fr/rvb-cmjn-quelles-differences/ <– RVB et CMJN : quelles différences ?
RGB, RGBa et notation hexadécimale
- https://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html <– La transparence de couleur avec RGBa en CSS3
- https://medium.muz.li/hex-color-codes-27cd0a37c3ce <– Lire le code hexadécimale de notation des couleurs
- https://www.aly-abbara.com/museum/chromographie/RVB_codage_hexadecimal.html <– Comprendre le codage hexadécimal
- https://borderleft.com/toolbox/ <– Outils pour le webdesign parmi lesquelles des tables de couleurs hexadécimales
Le système de notation RVB (ou RGB) et le système de notation hexadécimal répondent au même besoin : indiquer au système informatique une valeur entre 0 et 255 pour chaque canal de couleur primaire, en synthèse additive.
➜ Exercice
Pour ceux qui souhaitent s’entrainer à manipuler les couleurs en mode RVB (ou RGB), il existe un jeu intéressant sur CodePen. Il s’agit de deviner, parmi plusieurs couleurs, celle qui correspond aux paramètres affichés.
- https://www.youtube.com/watch?v=XHbUG98KdiQ <– Vidéo : La couleur, sa physiologie (TSL)
- https://la-cascade.io/articles/utiliser-hsl-pour-vos-couleurs <– Utiliser HSL pour décliner la couleur en CSS (les défauts du système sautent aux yeux sans que l’auteur les discerne !)
- https://iamvdo.me/blog/les-avantages-de-hsl-par-rapport-a-rgb <– HSL vs RGB
Les systèmes adaptés à nos discours sur la couleur
Bien qu’incohérent sur les plans perceptif et normatif, HSL a toujours des défenseurs convaincus :
Exercice
- Passez en niveaux de gris les illustrations des articles mentionnés plus haut ou celle de cette page https://meyerweb.com/eric/css/colors/hsl-16.html (utiliser l’extension Sheen pour Google Chrome). Que constatez-vous ?
Les systèmes adaptés au discours utilisent des paramètres qui nous permettent de caractériser les couleurs que nous souhaitons utiliser de manière plus intuitive. Cependant, les valeurs chiffrées qu’ils nous transmettent ne sont pas fiables d’un point de vue perceptif et normatif !
Les systèmes adaptés à notre perception de la couleur (et à nos discours)
- https://www.hsluv.org/ <– Hue – Saturation – Luminosity
- http://hclwizard.org:3000/hclcolorpicker/ <– Hue – Chroma – Luminosity (cliquer sur l’onglet “Hue-Chroma plane” pour plus de facilité de sélection des couleurs)
Comparatifs des systèmes HSLuv et HSL
Les systèmes adaptés à notre perception nous donnent des informations fiables sur la teinte, la saturation et la luminosité d’une couleur. Cette fiabilité est renforcé par la cohérence entre les informations que me transmettent ces systèmes et celles que nous indiquent les systèmes de contrôle de l’accessibilité des données colorées
Le système de Munsell (système HVC, Hue – Value – Chroma)
- http://www.graxx.ca/Munsell1.aspx <– Présentation du système de Munsell en français.
- https://munsell.com/color-blog/conical-spiral-color-harmony/ <– Présentation du système de Munsell en anglais
Les modes colorimétriques dans la suite Adobe
- https://helpx.adobe.com/fr/photoshop/using/color-modes.html <– Aide d’Adobe sur les modes colorimétriques dans Photoshop
Les sélecteurs-convertisseurs de couleurs
- http://www.andrewwerth.com/color/ <– sélecteur Munsell-rgb-hex
- https://dmitrybaranovskiy.github.io/raphael/picker.html <– rgb, hsb, hsl, hexa,
- http://pourpre.com/colordb/ <– hexa, rvb, cmj, tsl, tsv, cmjn, xyz, xyy, lab, lch
- https://www.w3schools.com/colors/colors_converter.asp <– name, hexa, rgb, hsl, hwb, cmyk
- https://www.hsluv.org/ <– hexa, hlsuv
- https://hslpicker.com/#83bd7f <– hexa, rgba, hsla
- https://convertacolor.com/#/hex/AA9E85 <– hexa, rgb, hsl, cmyk
- https://davidjohnstone.net/lch-lab-colour-gradient-picker <– lab, lch, rgb, hsv, hsl, hexa
- https://coolors.co/c0bcb5-af5d63-ed474a <– hexa, hsb, hsl, rgb, cmyk, lab
- https://borderleft.com/toolbox/rgba/ <– rgba, rgb
➜ Exercices
- Essayez de paramétrer un vert olive ou un bleu turquoise avec un sélecteur CMJN, RVB ou héxadécimal et un sélecteur HSL, HSV ou LCH (utiliez par exempleles sélecteurs proposés par w3schools. Avec quel outil et quel système de couleur parvenez-vous le plus facilement à paramétrer la couleur que vous avez en tête ?
- Vérifiez la fiabilité des valeurs proposées par les convertisseurs en croisant les conversions. Utilisez par exemple le sélecteur Munsell-rgb-hex et vérifiez la luminosité des couleurs d’une même échelle de chromaticité dans le sélecteur hexa-hsluv.
- Notez, pour une même couleur, les différentes positions des curseurs dans les systèmes de paramétrage présentés dans l’interface de l’outil Lch and Lab colour and gradient picker. Pour une même couleur, notez par exemple les différentes valeurs de Hue dans les différents modes. Examinez également les valeurs de luminosité et de saturation.
Nous constatons qu’une couleurs utilisée à l’écran se paramétre de plusieurs manières mais, en fin de compte, la couleur paramétrée correspond à une seule valeur en notation héxadécimale.
La théorie des couleurs
La théorie des couleurs et de leur harmonie
- https://visualdsgn.fr/comprendre-cercle-chromatique-itten/ <– Comprendre le cercle chromatique d’Itten
- https://www.canva.com/fr_fr/decouvrir/cercle-chromatique/ <– Comment utiliser le cercle chromatique
Les outils basés sur la théorie des couleurs
- https://www.canva.com/colors/color-wheel/ <– Roue des couleurs de Canva
- https://color.adobe.com/fr/create/color-wheel <– Roue chromatique d’Adobe Color
Limites de la théorie des couleurs
Les outils basés sur la théorie des couleurs présentent les couleurs dans un rapport qualitatif harmonieux basé sur la seule teinte. Ces outils ne tiennent pas compte du rapport quantitatif des couleurs. Ils ne guident pas les utilisateurs sur le paramétrage de la saturation, de la chromaticité et de la luminosité pour obtenir un accord harmonieux.
La construction des nuanciers
Outils de construction de palettes accessibles
- https://www.learnui.design/tools/accessible-color-generator.html <– Suggestion de couleurs accessibles (normes AA ou AAA)
- https://accessiblepalette.com/ <– Palettes LCH étagées
Outils de contrôle du contraste des couleurs
- https://color.adobe.com/fr/create/color-contrast-analyzer <– Color Contrast Analyser (Adobe Color)
- https://colourcontrast.cc/ <– Colour Contrast Checker
- https://colorable.jxnblk.com/ <– Colorable
- https://color.review/ <– Color Review (limites de ratios visibles)
- https://coolors.co/contrast-checker/112a46-acc8e5 <– Color Contrast Checker
- https://contrast-finder.tanaguru.com/ <– Tanaguru Contrast Finder
➜ Exercices
- Construisez un nuancier étagé de 3 couleurs, respectant la norme AA Large, à partir d’une sélection aléatoire de 3 couleurs sourdes (avec Muted Colors sur CodePen).
- Construisez (avec Color Review et Colorable), à partir d’une photo, un nuancier étagé accessible respectant la norme AA.
Outils de construction de nuanciers
- https://color.adobe.com/fr/create/color-wheel <– Pour construire des nuanciers en suivant les règles de la théorie des couleurs (roue chromatique d’Adobe Color)
- https://coolors.co/image-picker <– Pour construire des nuancier à partir d’une image
- https://www.learnui.design/tools/data-color-picker.html#palette <– Data Color picker
➜ Exercices
- Construisez un nuancier de 5 couleurs, basé sur un accord complémentaire, en utilisant le mode TSL (avec la roue chromatique d’Adobe Color). Vérifiez l’accessibilité du nuancier en utilisant d’une part les options de l’outil et en utilisant d’autre part un outil de vérification du contraste.
- Construisez un nuancier de 3 couleurs (avec Data Color Picker) et vérifiez son accessibilité.
- Construisez un nuancier étagé de 5 couleurs à partir d’une photo (avec Image Picker) et vérifiez son accessibilité.
- Il est impossible de construire un nuancier accessible de plus de 3 couleurs ! Comment utiliser les nuanciers de plus de 3 couleurs en tenant compte des impératifs de l’accessibilité ?
La roue chromatique d’Adobe Color impose des nuanciers de 5 couleurs. L’outil garantit une accessibilité qui se révèle non conforme aux normes du WCAG !
Outils de construction de dégradés étagés
- https://colorkit.io/ <– ColorKit
- https://davidjohnstone.net/lch-lab-colour-gradient-picker <– Lch Lab colour gradient picker
➜ Exercice
- Construisez un nuancier étagé de 3 couleurs, respectant la norme AA Large, en utilisant l’outil Lch and Lab colour and gradient picker et l’outil ColorKit. Quel est l’outil le plus approprié pour construire des nuanciers étagés normalisés (accessibles) ?
Utilisation de la couleur en communication visuelle
Utilisation en design hébergé
Outils utiles
- https://borderleft.com/toolbox/ <– Boîte à outil Borderleft
- https://stephaniewalter.design/fr/blog/accessibilite-et-couleurs-outils-et-ressources-pour-concevoir-des-produits-accessible/ <– Site de ressources sur l’accessibilité et les couleurs
Conseils pratiques
- https://dribbble.com/stories/2018/12/19/choosing-colors-for-web-design-a-practical-ui-color-application-guide <– Répartir les couleurs selon la règle 60-30-10 et utiliser les gris
Exemples
- https://www.happyhues.co/palettes/2 <– Une palette pour le texte et une autre pour l’image
Utilisation en design imprimé
- https://visualdsgn.fr/rvb-ou-cmjn-quel-mode-colorimetrique-choisir/ <– RVB ou CMJN : quel mode choisir ?
- https://www.grapheine.com/divers/colorimetrie-rvb-cmjn-digital-print-strategies <– Branding et colorimétrie : La stratégie du “RVB First”
- https://www.pcgprint.com/fr/blog-rvb-cmjn-pantone/ <– Différences entre RVB, CMJK et Pantone
Utilisation en design projeté
- https://rrgraphdesign.com/blog/best-colors-for-presentation-slides/ <– Choisir les meilleures couleurs pour la présentation visuelle projetée
Propositions perfectibles
- https://www.slidescarnival.com/how-to-pick-the-best-colors-for-your-presentation-plus-10-color-combination-ideas-to-get-you-started/14686 <– Comment choisir les meilleures couleurs pour vos diapositives de présentation
- https://www.slidescarnival.com/12-custom-color-palettes-for-powerpoint-slides-that-work/17950 <– 12 palettes fonctionnelles pour la présentation visuelle proposées par slidescarnival.com
➜ Exercice
- Vérifiez le contraste de luminosité entre les couleurs proposées par slidescarnival.com. Qu’en concluez-vous ?
Prendre en compte la répartition quantitative des couleurs ne suffit pas ! La présentation visuelle nécessite de prendre en compte la norme AAA Large (voire AAA) pour garantir une bonne visibilité des textes dans les conditions de projection sur écrans blancs opaques.
Utilisation en design plurimédia
- https://99designs.fr/logo-design/business-of-color <– Utilisation des couleurs dans les logos
- https://www.pourpasunrond.fr/associe-les-couleurs/ <– Associe les couleurs pour trouver la combinaison qui conviendra à tes créations
Utilisation en peinture et illustration
- https://www.youtube.com/watch?v=BqXq_f8Oscw <– Vidéo : Couleurs: harmonies colorées
- https://patrick-06.fr/la-peinture/accords-de-couleurs/ <– L’harmonie des couleurs en peinture
- https://www.clipstudio.net/comment-dessiner/archives/161403 <– Théorie sur la couleur pour les illustrations numériques
- https://dciner.fr/category/dessin-colore/ <– Dessiner en couleur
Les sites généralistes de référence sur la couleur
- https://www.wikiwand.com/fr/Portail:Couleurs <– Le portail des couleurs sur Wikipedia (via Wikiwand)
- https://colorid.pagesperso-orange.fr/Presentation.html <– site de Color ID
- http://handprint.com/HP/WCL/color7.html#evolution <– site en anglais détaillant l’évolution des systèmes de représentation et de notation de la couleur (niveau avancé)