Les meilleurs outils de couleur pour les concepteurs Web
En tant que concepteurs de sites Web, l'un des choix les plus importants que nous faisons concerne nos sélections de couleurs. Choisissez les mauvais et vous risquez de perdre une opportunité. C'est vrai - les couleurs que nous choisissons peuvent avoir un impact psychologique sur ceux qui les regardent.
Par exemple, le rouge est généralement considéré comme une couleur à haute énergie, tandis que le bleu implique le calme et la paix. Pour illustrer ce point, considérez les couleurs que vous pourriez utiliser sur un site Web vendant des jouets pour enfants par rapport à un site pour un cabinet d'avocats. Il y a de fortes chances que vous choisissiez 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 fonctionnent bien ensemble? Heureusement, vous n'avez pas besoin d'être un maître théorie des couleurs pour mettre en place une palette de couleurs réalisable. Pour vous aider dans la tâche importante de sélection des couleurs, voici quelques-unes des meilleures couleurs gratuites outils de conception web (plus un bonus spécial à la fin pour les utilisateurs de Mac).
01. HueSnap
L'inspiration peut frapper à tout moment. C'est peut-être le décor d'une chambre d'hôtel ou la lumière du parc un soir qui suscite l'inspiration pour la palette de couleurs de votre prochain site Web. Car lorsque cela se produit, HueSnap est là pour vous aider. Vous pouvez prendre une photo et utiliser HueSnap pour extraire les couleurs de l'image et les transformer en palette.
L'application est conçue pour une utilisation mobile et vous pouvez enregistrer et partager vos palettes 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, et vos palettes peuvent avoir jusqu'à six couleurs chacune.
02. Khroma
Khroma est un outil de couleur AI qui vise à vous aider à parcourir et comparer facilement les combinaisons de couleurs originales. Avec lui, les utilisateurs entraînent un algorithme d'IA à agir comme une extension de leur cerveau. Les utilisateurs commencent par choisir 50 couleurs qui leur plaisent, et ces couleurs sont utilisées pour former un réseau neuronal capable de reconnaître des centaines de milliers d'autres couleurs similaires. En savoir plus sur Khroma et comment l'utiliser ici .
03. Coolors.co
Coolors propose une grande variété d'outils pour 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 afin que vous puissiez vous inspirer. La section Explorer contient des centaines (voire des milliers) de palettes que vous pouvez afficher, enregistrer et modifier vous-même. Mieux encore, Coolors est disponible sur les ordinateurs de bureau et en tant qu'application iOS, un module complémentaire Adobe Photoshop et Illustrator - et même une extension Google Chrome pour un accès facile.
04. Adobe Color CC
L'outil gratuit Adobe Color CC existe depuis un certain temps et c'est l'un des meilleurs outils de couleur pour choisir une palette de couleurs. Non seulement vous pouvez créer vos propres jeux de couleurs, mais vous pouvez également explorer ce que d'autres ont créé.
Sélectionnez une couleur dans la roue ou dans une image et appliquez des règles de couleur telles que l'utilisation uniquement 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. En prime, vous pouvez enregistrer les thèmes que vous créez dans votre bibliothèque Adobe.
05. Colordot
Colordot by Hailpixel est un excellent outil en ligne gratuit pour créer une palette de couleurs. À l'aide de simples gestes de souris, vous pouvez sélectionner et enregistrer des couleurs. Déplacez votre souris d'avant en arrière pour la teinte; de haut en bas pour la légèreté; faites défiler pour saturation et cliquez pour enregistrer une couleur dans votre palette. Cliquez sur l'icône tog pour voir les valeurs RVB et TSL de chaque couleur. Il a également un 0,99 $ / 0,99 £ application iOS qui vous permet de capturer des couleurs avec votre appareil photo.
06. Eggradients
Eggradients propose des idées de beaux dégradés à utiliser dans votre travail de conception, mis en place par quelqu'un qui a à la fois un grand œil pour la couleur et un sens de l'humour intéressant. Chaque dégradé, affiché en forme d'oeuf, a son propre nom qui fait réfléchir. Les exemples incluent 'Wozniak’s Broken Heart' pour un bleu pâle et 'Merciful Enemy' pour une transition jaune à verte.
07. 147 couleurs
Lorsque vous êtes responsable de générer CSS facile à lire , parfois utiliser des couleurs standard et des noms de couleur est la voie à suivre. Grâce aux 147 couleurs de Brian Maier Jr, vous pouvez avoir un aperçu de chacune d'elles et choisir celles qui fonctionnent pour vous.
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 un arc-en-ciel complet de 147 couleurs.
08. Générateur de palette de couleurs Canva
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, Canva est très simple à utiliser: vous téléchargez une image et le générateur renvoie 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 se termine l'utilité de l'offre de Canva, car c'est tout ce que vous pouvez faire avec son générateur de palette - vous ne pouvez pas ajuster les couleurs de la palette. Les seules autres options dont vous disposez sont de copier les valeurs hexadécimales fournies ou de télécharger une autre photo.
09. Palette de conception matérielle
Avec Material Design Palette, vous pouvez sélectionner deux couleurs, qui sont ensuite converties en une palette de couleurs complète que vous pouvez télécharger, avec un aperçu.
L'entreprise propose également Couleurs de conception des matériaux , qui permet aux concepteurs de voir les différentes nuances d'une couleur, ainsi que leurs valeurs HEX correspondantes.
dix. Code de couleur
ColourCode par Tamino Martinius et Andreas Storm est similaire à Colordot, mais il offre un peu plus de conseils. Cet outil gratuit vous frappe en plein visage, mettant en valeur un arrière-plan qui change de couleur avec le mouvement de votre curseur. En plus de cela, cet outil propose différentes catégories pour la palette (analogique, triade, quad, monochrome, 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.
Onze. Calculatrice de couleurs
Le calculateur de couleurs 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 palette de couleurs recommandée.
Ce qui est bien sur ce site, cependant, c'est qu'il donne également un peu de détails sur la théorie des couleurs et son lien avec vos choix de couleurs.
12. Code couleur HTML
Cette suite d'outils gratuits et bombés de Dixon & Moe comprend un sélecteur de couleurs détaillé avec de nombreuses explications sur les règles de couleur; une série de nuanciers comportant des couleurs de conception plates, le schéma de conception matérielle de Google et la palette de couleurs Web sécurisée classique; et une liste de noms et de codes de couleur HTML standard.
Ce site propose également des tutoriels et d'autres ressources pour les concepteurs 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 qui comprend un guide des couleurs, ainsi qu'un certain nombre d'outils différents, le tutoriel sur les couleurs de W3Schools est le choix parfait.
Non seulement vous pouvez en apprendre davantage sur la théorie des couleurs, les roues chromatiques et les teintes de couleur, mais vous pourrez également 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. Indicateur de couleur numérique (Mac)
OK, utilisateurs Mac ... celui-ci est pour vous. Avec l'outil Digital Color Meter intégré à votre machine, vous pouvez «saisir» une couleur de 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.
Lire la suite:
- Si les célébrités étaient les couleurs Pantone
- 3 grandes tendances de couleurs pour 2018
- Comment choisir la palette de couleurs parfaite à chaque fois
