Les outils de couleur aident les graphistes et développeurs web avec l’un des choix les plus importants que nous ferons lors de la création d’un site : les sélections de couleurs. Les couleurs que nous choisissons peuvent avoir un impact psychologique sur ceux qui les regardent, il est donc important de bien faire les choses.
Par exemple, le rouge est souvent considéré comme une couleur à haute énergie, tandis que le bleu signifie le calme et la paix. Pour illustrer ce point, considérez les couleurs que vous pourriez utiliser sur un site internet vendant des jouets pour enfants par rapport à un site pour un cabinet d’avocats. Il y a de fortes chances que vous optiez pour des couleurs vives et vibrantes pour le premier et des tons atténués de bleu et de gris pour le second.
Mais comment savoir quelles couleurs vont bien ensemble ? Heureusement, vous n’avez pas besoin d’être un maître en théorie des couleurs pour créer une palette. Pour vous aider dans la tâche importante de sélection des couleurs, nous vous proposons ci-dessous une liste des meilleurs outils de couleur pour les développeurs de sites Web.
01. HueSnap
HueSnap est là pour vous aiguiller chaque fois que l’inspiration vous vient. Ce pourrait être le décor d’une chambre d’hôtel ou la lumière dans le parc un soir qui suscite une idée pour la prochaine palette de couleurs de votre site Web. Prenez une photo et utilisez HueSnap pour extraire les couleurs de l’image et en faire une palette.
L’application est conçue pour une utilisation mobile, et vous pouvez enregistrer et partager vos palettes (comportant jusqu’à six couleurs chacune) avec d’autres. Il existe de nombreuses fonctionnalités pour vous aider à modifier une palette, telles que des options pour choisir des couleurs complémentaires et composées.
02. Khroma
Khroma est un outil de couleur AI qui vous aide à parcourir et à comparer facilement des combinaisons de couleurs originales. Vous entraînez un algorithme d’IA à agir comme une extension de votre cerveau. Commencez par choisir 50 couleurs que vous aimez ; ces couleurs sont utilisées pour entraîner un réseau neuronal capable de reconnaître des centaines de milliers d’autres couleurs similaires.
03. Coolors.co
Coolors offre une grande variété d’outils, à vous d’ajuster la palette comme vous le souhaitez. De plus, vous pouvez exporter votre création finale dans de nombreux formats différents afin de pouvoir l’utiliser pratiquement partout où vous le souhaitez. Coolors n’est pas seulement un outil pour créer une palette de couleurs, il vous permet également de visualiser d’autres créations réalisées par d’autres utilisateurs pour vous inspirer. La section “Explorer” contient des centaines (voire des milliers) de palettes que vous pouvez afficher, enregistrer et modifier vous-même.
Coolors est disponible sur les ordinateurs de bureau. Mieux encore, il dispose également d’une application iOS, d’un module complémentaire Adobe (PhotoShop, Illustrator, InDesign) et même d’une extension Google Chrome pour un accès facile et rapide.
04. Adobe Color CC
L’outil gratuit Adobe Color CC existe depuis de nombreuses années, et c’est l’un des meilleurs outils de couleur pour choisir une palette de couleurs. Non seulement vous pouvez créer vos propres schémas de couleurs, mais vous pouvez aussi explorer ce que d’autres ont créé. Sélectionnez une couleur dans la roue (ou à partir d’une image) et appliquez des règles de couleur telles que l’utilisation exclusive de couleurs complémentaires, de couleurs monochromatiques ou de nuances de la couleur que vous sélectionnez, pour générer une palette de couleurs. (Ou cliquez sur chaque couleur et explorez la roue chromatique pour personnaliser la sélection.)
Les nouvelles fonctionnalités d’Adobe Color CC sont constituées d’outils d’accessibilité, qui vous indiquent si les couleurs que vous sélectionnez sont sans danger pour les daltoniens et peuvent être utilisées comme arrière-plan pour un texte lisible.
05. Colordot
Colordot par Hailpixel est un excellent outil en ligne gratuit pour créer une palette de couleurs. À l’aide de simples gestes de la souris, vous pouvez sélectionner et enregistrer des couleurs. Déplacez votre souris de gauche à droite pour la teinte ; de haut en bas pour plus de légèreté ; faites défiler pour la saturation et cliquez pour enregistrer une couleur dans votre palette. Cliquez sur l’icône roue dentée pour voir les valeurs RVB et HSL de chaque couleur. Il existe même une application iOS qui vous permet de capturer des couleurs avec votre appareil photo.
06. Eggradients
Eggradients propose des idées pour de beaux dégradés à utiliser dans votre travail de conception, mis en place par quelqu’un avec à la fois un grand œil pour la couleur et un sens de l’humour intéressant. Chaque dégradé, affiché en forme d’œuf, porte bien son nom. Les exemples incluent “Wozniak’s Broken Heart” pour un bleu pâle et un dégradé bordeaux appelé “Tax-free income”.
07. 147 colors
Lorsque vous êtes responsable de la génération de CSS faciles à lire, l’utilisation de couleurs et de noms de couleurs standard est parfois la solution. Grâce à 147 couleurs de Brian Maier Jr, vous pouvez avoir un aperçu de toutes les couleurs et choisir celles qui vous conviennent. Il contient les 17 couleurs standard plus 130 autres noms de couleurs CSS. Filtrez les résultats par nuances de bleu, de vert, etc., ou choisissez parmi l’arc-en-ciel.
08. Canva Color Palette Generator
Le générateur de palette de couleurs de Canva est parfait si vous cherchez à créer une palette de couleurs basée sur une image particulière. Bien que d’autres outils offrent des options similaires (comme HueSnap), Canva est très simple à utiliser : vous téléchargez une image et le générateur vous propose une palette des cinq couleurs principales qu’elle contient. Vous pouvez cliquer sur les couleurs que vous aimez et copier la valeur HEX dans votre presse-papiers.
Malheureusement, c’est là que s’arrête l’utilité de cette offre. Vous ne pouvez pas ajuster les couleurs de la palette générée. Les seules autres options dont vous disposez sont de copier les valeurs hexadécimales fournies ou de télécharger une nouvelle photo. Vous pouvez également utiliser la roue chromatique de Canva pour créer manuellement une palette personnalisée.
09. Material Design Palette
Avec Material Design Palette, vous pouvez sélectionner deux couleurs, qui sont ensuite converties en une palette de couleurs complète à télécharger, avec un aperçu. La société conseille également Material Design Colors, qui permet aux concepteurs de sites web de voir les différentes nuances d’une couleur, ainsi que leurs valeurs HEX correspondantes.
10. ColourCode
ColourCode de Tamino Martinius et Andreas Storm est similaire à Colordot, mais il offre un peu plus de conseils. Cet outil gratuit vous montre un arrière-plan qui change de couleur avec le mouvement de votre curseur. En plus de cela, cet outil présente différentes catégories pour la palette (analogique, triade, quad, monochrome, lumière monochrome, etc.).
Avec ColourCode, vous pouvez définir différentes options le long de la roue chromatique pour créer une combinaison originale. Vous pouvez également enregistrer votre palette ou l’exporter sous forme de fichier SCSS ou LESS. Vous pouvez même exporter au format PNG, si vous le souhaitez.
11. Color Calculator
Le calculateur de couleurs de Sessions College est simple : vous sélectionnez une couleur et une option d’harmonie des couleurs. En retour, vous récupérez les résultats de votre schéma de couleurs recommandé. Ce qui est bien avec ce site, c’est qu’il entre également dans les détails de la théorie et le lien des couleurs avec vos choix de couleurs. (Cela semble approprié, étant donné qu’il s’agit d’un site hébergé par un établissement d’enseignement.)
12. HTML Color Codes
HTML Color Codes est une suite d’outils gratuits de Dixon & Moe qui comprend un sélecteur de couleurs approfondi avec de nombreuses explications sur les règles de couleur ; une série de nuanciers présentant des couleurs pour le flat design, le schéma de conception de matériel de Google et la palette de couleurs classique sécurisée pour le Web ; et une liste de noms et de codes de couleurs HTML standard.
Ce site propose par ailleurs des didacticiels et d’autres ressources pour les designers Web, ainsi que des options pour exporter les résultats de ses outils sous forme de codes HEX, de styles HTML, CSS et SCSS.
13. W3Schools : Tutoriel sur les couleurs
Si vous recherchez une solution tout-en-un comprenant un guide des couleurs, ainsi qu’un certain nombre d’outils différents, le didacticiel sur les couleurs de W3Schools est le choix idéal. Non seulement vous pouvez en apprendre davantage sur la théorie des couleurs, les roues chromatiques et les teintes de couleur, mais vous pourrez aussi utiliser les autres outils dont il dispose, tels que le convertisseur de couleurs. Avec cet outil, vous pouvez convertir n’importe quelle couleur vers et depuis les noms, les codes HEX, les valeurs RVB, HSL, HWB et CMJN.
14. Digital Color Meter (Mac)
OK, chers utilisateurs de Mac, celui-ci est pour vous ! Grâce à l’outil Digital Color Meter intégré à votre machine, vous pouvez « saisir » une couleur depuis n’importe où sur votre écran, puis obtenir les valeurs de cette couleur sous forme décimale, hexadécimale ou en pourcentage. De plus, vous pouvez même “copier” la couleur sélectionnée sous forme de texte ou d’image.