Grâce au principe de réfraction, le prisme permet de disperser la lumière blanche et de faire apparaitre les couleurs du spectre visible.
Le spectre visible
La partie visible du spectre électromagnétique par l'œil humain est compris entre 390 et 710 nanomètres.
La couleur dans le monde numérique
Dans le monde numérique, les couleurs sont générées avec les pixels qui composent l'écran.
La synthèse additive
Le système additif est fondée sur les trois couleurs primaires rouge, vert, bleu. Pour créer des couleurs dans le monde numérique, il faut ajouter de légers stimulus de lumière.
La synthèse additive
Les couleurs, une affaire d'illusion
Survolez l'image…
Les modèles de couleur
Un modèle de couleur représente visuellement le spectre des couleurs à travers une forme multidimensionnelle. La plupart des modèles ont 3 dimensions et peuvent donc être représentés en 3D.
Le modèle RGB (ou RVB)
rgb(0,0,0)
Pourquoi 255 ?
Le codage sur 1 octet permet 256 niveaux de gris. C'est bien plus qu'il n'en faut, sachant que, dans le meilleur des cas, nous pouvons distinguer quelques dizaines de niveaux de gris !
Pourquoi 255 ?
Les mêmes raisons s'appliquant à chaque canal de couleur primaire (rouge, vert, bleu), on peut leur attribuer chacun un octet.
Une image couleur peut donc contenir plus de 16 Millions de couleurs (256 x 256 x 256)
Une image codée en1 bits (21) contient2 couleurs
Le modèle RGB en 3 dimensions
Transposition en hexadécimal
#ffffff
rgb(255,255,255)
Le modèle HSL (ou TSL)
hsl(0,50%,50%)
Le modèle HSL en 3 dimensions
Le modèle HSV en 3 dimensions
Les sélecteurs de couleur
Sélecteur de couleur de Photoshop (HSV)
Sélecteurs de couleur d'Affinity Designer (HSL)
La synthèse soustractive
Le système soustractif est fondé sur les trois couleurs primaires magenta, jaune et cyan.
Le processus est dit soustractif car lorsque l’on regarde une de ces couleurs, on soustrait à l’œil les autres couleurs qui constituent la lumière blanche.
Espaces colorimétriques
Volume géométrique correspondant à un ensemble de couleurs disponibles dans un système
§ 2
Contrastes
Perception des couleurs
La manière dont nous percevons les couleurs dépend essentiellement de l'environnement dans lequel nous les observons.
C'est une affaire de contraste…
Contraste de luminosité
Notre œil s’adapte à l’intensité lumineuse moyenne d’une scène.
Dans un environnement clair, la pupille se ferme pour « réguler » le flux de lumière reçue. Dans l’obscurité, elle s’ouvre davantage. Conséquence immédiate : la même couleur sera perçue plus foncée sur un fond clair que sur un fond sombre.
Contraste de saturation
La saturation d'une couleur est perçue de manière plus intense lorsque celle-ci est appliquée dans un environnement neutre, peu saturé.
Contraste de teinte
Toujours par action d’opposition, nous estimons la teinte d’une couleur en fonction des teintes environnantes. Le carré de gauche paraît bleu car entourés de vert, mais à droite, plutôt vert car entouré de bleu.
Contraste simultané
Regardez fixement la croix et observez…
Contraste simultané
Combien de couleurs voyez-vous ?
Contraste & lisibilité
Le contraste est également un facteur essentiel pour la lisibilité d'un texte…
Contraste & lisibilité
Lisible
Contraste & lisibilité
Lisible
Contraste & lisibilité
Illisible
Contraste & lisibilité
Lisible
Contraste & lisibilité
Illisible
La luminosité des couleurs
La luminosité des couleurs joue un rôle important dans l'appréciation des contrastes.
Daltonisme
Le daltonisme est une anomalie de la vision affectant la perception des couleurs.
D'origine généralement génétique elle a alors pour cause une déficience d'un ou plusieurs des trois types de cônes de la rétine oculaire.
Vision normale
Deuteranope
Absence des récepteurs rétinaux au vert.
Protanope
Absence des récepteurs rétinaux au rouge.
Tritanope
Absence des récepteurs rétinaux au bleu.
Les normes d'accessibilité
Elles sont définis par le WCAG (Web Content Accessibility Guidelines)
Le cercle chromatique RVB n'est pas bien équilibré car il ne tient pas compte de la luminosité des couleurs, ce qui engendre des couleurs trop proches à certains endroits et trop éloignées à d'autres.
Le cercle chromatique RYB
Le cercle chromatique RYB corrige les erreurs du cercle RVB en proposant des couleurs mieux réparties.
Couleurs primaires
Couleurs secondaires
Couleurs tertiaires
Les accords chromatiques
Complémentaires
Triade isocèle
Triade équilatérale
Tétradique rectangulaire
Tétradique carré
Analogues proches
Analogues éloignés
Analogues + complémentaire
Ombre, teinte, tonalité
Ombre (Shade) Couleur pure + noir
H: 0 S: 100% L: 50%
H: 0 S: 100% L: 40%
H: 0 S: 100% L: 30%
H: 0 S: 100% L: 20%
H: 0 S: 100% L: 10%
Teinte (Tint) Couleur pure + blanc
H: 0 S: 100% L: 50%
H: 0 S: 100% L: 60%
H: 0 S: 100% L: 70%
H: 0 S: 100% L: 80%
H: 0 S: 100% L: 90%
Ton (Tone) Couleur pure + gris
H: 0 S: 100% L: 50%
H: 0 S: 80% L: 50%
H: 0 S: 60% L: 50%
H: 0 S: 40% L: 50%
H: 0 S: 20% L: 50%
Composer et appliquer une harmonie colorée
1. Le rapport de couleur
Choisir une combinaison chromatique
2. Le rapport qualitatif
Décliner ombres, teintes, tonalités et sélectionner les couleurs retenues
3. Le rapport quantitatif
Déterminer la couleur dominante, la couleur tonique et les couleurs d'accompagnement
Composer et appliquer une harmonie colorée
Appliquer les couleurs de l'harmonie en respectant les rapports de quantité.
Des outils en ligne pour construire votre harmonie colorée
On associe encore aux dégradés une tendance un peu retro, souvent liée au skeuomorphisme des années 2000.
Or il peut s'avérer très utile et contemporain dans les interfaces web s'il est bien utilisé.
Dégradés
Les types de dégradés
Dégradé linéaire
Un dégradé linéaire crée une bande de couleurs qui progresse en ligne droite. Le dégradé passe en douceur d'une couleur à l'autre. Il est possible de spécifier plusieurs couleurs intermédiaires.
background: linear-gradient(#3398db, #8e43ad);
Dégradé radial
Le dégradé radial est similaire au dégradé linéaire, sauf qu'il rayonne à partir d'un point central. Il est possible de définir l'emplacement de ce point central ainsi que la taille du dégradé.
background: radial-gradient(#3398db, #8e43ad);
Dégradé conique
Le dégradé conique est similaire au dégradé radial, à la différence que le dégradé suit la circonférence du cercle au lieu de se répartir sur son rayon.
background: conic-gradient(#3398db, #8e43ad);
Dégradés
Quelques règles à observer
À ne pas faire
Ne pas surcharger le dégradé avec trop de couleurs
À faire
Utiliser des transitions de couleurs proches pour obtenir un dégradé lisse
Utiliser au moins une couleur intermédiaire
Dégradés
Quelques règles à observer
À ne pas faire
Avec uniquement 2 couleurs opposées, cela génère un zone grisâtre au centre du dégradé qui n'est pas très agréable pour l'œil.
À faire
Ajouter un ou plusieurs arrêts de couleur dans le dégradé pour éviter cet écueil.
Dégradés
Attention aux contrastes
Les dégradés engendrent facilement des problèmes de lisibilité. Attention à bien observer les règles de contraste.
À ne pas faire
Éviter des couleurs trop proches de celles du dégradé qui nuiront à la lisibilité du texte.
À faire
Privilégier des contrastes fort pour une bonne lisibilité.
Le blanc est symbole d'élégance, de minimalisme. Par son absence de caractère, il crée une impression de vide et d’infini, une qualité qui lui permet de mettre en valeur le contenu. C'est pour cela qu'on l'utilise souvent.
Noir
Noir
Par son absence de lumière, le noir procure un sentiment de protection, de réconfort, d'intimité. Paradoxalement, il peut renvoyer également un sentiment de peur, d'angoisse, de mystère.
Le noir est élégant, raffiné, sophistiqué et minimaliste.
Rouge
Rouge
Le rouge attire l'attention et incite à l'action. Dans les interfaces, il est souvent utilisé pour les boutons et les messages d'avertissement.
Il représente l'énergie, l'instinct combatif, la passion. Dans des teintes vives, il peut être agressif. Assombri, il est chaleureux, réconfortant, élégant, raffiné. Éclairci, il devient rose, plus délicat, calme, subtil.
Orange
Orange
Le orange combine la puissance du rouge et la convivialité du jaune, ce qui peut donner des sensations d'énergie, de chaleur, de motivation et d’enthousiasme.
Jaune
Jaune
Le jaune est synonyme de bonheur, il est lumineux, incandescent, aéré et ludique. Clair, il contraste parfaitement avec les couleurs plus foncées comme les noirs et les gris. Le jaune est une excellente couleur de surbrillance pour mettre en valeur les éléments importants et attirer l’attention de l’utilisateur.
Vert
Vert
Le vert est naturellement associé à la nature. C’est une couleur reposante qui réconforte, détend. Il symbolise la santé, le calme, l'espoir. Dans des teintes foncés, il est davantage sophistiqué, mystérieux.
Bleu
Bleu
Le bleu est une couleur relaxante qui procure un sentiment de sécurité et de confiance. Il symbolise aussi la paix, la liberté, la sagesse, la connaissance.
Violet
Violet
Selon ses nuances, le violet provoque des sensations paradoxales. Il suggère tantôt le mystère, la richesse et la délicatesse, tantôt le malaise, le trouble et la provocation. Il est aussi lié à l’intuition, la spiritualité et la nostalgie.
