Comment trouver le code d’une couleur depuis un site ou une photo ?

Tu es en train de créer ton site ou tes prochains posts Instagram et là… tu galères à retrouver la couleur exacte de ton logo ou d’un élément graphique.

Ou alors, tu te balades sur un site et tu tombes sur la couleur parfaite pour ton flyer. Comment la récupérer* sans tâtonner pendant des heures ?

*attention : s’inspirer oui. Copier une palette que tu trouves sur internet : c’est un grand non.

La solution ? Le code hexadécimal.

C’est quoi un code hexadécimal ?

Le nom fait un peu peur, mais je te rassure : rien de compliqué là-dedans.

Un code hexadécimal (ou code HEX pour les intimes) est une suite de 6 caractères, mélangeant chiffres et lettres, qui permet d’identifier précisément une couleur.

Par exemple :

Blanc = #FFFFFF

Noir = #000000

Rose poudré = #F4D1C9

Concrètement, à quoi sert un code hexadécimal ?

C’est une façon universelle de définir une couleur, peu importe l’écran ou l’outil que tu utilises.

Et c’est super utile pour garder une cohérence visuelle sur tous tes supports.

Bref, si tu veux que ton site, tes visuels Instagram et tes documents Canva aient exactement la même couleur, tu devras utiliser le code hexadécimal.

Les autres codes couleurs que tu peux croiser sur internet

Si tu fouilles un peu sur internet, tu risques aussi de tomber sur d’autres types de codes couleurs.

Voici les principaux : RVB, CMJN ou HSL.

A quoi correspond le code RVB ?

Le code RVB (Rouge, Vert Bleu) est un système de codage des couleurs basé sur un mélange de Rouge, Vert et Bleu. Chaque couleur est définie par une combinaison de ces trois teintes, avec une intensité comprise entre 0 et 255.

Exemple : Le noir s’écrit (0, 0, 0), le blanc (255, 255, 255), et un rouge vif (255, 0, 0).

Le RVB est principalement utilisé pour les écrans (ordinateurs, téléphones, télévisions).

CMJN, c’est quoi ?

Le code CMJN (pour Cyan, Magenta, Jaune, Noir) est utilisé pour l’impression. Il repose sur un mélange de Cyan, Magenta, Jaune et Noir pour créer différentes teintes.

Exemple : Un bleu vif peut être obtenu avec (100, 80, 0, 0), tandis qu’un noir profond sera (0, 0, 0, 100).

C’est le format idéal pour garantir un rendu fidèle des couleurs sur papier.

Et HSL ?

HSL signifie Teinte, Saturation, Luminosité. Ou plutôt Hue, Saturation, Lightness. Il s’agit d’un autre moyen de définir une couleur.

Voici comment il fonctionne :
🎨 H (Hue – Teinte) : Correspond à la couleur sur un cercle chromatique, exprimée en degrés (0° pour le rouge, 120° pour le vert, 240° pour le bleu, etc.).
🌈 S (Saturation – Intensité) : Exprimée en %, elle indique si la couleur est vive (100%) ou délavée (0%, ce qui donne du gris).
💡 L (Lightness – Luminosité) : Exprimée en %, elle contrôle la clarté de la couleur (0% = noir, 100% = blanc, 50% = couleur normale).

Dans la plupart des cas, c’est le code hexadécimal que tu vas utiliser si tu travailles sur un site web ou des visuels en ligne. Et c’est celui-ci qui va nous intéresser dans cet article.

Bon. Venons-en maintenant à notre problématique de base : comment trouver ce fameux code hexadécimal ?

Trouver le code d’une couleur avec l’extension Chrome Color Picker

Tu as repéré LA couleur parfaite sur un site web et tu veux récupérer son code hexadécimal ? Facile (oui, oui). 🦋​

L’astuce, c’est d’utiliser l’extension Chrome Color Picker. Il s’agit d’un outil ultra pratique pour identifier les couleurs sur n’importe quelle page web.

📒​ Je te propose un petit mode d’emploi :

🩷 1. Installer l’extension Color Picker

Pour commencer, télécharge l’extension Color Picker (ou une autre extension du même type, il en existe plein).

1. Ouvre Google Chrome.
2. Recherche Color Picker dans le Chrome Web Store, ou suis ce lien pour télécharger Color Picker.
3. Clique sur Ajouter à Chrome et installe l’extension.
4. Clique sur l’icône d’une pièce de puzzle à droite de la barre de recherche de ton navigateur (de Google Chrome, donc).
5. Cherche “Color Picker” dans la liste de tes extensions et clique sur l’icône de punaise 📌 pour épingler cette extension dans ton navigateur. Tu peux désormais accéder à l’extension en un clic.

Une fois l’extension installée, tu verras une petite icône de roue chromatique en haut de ton navigateur.

🤎 2. Utiliser Color Picker pour récupérer une couleur sur un site

