Choisir les couleurs de son site internet

2 janvier 2017 |  Création graphique

Etablir la charte graphique de son site internet est un travail minutieux et demande un temps considérable.

Les couleurs de cette charte seront propre à votre activité et aux valeurs que vous voulez retranscrire sur votre site.

En graphisme, la couleur possède un code qui lui est propre, il se nomme le code HEX.

Ce code est défini par un « #  » suivi d’une suite de 6 chiffres et lettres. Il sert à personnaliser son site internet avec précision.

Mais comment trouver les couleurs de son site internet ?

Des sites internet, sources d’inspiration:

❖ COLRD

Ce site présente des palettes de couleurs déjà prédéfinies. Vous pouvez piocher des idées de palettes pour les adapter à votre site internet.

❖ Pinterest

Pinterest regorge d’idées nouvelles. Graphisme, créations, illustrations, pictogramme, cartes de visites, … En tapant des mots-clefs tels que « webdesign« , « site internet« , « webdesign inspiration« , « palette graphique« , « palette couleur« , vous trouverez différentes propositions de palettes de couleurs tendances, actuelles et qui pourraient correspondre à votre activité.

❖ Coolors

Ce site internet est très facile d’utilisation. Il présente même un tutoriel de présentation. Véritable source d’inspiration créative, il permet de générer en 2-3 clics un code couleur.

Après avoir cliqué sur « Start the Generator« , vous pouvez gérer les différentes couleurs de votre palette. En cliquant sur la barre d’espace du clavier, le site génère de nouveau automatiquement un code couleur harmonieux. Il est également possible de créer un code couleur propre à des couleurs que vous aurez choisies auparavant, comme celles de votre logo ou d’une image de votre site.

❖ Kuler

Kuler est une roue chromatique présente en ligne, liée à Adobe. Il n’est pas nécessaire d’avoir un compte Adobe pour accéder à ces services. Mais il est intéressant, si vous possédez un logiciel adobe sur lequel vous travailler, de se connecter pour exporter les données de colorimétries proposées par le site.

C’est à partir d’une couleur choisie que ce site propose d’autres couleurs associées, créant ainsi des combinaisons.

• Semblables, combinaison semblable à la couleur principale
• Monochromes, une combinaison de deux couleurs dans le même ton
• Triadiques, 3 couleurs qui sont à égal distance sur le cercle. Un schéma dynamique qui peut mettre en scène une dominante et 2 autres en support.
• Complémentaires, chaque couleur de trouve en face de l’autre sur le cercle, de sorte à former un triangle isocèle.
• Composites, une combinaison avec un choix de couleur personnalisé
• Nuances, une seule couleur

Pour récupérer la couleur, il vous suffit de copier-coller le code HEX en bas de chaque encadré.

Une astuce très intéressante à partir de ce site : 

Composer votre propre charte graphique à partir des couleurs d’une image. Cliquez sur « créer à partir d’une image » et Kuler chargera et identifiera les différents tons de votre logo, ou d’une image que vous avez choisie.

Récupérer le code couleur d’une page web:

Dans les sites cités ci-dessus, certains donnent accès au code HEX, d’autres pas (comme Pinterest ou COLRD)

Pour récupérer facilement certaines gammes de couleur que vous auriez trouvés, vous pouvez télécharger des extensions de navigateur. Pour le navigateur Chrome, c’est Eye Dropper qu’il vous faudra, et pour le navigateur Mozilla, c’est Colorzilla.

Après l’installation de votre extension, en haut à droite de votre navigateur cliquez sur la pipette et sur « Pick color from web page« . Cliquez ensuite sur la couleur que vous désirez intégrer à votre site et enfin re-cliquez sur la pipette en haut à droite.

Il vous suffit de faire un copier-coller du code pour l’y attribuer à votre site.

Vous voilà équipés et prêts à personnaliser votre site internet dans les règles de l’art ! A vous de travailler votre code couleur, tout en ayant en tête l’image que vous souhaitez refléter sur le web, et les éléments graphiques que vous possédez déjà.