Let-the-colors-flow

9 outils pour choisir les couleurs de son site web

Quand on crée un site web (ou un blog, une infographie), on est rapidement confronté à la question des couleurs. On leur accorde une attention toute particulière car elles définissent l’ambiance dans laquelle on veut plonger l’utilisateur, elles traduisent nos goûts (ou notre identité visuelle) et véhiculent le message que l’on souhaite faire passer. Comme il n’est pas forcément evident de composer les couleurs avec harmonie , j’ai fait un petit tour d’Internet pour concocter cette liste d’outils web qui pourront vous aider à choisir les plus belles couleurs pour votre site.

Créer des palettes de couleurs harmonieuses

Paletton

Paletton est un outil gratuit que j’apprécie tout particulièrement car il est à la fois très complet et très simple à prendre en main.

Paletton home page - WebEater
Paletton

A gauche de l’écran se trouve la partie marrante de l’outil. On choisit sa couleur primaire et ses couleurs complémentaires en faisant bouger des curseurs le long d’un cercle chromatique. Sur un petit cercle concentrique au premier, on peut sélectionner ses couleurs secondaires. Le bouton Presets permet de faire varier la tonalité de notre palette (couleurs vives, pastelles, plutôt claires, plutôt foncées…). Pratique.

Le résultat de nos petites expérience est visible sur la partie droite. Les couleurs secondaires se superposent à la couleur primaire, ce qui rend le résultat très visuel. D’autres modes de visualisation, les uns plus étonnants que les autres, sont possibles en cliquant sur le bouton exemples. Enfin, il est possible d’exporter sa palette en CSS, Less, Xml et txt.

Paletton Examples - WebEater

Paletton Export - WebEater

Vous noterez que l’outil crée une url pour chaque combinaison de couleurs. Enregistrez cette url pour revenir travailler sur l’outil plus tard (voici celle de ma super palette 🙂 ).

Adobe Kuler

Adobe Kuler fonctionne sur le même principe que Paletton. On déplace les curseurs sur une roue chromatique et on voit s’afficher les couleurs résultantes. Les palettes obtenues par l’outil d’Abode sont moins fournies que celles de Paletton. Pour une « triad » par exemple, Kuler propose 5 couleurs (1 palette), là où Paletton en propose 15 (3 palettes). J’ai noté, par ailleurs, que l’outil manque un peu de réactivité.

Adobe Kuler home page - WebEater
Adobe Kuler

Point positif, on peut noter une communauté active qui produit et commente pas mal de palettes d’où on peut tirer l’inspiration. De plus, la création de palettes à partir d’images est une fonctionnalité très sympa. L’outil est capable de ressortir de bons échantillons de couleurs (sur la photo que j’ai testée en tout cas).

Une communauté très active dans Kuler
Une communauté très active dans Kuler
Adobe Kuler Exemple Images - WebEater
L’outil de création de palette à partir d’images

Colourco

Colourco est un outil de création de palettes plutôt original car il n’y a pas de roues chromatiques. Au lieu de ça, on choisit une combinaison de couleurs et on se balade sur l’écran pour faire défiler les palettes. Il est possible de visualiser des palettes d’1 à 10 couleurs. C’est très marrant.

Un exemple de palette dans Colourco - WebEater
Un exemple de palette dans Colourco

Chercher l’inspiration

Colourlovers

Colourlovers est un site communautaire de partage de palettes. Sur ce site haut en couleurs ;), les utilisateurs partagent leur passion pour la couleur à travers des palettes, des patrons ou des couleurs. S’y promener est idéal pour trouver l’inspiration.

Colourlovers Home page - WebEater
Colourlovers

Le site propose comme Kuler un outil de création de palettes à partir de photos très bien fait. Il extrait une cinquantaine de couleurs de l’image à partir desquelles on peut former sa propre palette. Pour terminer, on peut personnaliser la largeur que l’on veut donner à chaque couleur de sa palette.

Colourlovers Outil Photocopa - WebEater
L’outil Photocopa de Coulourlovers permet de créer sa palette à partir d’une photo

Colrd

Colrd est également un site communautaire de partage de palettes. Le site se veut plus design que son homologue avec une présentation des images et des palettes associées sous forme de magazine. Le résultat est magnifique.

Colrd Home Page - WebEater
Colrd

Rude Color

Curieux de savoir quel genre de bleu sera à la mode en 2015? Rude Color est fait pour vous! Original et bien écrit, ce blog parcourt les grandes tendances des couleurs en y extrayant des exemples de couleurs significatives.

Rudecolor Trending blue - WebEater
Quel bleu est tendance cette année?

Copier l’existant (en tout bien tout honneur)

ColorZilla pour Chrome et Firefox

Une couleur vous plaît sur un site web et vous voulez vous empresser de la copier? Essayez ColorZilla. C’est un plugin de Chrome et Firefox qui fait office de pipettes sur une page web. ColorZilla propose aussi un outil de génération de gradient et un outil d’analyse des couleurs d’une page web entière.

Retrouver une couleur, manipuler les couleurs

Colorhexa

Colorhexa est une sorte de bible de la couleur. Au programme, conversion de couleurs, addition de couleurs, génération de gradient. L’outil possède également une grosse liste de couleurs classées par liste alphabétique. Voici par exemple la fiche du Jungle Green :

Colorhexa Couleur Jungle green - WebEater
La fiche de Jungle green sur Colorhexa

Petite astuce pour créer rapidement un gradient entre deux couleurs : taper #couleur1 to #couleur2. En bonus, Colorhexa ressort directement le code CSS correspondant aux gradients. Plutôt pas mal.

Colorhexa Gradient - WebEater

0to255.com

Ce petit web est spécialisé pour créer des gradients autour d’une seule couleur.

Sources :

Si vous souhaitez quelques conseils pour choisir vos couleurs, je vous conseille de lire ce très bon article de Blog Wix d’où j’ai tiré quelques outils que je ne connaissais pas.

Crédits photo de couverture: jqmj (Queralt) modifiée par mes soins avec Canva

Fred

Suivez WebEater sur Facebook et Twitter pour ne pas rater l'actu du blog.

2 réponses à “9 outils pour choisir les couleurs de son site web

Laissez-moi un petit commentaire :)

%d blogueurs aiment cette page :