Pendant une de mes formations à la création de visuels pour ses réseaux sociaux professionnels, une de mes stagiaires me posa LA question.

Mais comment puis-je faire pour connaître la couleur que je dois utiliser dans mes visuels ?

Hum, en effet, Très bonne question.

Il faut savoir que la stagiaire n’a pas encore de site web, seulement une page professionnelle Facebook. Ainsi, je n’avais pas encore eu le temps de lui expliquer les questions de couleurs sur le web. C’est alors que je lui ai parlé de son Hex.

Bien évidemment, avant que je ne lui explique plus en détail, nous avons d’abord eu quelques minutes de franche rigolade. En effet, cette entrée en matière m’a permis de détendre un peu l’atmosphère pendant la formation. Ensuite, je suis entrée dans le vif du sujet.

Dans cette article, vous allez découvrir :

• Qu’est-ce qu’un HEX
• Comment connaître le code couleur HEX ?
  • Repérer le code couleur depuis une photo
  • Depuis un site web avec une extension
  • Depuis un site web, sans extension
• Que faire de votre code couleur Hex ?
• Comment utiliser un code couleur HEX pour personnaliser son site web ?
• Comment modifier les couleurs dans un thème WordPress ?

Mais qu’est-ce qu’un HEX ?

Si vous n’êtes pas familier avec les termes, disons le, très technique, le HEX, pour Hexadécimal, est tout simplement un code couleur utilisé par les graphistes, web designer, développeur pour spécifier une couleur.

Le code en lui-même représente trois valeurs distinctes qui spécifient le niveau des couleurs le composant.

Le code commencera toujours pas un dièse # et suivi de six valeurs (0-9, A-F). Par exemple : #28485c. L’ensemble représente l’intensité de lumière de Rouge, Vert et Bleu.

Ainsi, les deux premiers chiffres représentera la couleur Rouge, les deux suivant la couleur Verte et les deux derniers la couleur Bleue.

C’est pour cela que le code couleur pour le noir est #000000 et pour le blanc #FFFFFF.

Toutes les combinaisons entre représentent donc le spectre des couleurs entre les deux et beaucoup de choix de personnalisation possible.

Sachez qu’il existe également des notifications plus courtes à trois chiffres utilisées pour certaines valeurs doubles. Par exemple, on pourra également écrire #000 pour le noir ou #FFF pour le Blanc.

C’est donc ce code que l’on utilise dans le code HTML et CSS des sites web et logiciels de graphismes.

J’ai entendu parlé de code RVB, quelles différences ?

En fait, HEX n’est qu’une méthode pour définir les couleurs. Sur un site web, votre web designer préférera peut-être le code RVBA (ou RGBA en anglais) qui signifie en français dans le texte exactement la même chose soit : Rouge Vert Bleu Alpha (ou Red Green Blue Alpha en Anglais). Le dernier point Alpha, permettra de gérer l’opacité d’une couleur.

Pour faire simple, vous pouvez utiliser les deux méthodes, bien que le code Hex est souvent utilisé car plus court.

Pour terminer, il existe encore une autre méthode lorsqu’on souhaite indiquer une couleur en html. En effet, la spécification du HTML définit 16 couleurs appelées par 18 mots-clés en anglais. Vous pouvez les retrouver sur la page wikipédia des couleurs du Web.

Si vous souhaitez traduire un code dans un autre, voici un outil qui vous permettra de le faire en quelques secondes.

Et qu’en est-il du CMJN ?

Encore un autre code ? Et bien, oui. En fait, pour faire simple, cette désignation de code couleurs vous servira principalement pour l’impression.

C’est-à-dire si vous souhaitez imprimer une affiche, un flyer ou une carte de visite. Ce sont les codes dit d’imprimerie. Si je traduis encore une fois, on retrouve des couleurs Cyan Magenta Jaune et Noir (CMJN).

Vous trouverez également le terme CMYK qui signifie exactement la même chose, mais en anglais.

Comment connaître le code couleur HEX ?

Tout dépend depuis quelle source 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.

Repérer le code couleur depuis une photo

Pour connaître le code à partir d’une photo, vous aurez besoin d’un logiciel. Vous pouvez utiliser un logiciel payant tel que Photoshop, mais vous pouvez évidemment utiliser un logiciel gratuit tel que Gimp par exemple.

Néanmoins, de nos jours, plus besoin de télécharger un logiciel pour extirper 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 qu’on va même pouvoir créer toute une palette.

Comment faire ?

1. Connectez-vous au site
2. Cliquez sur l’appareil photo en haut à droite
3. Sélectionnez votre photo. Vous pouvez modifier les points pour récupérer la ou les couleurs précisément
4. Cliquez sur la roue Chromatique
5. Récupérez votre ou vos couleurs.

