A découvrir également : Comment faire baisser le prix d'une voiture occasion ?
Partager 393 Tweet Enregistrer 87 Partager 480 Partages
Lors d'une de mes formations sur la création de visuels pour ses réseaux sociaux professionnels, une de mes stagiaires m'a posé LA question .
Lire également : Comment entretenir sa voiture ?
Mais comment savoir quelle couleur je dois utiliser dans mes visuels ?
Hum, en effet, très bonne question.
Il faut savoir que le stagiaire n'a pas encore de site Web, mais seulement une page Facebook professionnelle. Je n'avais donc pas encore eu le temps de lui expliquer les problèmes de couleur sur le web. C'est là que je lui ai parlé de son Hex .
Bien sûr, avant de l'expliquer en détail, nous nous sommes d'abord amusés quelques minutes. En effet, cette entrée dans la matière m'a permis de relaxer un peu l'atmosphère pendant la formation. Ensuite, je suis entré dans le vif du sujet.
Dans cet article, vous découvrirez :
- Qu'est-ce qu'un HEX
- Comment connaître la couleur HEX ? Le code ?
- Localisez le code couleur d'une photo
- Depuis un site Web doté d'une extension
- Depuis un site Web, sans extension
- Que faites-vous avec votre code couleur Hex ?
- Comment utiliser un code couleur HEX pour personnaliser votre site Web ?
- Comment modifier les couleurs d'un thème WordPress ?
Plan de l'article
Mais qu'est-ce qu'un HEX ?
Si vous n'êtes pas familier avec les termes, disons, très technique, HEX, pour Hexadécimal, est simplement un code couleur utilisé par les graphistes, les concepteurs Web, les développeurs pour spécifier une couleur.
Le code lui-même représente trois valeurs distinctes qui spécifient le niveau de couleur du composant.
Le code commencera toujours par un numéro de hachage et sera suivi de six valeurs (0-9, A-F) . Par exemple : #28485c. L'ensemble représente l'intensité de la lumière rouge, verte et bleue.
Ainsi, les deux premiers chiffres représenteront la couleur rouge, les deux suivants la couleur verte et les deux derniers chiffres la couleur bleue.
C'est pourquoi le code couleur pour le noir est #000000 et pour le blanc #FFFFFF.
Toutes les combinaisons entre elles représentent donc le spectre des couleurs entre les deux et de nombreux choix de personnalisation possibles.
Sachez qu'il existe également des notifications à trois chiffres plus courtes utilisées pour certaines valeurs doubles. Par exemple, vous pouvez également écrire #000 pour le noir ou #FFF pour le blanc.
C'est donc ce code que les sites Web et les logiciels graphiques sont utilisés dans le code HTML et CSS.
J'ai entendu parler du code RGB, quelles sont les différences ?
En fait, HEX n'est qu'un moyen de définir les couleurs. Sur un site Web, votre concepteur Web peut préférer le code RVBA (ou RGBA en anglais), ce qui signifie en français dans le texte exactement la même chose : Red Green Blue Alpha (ou Red Green Blue Alpha in anglais). Le dernier point Alpha vous permettra de gérer l'opacité d'une couleur.
Pour faire simple, vous pouvez utiliser les deux méthodes, bien que le code hexadécimal soit souvent utilisé car il est plus court.
Enfin, il existe une autre méthode pour spécifier une couleur en html. En effet, la spécification HTML définit 16 couleurs appelées par 18 mots-clés en anglais. Vous pouvez les trouver sur la page Wikipédia des couleurs du Web.
Si vous souhaitez traduire un code en un autre, voici un outil qui vous permettra de le faire en quelques secondes.
Et qu'en est-il du CMJN ?
Un autre code ? Eh bien, oui. En fait, pour dire les choses simplement, cette désignation de code couleur sera principalement utilisée pour l'impression.
C'est-à-dire si vous souhaitez imprimer une affiche, un flyer ou une carte de visite. Ce sont ce que l'on appelle les codes d'impression. Si je traduis à nouveau, on retrouve les couleurs Cyan, Magenta, Jaune et Noir (CMJN).
Vous trouverez également le terme CMJN qui signifie exactement la même chose, mais en anglais.
Comment connaître le code couleur HEX ?
Tout dépend de la source à partir de laquelle vous souhaitez identifier le code. En effet, les méthodes seront légèrement différentes si vous repérez une couleur sur un site web ou sur une photo.
Localisez la couleur du code à partir d'une photo
Pour connaître le code d'une photo, vous aurez besoin d'un logiciel. Vous pouvez utiliser des logiciels payants tels que Photoshop, mais vous pouvez évidemment utiliser des logiciels libres comme Gimp par exemple.
Cependant, de nos jours, il n'est pas nécessaire de télécharger un logiciel pour extraire une couleur d'une photo. En effet, je vais vous montrer comment utiliser le site Color d'Adobe pour obtenir un code couleur. Je dirai même que nous pourrons même créer toute une palette.
Comment est-ce que je fais ?
- Connectez-vous au site
- Cliquez sur la caméra en haut à droite
- Sélectionnez votre photo. Vous pouvez modifier les points pour obtenir la ou les couleurs
- précisément Cliquez sur la roue chromatique
- Récupère ta (tes) couleur (s).
Il existe une autre méthode pour télécharger (télécharger) votre photo sur le Web et utiliser la deuxième méthode. C'est ce que nous allons voir tout de suite.
Depuis un site Web doté d'une extension
Parfois, nous voulons simplement déterminer une couleur utilisée par un site Web qui nous plaît. Pour ce faire, vous aurez besoin d'une extension pour votre navigateur Web. L'extension que j'utilise s'appelle Colo Zilla. Il existe pour Google Chrome et Mozilla Firefox . Il y en a d'autres que je n'ai pas testés.
Dès que vous avez installé l'extension dans votre navigateur :
- Accédez au site Web qui a la couleur que vous aimez.
- Cliquez sur la pipette qui doit se trouver dans la zone des extensions (en haut à droite de l'URL)
- Pointez le curseur de la souris sur la couleur.
- Regardez dans la barre Colorzilla en haut de la page
- Et c'est tout ! Vous obtenez le code hexadécimal de votre couleur. Simple et facile.
Depuis un site Web, sans extension
Il existe également un moyen de le faire qui ne nécessite aucune extension ou logiciel. En effet, vous pouvez également consulter directement le code du site sur lequel vous vous trouvez.
Comme ce n'est pas le plus facile ni le plus lisible pour tout le monde, c'est pourquoi je ne l'ai pas mentionné en premier. Voici comment procéder
- Accédez au site Web que vous avez repéré
- Cliquez avec le bouton droit de la souris sur l'élément de couleur et sélectionnez « Inspecter » ou « Inspecter l'élément »
- Ensuite, regardez dans le code pour découvrir le code couleur HEX utilisé
Gif par Workshop 337
Et ensuite ? Que faites-vous avec votre code couleur Hex ?
Eh bien, il vous suffit de créer votre palette de couleurs pour l'identité visuelle de votre site Web professionnel et de votre entreprise. Vous pouvez désormais personnaliser le thème que vous avez choisi pour votre ou tout autre visuel pour une page Facebook pro par exemple.
Voici quelques sites pour créer votre propre palette de couleurs et quelques exemples.
https://brandcolors.net/ www.color-hex.com/color-palettes/ www.colourlovers.com
Si vous n'avez plus d'inspiration, l'outil graphique gratuit que j'utilise Canva propose 100 combinaisons de couleurs prêtes à l'emploi . Le contenu est en anglais, mais le tout est très visuel avec des photos et un codage couleur hexadécimal.
https://www.canva.com/learn/100-color-combinations/
Pour aller plus loin, je vous invite à lire ces trois articles qui vous permettront de créer votre palette de couleurs et surtout de bien les choisir. Également à utiliser sans modération.
Site Calliframe - Trouver votre palette à partir d'une photo (autres méthodes) Islagraph Blog - Création de votre palette de couleurs Site Hellonobo - Choisir vos couleurs pour votre visuel Identité
Sans oublier un peu d'inspiration avec mon nuancier sur Pinterest
Comment utiliser un code couleur HEX pour personnaliser votre site Web ?
Une fois que vous avez trouvé vos codes couleur, vous allez maintenant les utiliser et les incorporer à votre site Web. Ne vous inquiétez pas, si vous utilisez un CMS (Content Manager System), tel que WordPress, Wix ou Squarespace, il vous suffit de saisir le code couleur hexadécimal que vous avez noté dans votre guide d'identité visuelle.
Conseil : Je vous suggère de créer un petit guide ou une feuille de notes de vos couleurs et de votre typographie. Il sera plus facile d'avoir tout au même endroit.
Comment modifier les couleurs d'un thème WordPress ?
En général, vous pouvez personnaliser votre site avec votre thème. Pour trouver le lieu :
- Connectez-vous à l'administration de WordPress.
- Dans la colonne de gauche, sélectionnez « Apparence »
- Cliquez sur « Personnalisez . »
Quel que soit le thème choisi, vous devriez pouvoir repérer une couleur ou une section de couleur. Cependant, n'oubliez pas de cliquer sur « Publier » en haut de la colonne pour enregistrer vos modifications . Voici un exemple pour le thème Hemlock.
Une autre façon de modifier les couleurs d'un thème consiste à toucher le code CSS du thème en question. Si vous n'êtes pas familier avec le code, je vous conseille de rester avec la personnalisation qui vous propose votre thème.
Si jamais vous souhaitez toucher le code CSS de votre thème, n'oubliez pas d'utiliser un thème enfant. Et même sans cela, il s'agit en tout cas d'une recommandation.
Vous savez maintenant ce qu'est un code couleur HEX, comment le trouver et l'utiliser pour personnaliser votre site Web. Vous n'aurez plus d'excuses pour ne pas connaître vos codes couleur et créer de belles palettes pour votre identité visuelle.
Si vous voulez être accompagné dans la création de votre identité visuelle, je vous le montre dans ma prochaine formation « Créer votre identité visuelle de A à Z ». Pour en savoir plus et pour vous préinscrire, vous pouvez cliquer sur ce lien. Je serais ravi de vous y voir. Prochaine session : 2019
Bienvenue, je suis Gaia !
Je suis formateur Web pour (micro) entrepreneurs, petites entreprises et pigistes.
Ici, sur le blog, j'aime partager mes conseils liés à WordPress, Webdesign, Organization & Biz sans oublier Divi, mon thème WordPress préféré.
Facebook Pinterest Instagram Twitter
Merci ! Veuillez vérifier vos courriels pour confirmer votre inscription.
Une erreur s'est produite lors de la soumission de votre abonnement. Veuillez réessayer.
E-mail Idownload
