Le choix des couleurs a un impact significatif sur le rendu visuel de votre site web / application mobile. Vous devez choisir des couleurs qui vont bien ensemble, et ce n’est forcément si évident.
Pour vous aider dans cette étape importante du web design, nous vous présentons quelques uns des meilleurs outils web disponibles pour générer des palettes de couleurs et vous aider dans le choix de votre set couleurs.
#1 Coolors
Coolors se définit comme « le générateur de palettes de couleurs super rapide ». La promesse est honorée. Son interface interactive est très intuitive : vous pouvez éditer chaque couleur, changer leur ordre, les étendre… La bibliothèque de palettes est très riche et sans cesse enrichie (plus de 250 000 palettes), permettant des combinaisons infinies. L’outil est disponible en application mobile (iOS et Android) et en extension Google Chrome. Coolors vous permet aussi de charger une image pour vous inspirer de ses couleurs.
Dans le choix des couleurs de votre site web, vous devez évidemment prendre en compte le critère esthétique, mais aussi étudier l’impact psychologique de chaque couleur. Découvrez notre guide complet sur le sujet : « Choisir les couleurs de votre site internet – Impact psychologique et exemples« .
#2 Adobe Color CC
Adobe Color CC est le nouveau nom d’Adobe Kuler. Cet outil, assez puissant, édité par Adobe, permet de créer des palettes de couleurs très riches à partir d’une roue chromatique. Vous pouvez enregistrer vos palettes, pour le utiliser sur les outils de la suite Adobe. Vous pouvez explorer des palettes de couleurs créées par d’autres utilisateurs de la communauté Adobe. Vous pouvez appliquer des règles afin de créer des set couleurs personnalisés (monochrome, triade, composite, complémentaire…). Comme sur Coolors, vous pouvez avec Adobe Color CC utiliser des images et leur appliquer des effets pour personnaliser votre set. L’interface est assez intuitive, mais l’outil est plus riche fonctionnellement que d’autres. La courbe d’apprentissage est plus grande.
Découvrez 15+ sources d’inspiration pour le design d’un site web.
#3 Colour Lovers
COLOURlovers est un générateur de palettes de couleurs un peu original. Il s’agit au départ d’un site web communautaire qui permet à tous les designers de partager leurs set couleurs. La bibliothèque compte aujourd’hui plus d’un million de palettes. L’approche est intéressante, mais cela suppose d’avoir une petite idée des couleurs que l’on souhaite créer. Un forum de discussion est proposé pour échanger avec les autres utilisateurs. COLOURlovers met aussi en avant les grandes tendances du moment, en proposant les palettes de couleurs utilisées par les gros sites web.
#4 Color Hunt
Construit sur le modèle de Product Hunt, Color Hunt est un outil très simple à utiliser qui permet, en un coup d’oeil, de visualiser des dizaines de set couleurs différents. De nouvelles palettes sont proposées chaque jour. Une excellente source d’inspiration !
#5 Color by Hailpixel
Le gros point fort de Color by Hailpixel est la simplicité de son interface. On ne peut pas faire plus simple. Vous n’avez qu’à utiliser votre souris d’ordinateur pour faire varier les couleurs, les contrastes, la saturation…Vous n’avez qu’à faire un clic pour ajouter une couleur à votre set. Un outil à tester absolument !
Découvrez la liste complète des meilleures banques d’icônes web gratuites.
#6 Colour Code
Colour Code utilise le même type d’interface que Color by Hailpixel, basée sur les mouvements de souris. L’outil vous permet de générer manuellement vos palettes et de les exporter (en .scss, .less ou .png). Vous pouvez aussi générer vos palettes automatiquement à partir d’une couleur de base. Il suffit de bouger le curseur de la souris pour faire varier les couleurs. Colour Code propose une version premium pour aller plus loin et accéder à plus d’options.
#7 Sip
Sip permet de générer et partager des palettes de couleurs à partir de photos prises sur l’iPhone. L’outil est disponible sous forme d’application mobile iOS. Seul bémol : avec la version gratuite de Sip, vous êtes limité dans le nombre d’exportations.
100% gratuit - 3 min
#8 Color Scheme Designer (Paletton)
Paletton est probablement l’un des outils les plus complets de la liste. Il propose un nombre important de fonctionnalités et d’options pour créer des palettes de couleurs entièrement personnalisées. Paletton propose pas moins de 34 effets visuels par exemple. La courbe d’apprentissage est assez importante, même si l’interface se laisse maîtriser avec de la patience. Vous pouvez choisir une ou plusieurs couleurs principales en utilisant la roue chromatique et utiliser la partie centrale de la roue pour choisir des nuances et les couleurs secondaires. Un aperçu sous forme de site web, à droite de l’écran, permet de se faire instantanément une idée du résultat. Les palettes sont exportables au format de votre choix (png, css…).
#9 Cohesive Colors
Cohesive Colors est un outil à l’interface très simple permettant de créer des palettes de couleurs harmonieuses. Cohesive Colors permet de générer automatiquement des palettes de couleurs simples. Vous pouvez ensuite éditer chaque couleur manuellement et appliquer des filtres pour obtenir le set couleurs de votre choix.
Découvrez notre guide complet sur l’art d’optimiser les images pour le web : choix du format, compression et bonnes pratiques.
#10 Colr
Colr permet de générer des palettes de couleurs à partir d’images (chargées à partir de Flickr aléatoirement ou chargées soi-même depuis son serveur) et de fouiller dans une bibliothèque composée de plus de 17 000 set couleurs.
#11 Palettr
Palettr est un générateur de set couleurs original dans son approche. Il permet de générer des palettes de couleurs à partir de mots-clés – contrairement à la plupart des autres outils qui se basent sur des images. Vous taper un mot-clé (printemps par exemple), Palettr vous propose des photos en lien avec le mot-clé et vous permet ensuite d’éditer la palette de la photo qui vous intéresse. C’est un outil très pertinent lorsque vous avez une idée de l’atmosphère ou du thème sans savoir vraiment quelles couleurs utiliser. Palettr peut faire double emploi et être utilisé pour trouver des images pour illustrer votre site web.
#12 Mudcube Color Sphere
Mudcube Color Sphere permet de générer des palettes de couleurs avec un niveau de granularité très élevé, mais également d’exporter les palettes dans à peu près tous les formats (y compris aux formats PhotoShop et Illustrator). L’outil propose 10 options pour générer automatiquement des palettes (complémentaire, neutre, triade…).
#13 Color Combos
Color Combos est un outil d’une très grande simplicité permettant de générer des palettes de couleurs à partir de rien. Pour les paresseux, l’outil permet de générer des sets couleurs au hasard. Vous pouvez aussi générer des palettes à partir d’images.
Découvrez notre guide complet sur le wireframing pour apprendre à réaliser des maquettes fonctionnelles web.
#14 Color Hunter
Color Hunter vous permet de générer ou de découvrir des palettes de couleurs à partir d’images. Vous pouvez charger une image dont vous appréciez les couleurs pour que l’outil vous génère la palette. Vous pouvez aussi, si vous êtes plus fainéant, découvrir des palettes déjà générées par d’autres utilisateurs. Color Hunter vous donne également la possibilité d’appliquer des filtres sur les couleurs pour créer des palettes personnalisées.
Découvrez 8 règles d’or d’ergonomie web à connaître avant de créer votre site internet.
#15 Pictaculous (MailChimp)
Fonctionnalité de MailChimp, Pictaculous fonctionne sur le même principe que Color Hunter et que quelques autres outils présentés dans notre sélection. Il vous permet de générer des palettes de 5 couleurs à partir d’images uploadées. Pictaculous est compatible avec l’iPhone et permet aussi de découvrir des palettes générées par les communautés COLOURlovers et Adove Color CC. Les palettes peuvent être exportées en fichier Adobe.
Si le sujet du webdesign vous intéresse, je vous invite fortement à parcourir ces articles :
le :
Lorsque vous souhaitez créer un site web, le choix des couleurs est toujours important, Les couleurs véhiculent une identité et une ambiance, et bien au delà du simple site web, par exemple, voici un lien intéressant sur la roue en décoration
https://www.decoenligne.org/le-cercle-chromatique-des-couleurs-et-lutilisation-des-couleurs-en-decoration-interieure/
le :
J’ai développé une petite application pour tester les chartes graphiques https://wd26.fr/realisations/charte-graphique. Si ça peut aider quelqu’un, je vous en fait profiter.
Pour entrer vos couleurs, cliquez sur le chevron à droite
le :
merci pour votre apport, ci-après (et si cela vous convient), quelques corrections orthographiques pour appuyer votre partage ‘)
» Ce site, utilisé conjointement au site coolors.co, permet de tester rapidement une charte graphique, de façon à voir si les couleurs vont bien ensemble (si ça ne manque pas de contraste, si tout est bien lisible et ne manque pas de cohérence). Pour changer la charte graphique, il suffit de cliquer sur le chevron descendant et de remplir le code hexadecimal des ou de la nouvelle couleur et le changement dans la boite de texte entraine le changement des couleurs dans les différents éléments. Je vous conseille vivement de refermer, après vos changements, la boite de couleurs pour avoir vraiment l’idée de ce que donne la charte graphique. On retrouve au moins une couleur dominante, une couleur secondaire et une couleur d’accent, avec des proportions d’utilisation différentes : respectivement 60, 30 et 10 % sur vos éléments graphiques. »