Le choix des couleurs
Comme nous le reprenons dans notre rubrique ‘la communication par l’image‘ les couleurs sont fondamentales pour créer une atmosphère et valoriser un environnement.
Pour exemple, l’excellente vidéo ci-dessous nous démontre l’influence des couleurs au cinéma.
- Crédit vidéo : Lidia Mtz-Seara
Il est vrai que l’expression « les goûts et les couleurs cela ne se discute pas » résume parfaitement ce qu’elle veut dire, mais certaines couleurs ne se combinent inévitablement pas avec d’autres.
Le choix des couleurs pour construire une image de marque est donc essentiel !
Les couleurs et leur signification
Un article de Futura Sciences, la signification des couleurs, condensé mais néanmoins loquace, reprend différents points du livre la couleur dans tous ses éclats publié par Bernard Valeur, physicochimiste. Ceux-ci traitent de la classification des couleurs, leur signification, le vocabulaire des nuances, mais également des expressions utilisant les couleurs.
Dossier Futura Sciences – La signification des couleurs
Nous vous proposons également de visionner la vidéo ci-dessous qui est très intéressante. L’historien Michel Pastoureau, spécialiste de la symbolique des couleurs, était interviewé dans l’émission ‘Comment ça va bien!’ présentée par Stéphane Bern sur France 2. Il raconte les couleurs à travers les siècles et décode les symboles qui les entourent.
- Crédit vidéo : Comment ça va bien !
Les couleurs et le type d’affichage
A l’heure actuelle, il va de soit que la couleur s’affiche sur nos écrans. En ce qui concerne les ordinateurs, la palette de couleurs n’a cessé de se développer. Depuis les premiers moniteurs monochromes qui possédaient uniquement deux couleurs, nous avons maintenant des logiciels de retouche et modification d’images qui offrent des milliers de nuances.
A l’origine, les programmateurs qui désiraient produire des couleurs devaient passer par le codage. Cela s’est atténué avec l’avènement des logiciels. Il suffit maintenant de choisir parmi un nuancier de couleurs.
Exemple d’un nuancier de couleur d’Adobe Illustrator
Les outils
La pipette
Un outil, indispensable pour un graphiste webdesigner, c’est la pipette à couleur. Elle permet de sélectionner une couleur et d’obtenir le code couleur HEX qui se compose toujours du caractère dièse et d’une suite de six chiffres.
Il en existe bon nombre, de notre côté, avec la version macOS d’Apple, nous utilisons l’application ‘Couleur’
Exemple de l’application Couleur
Pour l’exemple, ci-dessous, nous avons utilisé cet outil pour obtenir le code couleur du titre de ce paragraphe. Le code indiqué est #0f419b. A l’aide de la souris, vous déplacez le curseur transformé en loupe et en cliquant à l’endroit désiré sur l’écran, l’application affiche le code couleur.
Exemple de pipette couleur
Il existe d’autres formats de codes, que cela soit pour internet ou dans des applications. Les couleurs HTML, SVG, HSL, HSV, … Si vous désirez en apprendre plus, la page Wiki sur les couleurs du web vous en apprendra déjà beaucoup.
Les palettes de couleurs
Comme nous le reprenons un peu plus haut, il est important d’harmoniser les couleurs. A l’oeil nu, une palette de couleurs peut très bien être choisie librement selon les envies ou besoins. Toutefois, afin d’obtenir une palette équilibrée il est intéressant d’utiliser un outil.
Pour cela, de nombreux site en ligne peuvent très bien vous aider dans cette tache. De notre côté, nous avons sélectionné un générateur très complet, Paletton.
Exemple de l’application Paletton
Paletton contient de nombreuses options pour obtenir une palette de couleur harmonieuse avec une, deux, trois ou même quatre couleurs différentes. Si vous n’êtes pas inspiré, il est également possible de demander des nuances aléatoirement.
Ce générateur peut également afficher, soit différents aperçus de pages internet, soit différents aperçus de compositions artistiques pour se rendre compte du rendu avec la palette sélectionnée.
Apercu page internet avec l’application Paletton
Apercu composition artistique avec l’application Paletton
Le générateur peut également afficher directement du texte sur la palette, en blanc, gris ou noir afin d’apprécier la lisibilité.
Aperçu de la lisibilité du texte sur l’application Paletton
Il est également possible d’obtenir un lien vers la page qui affiche la palette de couleurs sélectionnée. Ceci peut être très pratique pour l’envoyer par mail à un client afin d’en discuter. Cliquez ici pour être dirigé vers un exemple de palette de couleurs sélectionnées.
Dans le même ordre d’idée, ce générateur donne la possibilité d’obtenir la liste des nuances sélectionnées au format HTML, CSS, LESS, SASS, XML, ainsi qu’en format de texte.
Aperçu d’une liste des nuances de couleur au format html
Enfin, bien que ce ne soit pas la dernière option, nous devons vous présenter le tableau des différentes combinaisons possibles en juxtaposant les différentes nuances des différentes couleurs. Option, s’il en est, très pratique pour faire un choix approprié !
Aperçu des différentes combinaisons de nuances
En résumé
Si vous n’êtes pas encore convaincus, de notre côté nous le sommes, les couleurs parlent, les couleurs donnent le ton ! Il est donc important d’utiliser les bons outils afin de réaliser des choix judicieux. Et vous l’aurez sans doute compris, ce générateur de couleurs est un outils extrêmement précieux pour un webdesigner.