Il existe encore une autre méthode qui consiste à téléverser (Uploader) votre photo sur le web et d’utiliser la deuxième méthode. C’est ce que nous allons voir tout de suite.

Depuis un site web avec une extension

Parfois, on souhaite simplement déterminer une couleur utilisée par un site web qui nous plaît. Pour cela, vous aurez besoin d’une extension pour votre navigateur web. L’extension que j’utilise s’appelle Colo Zilla. Elle existe pour Google Chrome et Mozilla firefox. Il en existe d’autres que je n’ai pas testé.

Dès que vous avez installé l’extension dans votre navigateur :

1. Rendez-vous sur le site web qui possède la couleur qui vous plaît.
2. Cliquez sur la pipette qui devrait se trouver dans la zone des extensions (en haut à droite de l’adresse URL)
3. Pointez le curseur de votre souris sur la couleur.
4. Regardez sur la barre de Colorzilla en haut de la page
5. Et voilà ! Vous obtenez le code Hex de votre couleur. Simple et Facile.

Depuis un site web, sans extension

Il existe également une façon de faire qui ne nécessite ni extension, ni logiciel. En effet, vous pouvez également regarder directement dans le code du site sur lequel vous êtes.

Comme ce n’est pas le plus simple ni le plus lisible pour tout le monde, c’est pourquoi je ne l’ai pas mentionné en premier. Voici comment procéder :

1. Rendez-vous sur le site web que vous avez repéré
2. Cliquez droit sur l’élément de couleur puis sélectionnez “Inspecter” ou “Inspecter l’élément”
3. Regarder ensuite dans le code pour découvrir le code couleur HEX utilisé

Et ensuite ? Que faire de votre code couleur Hex ?

Et bien tout simplement, créer votre palette de couleur pour l’identité visuelle de votre site web pro et votre entreprise. Vous pouvez maintenant personnaliser le thème que vous avez choisi pour votre site ou tout visuel pour une page pro Facebook 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 êtes en panne d’inspiration, l’outil de graphisme gratuit que j’utilise Canva propose 100 combinaisons de couleurs toutes prêtes. Le contenu est en anglais, mais le tout est très visuel avec photos et Code couleur Hex.

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 couleur et de surtout bien les choisir. À utiliser également sans modération.

Site Calliframe – Trouver sa palette à partir d’une photo (autres méthodes)
Blog Islagraph – Créer sa palette de couleurs
Site Hellonobo – Choisir ses couleurs pour son identité visuelle

Sans oublier un peu d’inspiration avec mon tableau de couleurs sur Pinterest

Comment utiliser un code couleur HEX pour personnaliser son site web ?

Une fois que vous avez trouvé vos codes couleurs, vous allez maintenant vous en servir et les incorporer dans votre site web. Aucune inquiétude, si vous utilisez un CMS (Content Manager Système), tel que WordPress, Wix ou Squarespace, vous n’aurez qu’à inscrire le code couleur Hex que vous aurez noté dans votre guide d’identité visuelle.

Conseil : je vous suggère de vous créer un petit guide ou fiche mémo de vos couleurs et typographie. Cela sera plus simple d’avoir tout au même endroit.

Comment modifier les couleurs dans un thème WordPress ?

En général, vous pourrez personnaliser votre site grâce à votre thème. Pour retrouver l’endroit :

1. Connectez-vous à l’administration de WordPress.
2. Dans la colonne de gauche, sélectionnez “Apparence”
3. Cliquez sur “Personnaliser”.

Peu importe le thème choisi, vous devriez pouvoir repérer une section couleur ou color. Toutefois, n’oubliez pas de cliquer sur « Publier » en haut de la colonne pour sauvegarder vos changements. Voici un exemple pour le thème Hemlock.

Une autre façon de modifier les couleurs d’un thème est de toucher au code CSS du thème en question. Si vous n’êtes pas familier avec le code, je vous conseille de rester avec la personnalisation que vous offre votre thème.

Si jamais vous souhaitez toucher au Code CSS de votre thème, n’oubliez pas d’utiliser un thème enfant. Et même sans cela, c’est une recommandation dans tous les cas.

Vous savez désormais ce qu’est un code couleur HEX, comment le retrouver et l’utiliser pour personnaliser votre site web. Vous n’aurez plus d’excuses pour ne pas connaître vos codes couleurs et créer de jolies palette pour votre identité visuelle.

Si vous souhaitez être accompagné dans la création de votre identité visuelle, je vous montre dans ma prochaine formation « Créer votre identité visuelle de A à Z« . Pour en savoir plus et vous préinscrire, vous pouvez cliquer sur ce lien. Je serais ravie de vous y retrouver. Prochaine session : 2019