Le choix d'une palette de couleurs pour un site Web est l'un des points importants du processus de conception. La sélection d'une combinaison de couleurs est un processus plutôt complexe et créatif. Heureusement, il existe de nombreux services qui peuvent apporter une aide importante pour faire le bon choix.

Certaines des ressources mentionnées dans cette revue offrent la possibilité de choisir parmi un grand nombre de jeux de couleurs prêts à l'emploi, tandis que d'autres vous permettent de créer de manière interactive votre propre jeu de couleurs.

Glacière

Adobe Kuler contient une vaste bibliothèque de jeux de couleurs prêts à l'emploi. Vous pouvez consulter le diagramme en ligne et le télécharger pour l'utiliser dans les produits Adobe Creative Suite.

Color Lovers compte actuellement près de 2 millions de combinaisons de couleurs créées par les utilisateurs. Vous pouvez les visualiser en les triant par date, note, nombre de vues.

ColoRotate dispose d'une bibliothèque de combinaisons de couleurs prêtes à l'emploi. Vous pouvez également créer votre propre diagramme à l'aide d'un outil 3D unique. La palette de couleurs peut être utilisée directement dans Photoshop et Fireworks à l'aide du plugin ColoRotate.

Color Scheme Designer vous permet de sélectionner le type de jeu de couleurs (mono, complémentaire, triade, tétrade, analogique). Ensuite, vous pouvez ajuster les couleurs et voir l'effet du schéma à l'aide d'un exemple.

ColorSchemer dispose d'une grande bibliothèque de jeux de couleurs créés par l'utilisateur. Vous pouvez les trier par date de publication, note ou nombre de téléchargements.

Pictaculous est un outil simple de génération de schémas de couleurs en ligne. Vous pouvez télécharger une image et le service générera un diagramme à utiliser avec l'image.

Flèche de couleur

Color Spire est un service très simple à utiliser. Vous choisissez une couleur de base et elle suggère une palette de couleurs. Vous pouvez également voir l'apparence du diagramme sur un modèle simple.

La couleur est l’un des éléments les plus importants dans le travail d’un designer. Mais en tant que concept, il peut être assez difficile à maîtriser : en raison des nombreuses combinaisons de palettes, il est souvent difficile de décider de la meilleure façon de concevoir l'interface des pages Web et des applications. Nous avons déjà publié des critiques d'outils de choix et . Et aujourd'hui, nous souhaitons élargir le sujet en publiant une traduction de l'article Essential Color Tools for UX Designers de Nick Babich sur le blog.

La note contient une liste des meilleurs services de sélection de couleurs pour les sites Web et la conception UX qui vous aideront à gagner beaucoup de temps. Grâce à ces projets, vous apprendrez :

• d'où puiser l'inspiration ;
• comment créer votre propre palette ;
• comment rendre le design accessible aux personnes ayant une déficience visuelle des couleurs.

1. En quête d'inspiration

Couleurs de la nature

Dessinez du monde qui vous entoure. Tout ce que vous avez à faire est de regarder autour de vous. Vêtements à la mode, couvertures de livres, décoration d'intérieur... il y a tellement de choses étonnantes autour de vous. Mais les meilleures combinaisons de couleurs sont les couleurs de la nature. Capturez un beau moment et essayez de créer votre propre sélection basée sur une image spécifique.

Les meilleures combinaisons de couleurs se trouvent dans la nature. Vous pouvez obtenir une palette de couleurs à partir de n'importe quelle photo

Behance

Dans ce service populaire, vous trouverez des travaux intéressants inclus dans les meilleurs portfolios en ligne de vrais professionnels dans leur domaine. Ce site est également une grande source d'inspiration. Pour voir de nouveaux exemples de projets intéressants, sélectionnez simplement la couleur souhaitée.

Couleurs de dribble

Dribbble est l'un des meilleurs qui sera utile lors de la création d'une interface utilisateur. Si vous souhaitez comprendre visuellement comment d'autres ont utilisé une couleur particulière, accédez à dribbble.com/colors et entrez la valeur souhaitée.

Lorsque vous choisissez une couleur pour un site, vous pouvez définir ici son pourcentage minimum - expérimentez, par exemple, essayez de définir 30 % de bleu.

Essayez de définir un pourcentage minimum d'une couleur spécifique dans Dribbble

Inspiration de conception

Designspiration est un outil utile principalement pour ceux qui ont déjà des idées de combinaisons de couleurs et souhaitent voir des exemples de telles combinaisons. Sélectionnez entre 1 et 5 options et vous trouverez des images qui correspondent aux paramètres spécifiés.

