+32 496 24 74 41 info@graphiloweb.be

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.

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-signafication-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. 

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 c’est atténué avec l’avènement des logiciels. Il suffit maintenant de choisir parmi un nuancier de couleurs.

roue-couleur - illustrator

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-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.

pipette-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.

application-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-palleton

Apercu page internet avec l’application Paletton

 

apercu composition artistique 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é.

aprecu-lisibilité-texte-paletton

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.

apercu-liste-html-paletton

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é !  

apercu-combinaison-nuances-paletton

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.

 

Vous cherchez un partenaire pour concevoir et réaliser votre site internet ?

Contactez-nous pour en discuter, nous nous ferons un plaisir de répondre à vos questions.