Maintenant que l’extension est en place, voici comment récupérer le code d’une couleur :

1. Ouvre le site où se trouve la couleur que tu veux récupérer.
2. Clique sur l’icône de Color Picker dans ta barre d’outils.
3. Une fenêtre s’ouvre. Clique sur le bouton rouge “Eyedropper” (ça veut dire “pipette” en anglais pour la petite info).
4. Passe la souris sur la couleur qui t’intéresse, le code hexadécimal s’affiche.
5. Clique sur la couleur en question : cela a pour effet de copier le code hexadécimal.

Fastoche, non ?

Trouver les codes couleurs d’une photo

Tu as une superbe photo et tu aimerais en extraire les couleurs pour créer une palette harmonieuse ? C’est possible aussi !

Utiliser un outil en ligne pour générer une palette à partir d’une photo

L’idée est d’identifier les couleurs dominantes d’une image et de récupérer les codes hexadécimaux. Comme tu t’en doutes, récupérer chaque couleur d’une image, une par une, avec Color Picker est moyennement pratique (pour ne pas dire ch*t).

Heureusement, il existe des outils gratuits qui font tout le travail pour toi. Mon préféré ? Coolors.

Comment extraire les couleurs d’une image avec Coolors ?

1️⃣ Va sur Coolors et clique sur l’icône représentant un appareil photo.

2️⃣ Téléverse ta photo ou colle l’URL de l’image s’il s’agit d’une image disponible en ligne.

3️⃣ L’outil analyse l’image et te donne une palette avec les couleurs principales.

4️⃣ Il ne te reste plus qu’à cliquer sur “Next” pour copier les codes hexadécimaux et les enregistrer.

🌷 Le + ? Tu peux aussi ajuster la palette, supprimer une couleur ou en ajouter une autre pour obtenir un rendu qui te correspond à 100 %.

Quelques autres outils sympas :

L’outil Palette Generator de Canva permet de récupérer les 4 couleurs principales d’une photo et de copier les codes hexadécimaux en 1 clic. Simple et efficace.

Adobe Color, parfait pour des palettes plus élaborées.

Comment utiliser ces codes couleurs pour créer une identité visuelle cohérente ?

Maintenant que tu sais comment extraire les couleurs d’une image et récupérer leurs codes hexadécimaux, tu te demandes peut-être comment les utiliser pour créer une identité visuelle cohérente.

Parce que oui, avoir des couleurs, c’est bien. Mais savoir les associer intelligemment, c’est encore mieux ! ​💁🏼‍♀️

Je te montre comment construire une palette harmonieuse. C’est parti ?

1️⃣ Définis ta palette de couleurs

Généralement, une palette cohérente se compose de :

🏵️​ 1 couleur dominante : celle qui représente ton univers et qui sera la plus présente sur ton site.

🏵️​ 1 à 2 couleurs secondaires : pour accompagner ta couleur principale et apporter de la variété.

🏵️​ 1 couleur d’accent : pour attirer l’attention sur des éléments importants (boutons, appels à l’action…).

🏵️​ 1 couleur neutre : souvent du blanc, du beige ou du gris pour équilibrer le tout.

🏵️​ 1 noir : pour ton corps de texte. Lorsque je crée des palettes pour mes clientes, j’utilise une nuance très foncée de la couleur dominante.

J’adore les exemples, en voici un :

Si ton branding tourne autour d’un rose poudré, tu peux l’associer avec du beige clair, du terracotta, du marron foncé pour le texte et d’une touche de doré.

📖​ Lecture bonus : je t’explique cette méthode en détail dans l’article Comment choisir la palette de couleurs de son site ?

2️⃣ Crée un document dans lequel tu notes tous ces codes couleurs

​💁🏼‍♀️​ Petit conseil : note tes couleurs quelque part pour éviter d’aller les chercher à chaque fois.

Tu peux :

​🌷 Créer un document dédié à ton identité visuelle avec :

