La construction d'un site Web peut entraîner quelques ratés inattendus, notamment la couleur. Comprendre les choix de couleurs et le rendu des couleurs sur différents ordinateurs est la première étape pour vous assurer que votre site a l'aspect que vous souhaitez.
En plus de rechercher et de sélectionner les couleurs qui vous conviennent, il est sage de développer et de gérer un jeu de couleurs pour votre projet. Il est simple de créer un ensemble de nuances dans des logiciels d’imagerie courants tels que Adobe Photoshop ou Illustrator et d’organiser les couleurs de manière à ce qu’elles soient faciles à trouver et à utiliser.
Vous aimez l'article? Assurez-vous de vous abonner à notre flux RSS et suivez-nous sur Twitter pour rester au courant du contenu récent.
Comprendre la couleur Web
Les couleurs sur le Web sont obtenues en mélangeant des combinaisons de teintes rouge, verte et bleue; cette forme de mélange de couleurs est appelée couleur RVB. Chaque teinte est représentée par un nombre compris entre 0 et 255 et chaque couleur unique a une valeur pour le rouge, le vert et le bleu. Le noir, par exemple, n'a pas de valeur de couleur lui donnant une valeur RVB de couleur de 0, 0, 0. Le premier chiffre fait toujours référence à la valeur rouge, le second au vert et le troisième au bleu.
Comme il existe 256 variantes de chaque teinte, 16 millions de combinaisons de couleurs sont possibles avec les schémas RVB. Aujourd'hui, la plupart des ordinateurs peuvent gérer les 16 millions de valeurs de couleur et les afficher avec précision. Il y en a cependant qui adhèrent encore à l'ancienne liste de 216? Web safe? couleurs développées pour que les couleurs soient rendues avec précision sur les machines utilisant une palette de 256 couleurs. Cette norme a pratiquement disparu avec les progrès de la technologie des écrans et des couleurs.
Lors de la création de couleurs, vous pouvez éventuellement créer chaque nuance à l'aide d'une valeur RVB, d'une notation hexadécimale ou d'une valeur HEX. Les valeurs Color HEX sont identifiées par six caractères précédés du signe #. Les valeurs HEX utilisent une combinaison de chiffres et de lettres; 0 est la valeur la plus basse et FF (255) la plus haute. Chacun des six caractères de la valeur HEX correspond à des chiffres dans la valeur RVB. Le noir a une valeur HEX de # 000000.
En outre, 147 couleurs sont définies par leur nom pour les applications HTML et CSS, selon w3schools.com, qui contient un tableau détaillant chaque couleur par nom et par valeur. Il existe 17 couleurs standard - aqua, noir, bleu, fuchsia, gris, gris, vert, citron vert, marron, marine, olive, violet, rouge, argenté, bleu sarcelle, blanc et jaune. Chacun a une valeur spécifique RVB et HEX. Maroon, par exemple, a une valeur RVB de 128, 0, 0 et une valeur HEX de # 800000; l'argent est 192, 192, 192 ou # C0C0C0.
Créer des échantillons de couleur
Parfois, créer un jeu de couleurs semble plus facile qu’il ne l’est. En fonction de la complexité de la conception d'un site, il peut être nécessaire d'utiliser une poignée de couleurs pour obtenir l'effet souhaité. Certains concepteurs ont le chic pour l’appariement des couleurs et créeront un schéma à partir de rien; d'autres trouveront l'inspiration d'autres sites ou de sources externes (telles que la recherche de fragments de peinture dans une quincaillerie ou les couleurs assorties trouvées dans la nature).
Les schémas de couleurs sont développés de nombreuses manières différentes en fonction des processus de pensée du concepteur. Bien que certains aient la capacité de créer des couleurs à la volée, il est courant de feuilleter un livre de couleurs ou d’utiliser une couleur à partir d’une photo. Lors de la création d'un jeu de couleurs, veillez à noter les combinaisons de couleurs de chaque partie de votre site Web, telles que l'en-tête, l'arrière-plan, la barre de navigation, la barre latérale, les couleurs du texte et les liens.
Pour utiliser les couleurs que vous avez trouvées ailleurs, prenez une photo numérique et ouvrez-la dans un logiciel de retouche photo tel que Adobe Photoshop. Effectuez un zoom avant sur l'image jusqu'à ce que les pixels soient clairement visibles et utilisez l'outil Pipette pour sélectionner les teintes souhaitées et notez leurs valeurs de couleur.
Importer des échantillons de couleur
Tous les concepteurs ne partent pas de zéro avec un jeu de couleurs. Il existe divers outils gratuits en ligne qui permettent aux utilisateurs de développer, télécharger et importer une palette de couleurs en quelques minutes. Les schémas de couleurs peuvent être créés en utilisant une seule couleur qui trouve des nuances complémentaires ou en utilisant une photo ou une autre image. Recherchez un outil fournissant les mélanges de couleurs exacts à télécharger et compatible avec le logiciel de votre ordinateur. Voici quelques options simples pour votre prochain projet.
ColorBlender
ColorBlender crée une palette instantanée de six couleurs que les concepteurs peuvent télécharger sous forme de tableau des couleurs Photoshop, Illustrator EPS ou envoyé par courrier électronique, afin de les mélanger manuellement et de les utiliser dans d’autres programmes. Les couleurs sont appariées à l'aide d'un outil de glissement pour chaque valeur RVB. Les mélanges sont agréables et ont beaucoup de portée. Vous pouvez également entrer une valeur pour une couleur que vous aimez comme point de départ. Rien n'est prédéfini, vous pouvez éditer chaque choix de couleur et même faire correspondre les couleurs PANTONE.
ColorCombos.com
ColorCombos.com possède une vaste bibliothèque de combinaisons de couleurs prédéfinies se présentant sous la forme de combinaisons de cinq couleurs pouvant être recherchées par teinte. Chacune affiche les valeurs HEX, RVB et même CMJN (pour les projets d'impression) pour chaque couleur. Les schémas sont téléchargeables au format .png. Utilisez l'outil Pipette pour extraire et enregistrer chaque valeur de couleur. Le site permet également aux utilisateurs de créer des combinaisons de couleurs personnalisées.
Générateur de palette de couleurs
Color Palette Generator est la version automatisée de la création d'un jeu de couleurs à partir d'une photo ou d'une image. Les utilisateurs peuvent sélectionner l'une des images prédéfinies ou télécharger leurs propres images pour obtenir une palette personnalisée de neuf couleurs à partir de l'image. Les combinaisons de couleurs sont bien, mais ne peuvent pas être téléchargées. Passez votre souris sur chaque teinte pour obtenir sa valeur HEX. Les valeurs RVB ne sont pas fournies.
Color Scheme Designer
Color Scheme Designer est peut-être l'outil le plus visuel qui soit. Il crée un schéma à quatre couleurs, comme beaucoup d’autres programmes, mais permet également aux utilisateurs de voir comment ce schéma peut être utilisé sur leur site, à partir d’exemples de pages claires et sombres. Le site permet aux utilisateurs de mélanger les couleurs en utilisant une grande roue de couleurs. Les schémas sont développés à l'aide de plusieurs options pour les palettes mono, complémentaires, triades, tétrades, analogiques et accentuées.Le site propose également le plus grand nombre d’options pour le format de téléchargement, notamment les options HTML, XML, Texte et Palette Photoshop. Chaque valeur de couleur a des valeurs HEX et RVB disponibles.
Organisation Swatch
Le moyen le plus simple de gérer et d’organiser les nuances dans Adobe Photoshop et Illustrator consiste à utiliser des bibliothèques de nuances. Vous pouvez configurer des combinaisons de couleurs spécifiques, les enregistrer et les ouvrir pour certains projets. (Les produits Adobe sont également prêts à l'emploi avec quelques bibliothèques de préconfigurations plutôt agréables, notamment quelques nuanciers Pantone pour les applications CMJN.)
Pour ajouter vos nouvelles couleurs à une bibliothèque de nuances, ouvrez la palette Nuancier dans le menu Fenêtre. Ce qui s'ouvre est la palette d'échantillons par défaut. (Vous pouvez voir d'autres options en cliquant sur l'onglet Développer. Chaque option fera apparaître une autre fenêtre.) Sélectionnez? Nouvelle nuance? ajouter un mélange de couleurs personnalisé ou? charger des échantillons? importer un jeu de couleurs téléchargé. Organisez les couleurs dans la palette Nuancier de la manière qui vous convient et sauvegardez. Après la sauvegarde, les nouvelles nuances de couleurs peuvent être chargées et utilisées à tout moment.
Avoir une pléthore de nuances de couleurs peut être fastidieux. Pensez à créer un nouveau fichier pour chaque projet sur lequel vous allez revenir plusieurs fois. Gardez les palettes petites et supprimez les couleurs que vous n'utiliserez pas. Nommez les couleurs de manière à ce que vous puissiez facilement vous rappeler leurs applications. Par exemple, dans la bibliothèque de nuances? Mon site Web ,? Nommez chaque nuance de couleur en fonction de son utilisation, plutôt que des valeurs RVB.
Ne sauvegardez pas les échantillons de couleur dans une bibliothèque pour des applications uniques. Cela nécessite du temps inutile; Les bibliothèques sont mieux utilisées pour les projets récurrents ou les couleurs. N'oubliez pas de supprimer les couleurs non utilisées des bibliothèques de couleurs pour les projets que vous transmettez aux clients afin que vos fichiers restent propres et organisés.
Conclusion
La première étape pour créer de superbes couleurs pour votre prochain projet, sur le Web ou sur papier, consiste à comprendre comment la couleur fonctionne et comment créer un modèle qui aura des tons complémentaires. Savoir ce que signifient les nombres associés aux couleurs vous aidera à créer (ou même à voler) facilement des échantillons.
Jouez avec les couleurs pour créer des combinaisons adaptées au projet. Une fois que vous avez un ensemble de couleurs à utiliser, il est indispensable de bien organiser vos nuances pour améliorer votre flux de travail. Utilisez les outils d’organisation de Adobe Creative Suite pour tirer le meilleur parti de son système de gestion des couleurs intégré. Regroupez et nommez les couleurs de manière synchronisée avec la manière dont elles seront utilisées.
Sources d'images: alikins et IvanWalsh.com.