Dans Designspiration, vous trouverez différents exemples de combinaisons de couleurs

Tineye multicolore

Grâce au service de correspondance des couleurs Tineye Multicolr, vous pouvez déterminer le gamma souhaité de l'image et même définir le pourcentage de chacun d'eux (rapport). Le site est intégré à une base de données de 20 millions de photos Creative Commons de Flickr. C’est certainement l’un des moyens les plus rapides de trouver la palette parfaite.

Colorzilla

ColorZilla est une extension à installer dans les navigateurs Chrome et Mozilla Firefox. Il comprend des outils tels que la pipette, la navigation dans la palette, la création, etc.

Extension ColorZilla disponible dans Chrome et Firefox

Spectre Shutterstock

L’une des meilleures façons d’imaginer à quoi ressemblera une palette de couleurs est de regarder les images correspondantes. La plupart des solutions proposant des choix de couleurs pour la conception de sites Web incluent cette fonctionnalité, mais Shutterstock Spectrum possède une interface et un aperçu incroyablement conviviaux qui peuvent vraiment être utiles.

De plus, vous n'aurez pas besoin d'abonnement, puisqu'une évaluation préliminaire de l'image suffira amplement (même malgré le fait qu'elle porte un « filigrane »).

W3Écoles

Récemment, le blog a examiné une sélection de W3Schools. De nombreuses informations y sont collectées sur le sujet, en commençant par leurs noms/codes de nuances, la théorie de la combinaison des palettes et en terminant par une description des différents formats : HEX, RVB, CMJN, HWB, etc. Vous y trouverez également des informations simples. générateurs, convertisseurs et « mini-services » similaires. Dans l’ensemble, intéressant à regarder.

2. Créez une palette de couleurs

Outil de couleur de conception matérielle

L'outil Material Design Color vous permet de créer, de partager des schémas de couleurs et d'afficher une interface utilisateur approximative pour vos sélections. L'une de ses fonctions utiles est de mesurer le niveau d'accessibilité de n'importe quelle combinaison de couleurs.

Refroidisseurs

Coolors est un site de création d'une palette multicolore. Épinglez simplement une couleur spécifique et appuyez sur la barre d’espace. L'outil est également intéressant car vous obtiendrez plus d'un résultat, mais vous pouvez générer plusieurs options en modifiant uniquement les données initiales.

Schéma de couleurs dans Coolors basé sur la photo

Adobe Couleur CC

Le service de correspondance des couleurs Adobe Color CC (anciennement Kuler) est désormais très populaire. Il est disponible gratuitement sur Internet, mais il existe également une version désecteur. Avec cette application web, vous créerez votre propre palette à l'aide de la roue chromatique :

Ou vous pouvez obtenir un certain résultat à partir de l'image finie :

Sélectionner les couleurs d'un site Web à partir d'une image

Il existe des centaines de combinaisons toutes faites ici, recherchez-les dans la section « Regarder » :

Si vous utilisez la version de bureau, vous pouvez exporter le système de couleurs que vous avez créé vers InDesign, Photoshop et Illustrator en un seul clic.

Paletton

Il est souvent comparé au précédent Adobe Color CC car les designs sont très similaires. La seule différence est que dans Paletton, vous n'êtes pas limité à cinq paramètres, mais pouvez expérimenter des tonalités d'interface supplémentaires.

De plus, vous pouvez consulter. Avec d'autres, l'application vous permet de travailler n'importe où, simplement en utilisant votre smartphone. En plus des tâches directes de création/exportation de palettes de couleurs, vous pouvez sélectionner ici des couleurs spécifiques à partir d'images ou utiliser des options de base.

3. Rendre la palette accessible

De nos jours, les troubles de la vision des couleurs sont beaucoup plus fréquents qu’on ne le pense. Environ 285 millions de personnes dans le monde souffrent de problèmes de vision. Vous devez toujours vérifier si celui que vous choisissez est disponible pour ces utilisateurs.

Vérificateur de contraste de couleur WebAIM

Certains tons se marient bien, tandis que d’autres sont tout le contraire. Un grand nombre de projets échouent au test A/A, et c'est un fait. Il est très important de vérifier le design visuel de l'interface et le contraste des tons, surtout s'il y a beaucoup de texte sur la page. À ces fins, utilisez-le lors de la sélection des couleurs du site Web.

WebAIM Color Contrast Checker est un outil Web qui vérifie les codes de couleur en valeurs hexadécimales.

Refroidisseurs

Nous avons déjà évoqué ce service ci-dessus. Entre autres choses, Coolors vous aidera également à vérifier le daltonisme de votre palette inventée.

Type de daltonisme dans le diagramme

Au lieu du mode Normal, sélectionnez le type de problème de vision que vous souhaitez simuler. En conséquence, vous comprendrez exactement comment une personne incapable de distinguer certaines couleurs verra votre design.

Voici comment une personne atteinte de protanomalie voit une palette

NoCoffee Vision Simulator pour Chrome

En utilisant le site Web NoCoffee Vision Simulator, vous pouvez voir comment les personnes daltoniennes ou malvoyantes percevront certaines pages Web. Par exemple, si vous spécifiez le paramètre « Achromatopsia » dans la section « Color Deficiency », vous verrez la page Web en gris.

Voilà à quoi ressemble un projet de CNN pour une personne atteinte de deutéranopie.

Conclusion

Tous les services de correspondance des couleurs de sites Web et de conception UX mentionnés dans l'article vous aideront certainement dans votre recherche d'une palette intéressante et efficace. Mais rappelez-vous : la meilleure façon d’apprendre à créer des palettes étonnantes est de s’entraîner et d’expérimenter beaucoup.

L’un des éléments importants du travail d’un concepteur de sites Web consiste à créer une palette, en sélectionnant des couleurs qui se combinent harmonieusement les unes avec les autres. Le processus est assez complexe et nécessite une approche créative. Il existe un certain nombre de ressources qui peuvent faciliter grandement le travail avec la couleur.

Récemment, vous êtes peut-être tombé sur un article détaillé sur. Un peu plus tôt, j'ai publié une note similaire sur les outils de sélection avec une revue de Kuler et ColorBlender. Aujourd'hui, j'ai décidé d'élargir le thème et de proposer un peu plus d'options pour choisir les palettes de couleurs pour le site.

CouleurRotation

L'outil ColoRotate vous permet de choisir les combinaisons de couleurs les plus adaptées parmi un grand nombre de propositions toutes faites ou de créer les vôtres. En choisissant des couleurs à différents endroits sur une palette 3D rotative, vous pouvez obtenir des combinaisons basées sur l'harmonie ou le contraste, travailler avec les nuances, la luminosité, la saturation et mélanger différentes couleurs. Vous pouvez également extraire les couleurs des images finies. Il existe une version pour iPad, la synchronisation avec Photoshop est disponible. Très belle prestation.

Adobe Couleur CC

La palette Adobe Color CC et le générateur de jeux de couleurs vous permettent de :

• expérimentez des combinaisons de couleurs sur la roue chromatique interactive (7 types de systèmes de couleurs sont disponibles) ;
• générer des thèmes de couleurs à l'aide de styles prédéfinis ;
• créer des schémas de couleurs en utilisant les couleurs d'une photographie ou de toute autre image prête à l'emploi ;
• partagez votre travail et apprenez à connaître les autres en vous inspirant d’eux.

Les thèmes de couleurs créés peuvent être enregistrés dans des applications pour PC ou appareils mobiles, ainsi que dans la section « Mes thèmes » du site Web.

DeGraeve

Le site Web DeGraeve propose une variété d'outils, notamment un générateur de schémas de couleurs basé sur des images prédéfinies. Tout ce que vous avez à faire est de trouver une image sur Internet avec une palette de couleurs intéressante, de télécharger l'URL de cette image dans la ligne appropriée du site Web et de cliquer sur le bouton de génération de palette. Après quelques secondes, le programme décomposera l'image en 10 couleurs primaires, 5 sourdes (ternes) et 5 lumineuses (vibrantes), en attribuant à chacune son propre code. La palette générée est pratique à utiliser lorsque vous travaillez sur la conception de sites Web ; les couleurs se combineront parfaitement les unes avec les autres.

Contraste-A

Avec le slogan « Trouvez une combinaison de couleurs abordable », Contrast-A est conçu pour vous aider à créer des palettes personnalisées tout en expérimentant des combinaisons de couleurs. Le programme est basé sur un guide sur la compatibilité des couleurs du contenu Web (texte et arrière-plan). Pour travailler avec, des connaissances de base sur ce sujet sont souhaitables.

Le service vous permet de sélectionner 2 couleurs sur la palette et d'évaluer à quoi elles ressembleront ensemble lorsqu'elles seront utilisées comme texte et arrière-plan. De plus, des résultats sont démontrés pour la vision normale des couleurs et diverses formes de daltonisme.

CouleurZilla

Application ColorZilla pour Firefox (également disponible pour Google Chrome) pour aider les webmasters et les graphistes à travailler avec la couleur. Il sera utile aussi bien aux débutants qu’aux utilisateurs avancés. Le programme effectue une analyse des couleurs de n'importe quel point et n'importe quelle page du navigateur et extrait les couleurs nécessaires pour une utilisation dans d'autres applications. Définir la palette de couleurs de la page, sélectionner les couleurs dans un ensemble prédéfini, enregistrer celles qui sont le plus souvent utilisées dans la palette utilisateur - telle est l'étendue de ses capacités.

Pictaculeux

Pictaculous est un autre générateur de palette de couleurs basé sur des images prêtes à l'emploi. Il vous suffit de télécharger sur le site une image sélectionnée de 500 Ko maximum et son analyse des couleurs commencera immédiatement. Sous le résultat avec la palette de couleurs de l'image, une douzaine de palettes supplémentaires sont affichées, mais déjà créées manuellement, par les membres des communautés de ressources Kuler et COLOURLovers. Ils peuvent également être utilisés comme palette de couleurs pour le site Web en cours de développement. Vous pouvez envoyer le résultat à votre email et le partager sur les réseaux sociaux.

Si vous connaissez d'autres générateurs de palettes de couleurs, partagez les liens dans les commentaires.

La couleur est largement utilisée dans le design - elle vous permet de « faire revivre » le contenu - de créer un lien sémantique entre les éléments, de remplir l'œuvre d'émotions et d'ambiance. Les designers débutants choisissent des couleurs aléatoires, mais il existe des moyens d'utiliser la couleur de manière plus significative. Considérons 4 de ces méthodes, organisées selon le principe du simple au complexe.

1. Utilisez une échelle connue

Le site brandcolors.net contient plus de 500 combinaisons de couleurs de marques célèbres. Yandex, Google, Burger King utilisent la même palette dans tous leurs produits. Ces marques et leurs couleurs sont familières et appréciées de beaucoup. Tapez le nom dans la barre de recherche ou faites défiler la page, cliquez sur la marque et la couleur souhaitées : son code sera copié dans le presse-papier.

2. Choisissez une palette professionnelle prête à l'emploi

Le moyen le plus simple est de prendre une combinaison de couleurs prête à l'emploi. Il n’est pas nécessaire de réinventer la roue à chaque fois, car les combinaisons harmonieuses sont connues depuis longtemps. Allez sur colordrop.io et choisissez. Il existe des centaines de palettes professionnelles de 4 couleurs sur le site. Une fois que vous avez sélectionné celui que vous souhaitez, cliquez et copiez les codes couleurs du panneau qui s'ouvre à droite.

De plus, le service contient une sélection prête à l'emploi de 24 couleurs de design plat. Cliquez à gauche sous le nom « Flat Colors » et prenez le code de la teinte que vous aimez.

3. Déterminez la palette de couleurs de la photographie ou de l'image que vous aimez

Cette méthode est un peu plus compliquée. Mais aussi plus efficace.

• Sur le site coolors.co, dans le panneau supérieur gauche, recherchez l'icône de la caméra et cliquez dessus. Une fenêtre de téléchargement d'image s'ouvrira.
• Vous pouvez sélectionner une photo ou une image avec la palette de couleurs que vous aimez depuis votre ordinateur ou copier le lien dans une colonne vide.
• Le service déterminera la combinaison de couleurs (ci-dessous sous l'image téléchargée).
• Vous pouvez modifier les couleurs individuelles de cette palette en les marquant et en sélectionnant un point de la photo à partir duquel vous souhaitez prendre la couleur.
• Le bouton « Collage » enregistre la palette obtenue avec les codes couleurs sur l'ordinateur.
• Le bouton « Auto » génère de nouvelles combinaisons basées sur la même photo.
• Cliquez sur « Ok » et accédez à la page principale du site pour poursuivre le travail avec la palette.

La page principale du site n'est pas moins fonctionnelle. Ici, vous pouvez sélectionner des nuances de couleurs individuelles ou assembler une nouvelle palette en remplaçant des couleurs individuelles.

4. Créez votre propre palette de couleurs en ligne

En téléchargeant une photo sur le même site coolors.co, vous pouvez non seulement déterminer le code couleur, mais également créer vos propres combinaisons. Pour ce faire, appuyez sur la barre d'espace - le service crée automatiquement une combinaison de 5 couleurs.

Sur chaque couleur 4 boutons icônes:

• Nuances alternatives - Nuances de couleur (plus foncées et plus claires),
• Glisser (Déplacer une couleur vers la droite ou la gauche dans la palette),
• Ajuster (Ajuster la teinte, la saturation, la luminosité, etc.),
• Verrouiller (fixer la couleur).