• Tes codes hexadécimaux ;
• Un petit carré de la couleur à côté ;
• Une note sur où tu utilises chaque couleur (ex : #F5E1DA – couleur de fond des boutons).

​🌷 Les garder dans une note sur ton téléphone pour les retrouver facilement.

​🌷 Pour utiliser les couleurs de ta palette en story Instagram, je te conseille de créer une image qui contient chacune de tes couleurs. Je t’explique à quoi cela va t’être utile plus loin dans cet article.

Où utiliser le code hexadécimal ?

Maintenant que tu sais comment retrouver un code hexadécimal, voyons où le réutiliser dans les différents outils que tu utilises dans le cadre de ton activité.

Où utiliser le code couleur dans Canva ?

Depuis ton document Canva, sélectionne l’élément dont tu souhaites modifier la couleur (ici, il s’agit d’un titre).

Clique sur l’icône “A” (2), qui te permet de modifier la couleur de ton texte. Les couleurs de ton document s’affichent dans la colonne de gauche. Si tu cliques sur l’icône de roue chromatique (3), tu as la possibilité de renseigner un code hexadécimal (4).

Où utiliser le code couleur dans WordPress ?

Si tu utilises WordPress, tu peux facilement personnaliser les couleurs de ton site grâce aux codes hexadécimaux. Mais attention, la manière dont tu peux les modifier dépend fortement des outils que tu as utilisés pour construire ton site.

Voici les trois endroits principaux où tu peux appliquer tes couleurs :

🩷 Dans la personnalisation du thème

La plupart des thèmes WordPress disposent d’une personnalisation des couleurs, accessible depuis le Tableau de bord de WordPress, puis via Apparence > Personnaliser.
Tu peux modifier les couleurs du texte, des boutons, des arrière-plans et des liens en un clic.
Il te suffit d’entrer ton code hexadécimal ou d’utiliser le sélecteur de couleur pour ajuster le rendu.

🤎​ Dans l’éditeur de blocs (Gutenberg)

Lorsque tu rédiges un article ou une page avec Gutenberg, tu peux changer la couleur de :

• Texte : en sélectionnant un paragraphe, puis en choisissant une couleur dans l’onglet “Couleur du texte”.
• Arrière-plan : utile pour mettre en valeur un bloc spécifique.

Là encore, il suffit de coller ton code hexadécimal dans l’espace prévu : au-dessus des couleurs proposées par défaut, clique sur “Aucune couleur sélectionnée”. Cela a pour effet d’ouvrir une fenêtre dans laquelle tu pourras renseigner ton code couleur.

🧡 Dans les réglages de ton constructeur de pages

Si ton site est construit avec un constructeur de pages comme Elementor ou Divi, tu peux définir une palette globale avec tes couleurs principales et secondaires.
Cela te permet d’appliquer tes couleurs rapidement sur tout ton site, sans devoir les changer bloc par bloc.

Comme chaque constructeur a son propre fonctionnement, je ne vais pas entrer dans les détails ici, mais sache que la plupart d’entre eux te permettent d’utiliser directement tes codes hexadécimaux

Où renseigner les codes couleurs dans Showit ?

L’un des gros avantages de Showit, c’est sa liberté totale en matière de design. Tu peux personnaliser chaque élément à 100 %, y compris les couleurs.

Voici où tu peux appliquer tes codes hexadécimaux sur Showit :

🩷​ Dans la palette de couleurs globale

Showit te permet de définir une palette de couleurs globale pour harmoniser ton design.
Pour la modifier, va dans l’onglet “Design Settings” (en haut à gauche).
Ajoute tes codes hexadécimaux pour tes couleurs principales et secondaires.

L’intérêt ? Une fois ta palette enregistrée, elle est accessible partout dans Showit : tu n’auras pas besoin de retaper tes couleurs à chaque fois.

🤎​ Sur chacun des éléments, individuellement

Tu peux changer la couleur :

🌷 Des titres et paragraphes en sélectionnant un texte et en modifiant la “Text Color” dans l’onglet de droite ;

🌷 Des boutons et liens en ajustant la couleur du texte et de l’arrière-plan ;

🌷 Des arrière-plans d’une page ou d’une section ;

🌷 Des éléments graphiques (formes, encadrés, icônes…) ;

💐 Bref, partout.

Utiliser les couleurs de son identité visuelle dans Instagram

On ne peut pas, à proprement parler, utiliser des codes hexadécimaux sur Instagram.

No worries, je te livre une astuce toute simple pour utiliser les couleurs de ton identité visuelle en story Instagram :

1️⃣ Crée ta story puis ajoute l’image avec tes couleurs que je t’ai proposé de créer précédemment.

2️⃣ Ajoute ton texte.

3️⃣​ Clique sur la roue chromatique : avec la pipette, sélectionne la couleur de ton choix sur ton image.

4️⃣​ Supprime l’image de ta palette de couleurs.

5️⃣​​ Tadaaa, une story en accord à ton identité visuelle ! ​🤳🏼​

Er voilà ! Plus besoin de tâtonner pour retrouver exactement la bonne couleur. Avec l’extension Color Picker, tu peux facilement récupérer les couleurs qui te plaisent sur n’importe quel site. Et avec des outils comme Coolors, tu peux générer une palette complète à partir d’une simple photo. Plus d’excuses pour ne pas avoir un univers visuel cohérent.

Besoin d’un coup de pouce pour choisir ta palette de couleurs ?

J’ai préparé un document avec 5 palettes prêtes à l’emploi, chacune avec ses codes hexadécimaux, pour t’aider à trouver l’inspiration et harmoniser les couleurs de ton site.

Télécharge-le gratuitement en remplissant le formulaire ci-dessous.

Cet article t’a plu ? 📌​ Épingle-le sur Pinterest pour le retrouver plus tard.