La réponse courte
Chaque couleur affichée sur un écran est un mélange de lumière rouge, verte et bleue, et un code couleur n'est qu'une façon d'écrire ce mélange. Pour le lire dans une image, il faut une pipette : un outil qui regarde un pixel et donne ses valeurs. Ajoutez votre image dans la pipette ci-dessous, déplacez le pointeur jusqu'à ce que la loupe montre le pixel voulu dans son carré central, puis cliquez. La couleur est gardée avec ses codes HEX, RGB et HSL, et un clic sur un code le copie.
Si vous cherchez les couleurs générales d'une photo plutôt qu'un seul pixel, utilisez la partie palette du même outil : elle regroupe les pixels proches et affiche les 5, 8 ou 12 couleurs les plus présentes avec leurs codes.
Essayez ici : Pipette de couleur sur image
Ouvrir la page complète de l'outilHEX, RGB et HSL : ce que disent les codes
RGB (ou RVB en français) donne la quantité de rouge, de vert et de bleu avec trois nombres de 0 à 255. HEX écrit ces trois nombres en base 16, deux caractères chacun, après un dièse : FF vaut 255, 80 vaut 128, 00 vaut 0. Ainsi #FF8000 et rgb(255, 128, 0) désignent exactement le même orange. HSL (TSL en français) décrit la couleur comme on en parle : la teinte est un angle sur le cercle chromatique (0 à 360), la saturation et la luminosité sont des pourcentages. HSL est pratique pour obtenir une version plus claire ou plus foncée d'une couleur, car il suffit de changer le dernier nombre.
Les outils de design comme Figma, Canva et Photoshop acceptent directement le code HEX, le CSS accepte les trois, et les logiciels de bureautique comme Word et PowerPoint demandent en général du RGB ou du HEX dans leur fenêtre de couleurs personnalisées.
| Couleur | HEX | RGB | HSL |
|---|---|---|---|
| Rouge pur | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Gris moyen | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Bleu vif | #1A73E8 | rgb(26, 115, 232) | hsl(214, 82%, 51%) |
| Blanc | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Noir | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
Autres façons de prélever une couleur sur votre appareil
Parfois la couleur n'est pas dans un fichier mais ailleurs sur votre écran : un site web, une application, une image de vidéo. Ces solutions couvrent la plupart des cas sans installer de logiciel lourd.
- Dans cet outil, Prélever à l'écran (Chrome et Edge sur ordinateur) transforme le pointeur en pipette qui fonctionne partout sur l'écran, pas seulement dans l'image.
- Windows : Microsoft PowerToys contient un sélecteur de couleurs ; une fois installé, Win+Maj+C l'ouvre et copie le code du pixel sous le pointeur.
- Mac : l'application intégrée Colorimètre numérique (dans Applications, Utilitaires) affiche les valeurs sous le pointeur. Réglez l'affichage sur les valeurs sRGB si vous avez besoin de codes pour le web.
- Outils de développement du navigateur : dans Chrome et Edge, le petit carré de couleur à côté de chaque couleur CSS ouvre un sélecteur avec une pipette pour la page affichée.
- Téléphone : faites une capture d'écran, ajoutez-la dans la pipette de cette page et touchez la couleur. Sur un écran tactile il n'y a pas de loupe, alors zoomez d'abord sur la page si la zone est petite.
Pourquoi le code obtenu peut sembler un peu faux
Deux pixels voisins d'une photo ne sont presque jamais identiques. La compression JPG, le bruit de l'appareil photo, la lumière et les ombres modifient les valeurs, si bien qu'un clic sur une voiture rouge peut donner #B3121B sur un pixel et #A90F18 sur le suivant. C'est normal. Pour une photo, prélevez quelques points dans une zone éclairée de façon régulière et gardez celui qui vous semble juste, ou laissez la palette faire la moyenne de la zone.
Les bords sont le piège le plus fréquent. Le texte et les logos sont lissés (anticrénelage), donc les pixels au bord d'une lettre sont un mélange de la lettre et du fond. Prélevez toujours au milieu d'une forme, c'est justement à cela que sert la loupe. Évitez aussi les captures d'écran redimensionnées, envoyées par une messagerie ou enregistrées en JPG de faible qualité : chaque étape mélange ou décale un peu les couleurs.
Les écrans et les profils de couleur ajoutent une couche de plus. Beaucoup de téléphones et de Mac affichent une gamme de couleurs plus large que le sRGB standard, et le même fichier peut paraître un peu différent sur deux écrans. La pipette lit les valeurs dessinées par le navigateur, qui sont en sRGB, l'espace utilisé par les sites web et la plupart des outils de design. Les pixels transparents sont lus comme s'ils étaient posés sur un fond blanc.
Comment créer une palette à partir d'une photo
Une photo que vous aimez contient déjà des couleurs qui vont bien ensemble, ce qui en fait un bon point de départ pour un site web, une présentation ou des visuels pour les réseaux sociaux. Dans la partie palette, choisissez 5, 8 ou 12 couleurs. L'outil répartit tous les pixels en groupes de couleurs proches (méthode median cut) et affiche la moyenne de chaque groupe, le plus grand en premier. Tout copier place chaque code HEX sur une ligne, prêt pour un fichier CSS ou un outil de design.
Cinq couleurs donnent un schéma simple : en général une ou deux teintes de fond dominantes, une couleur principale et une couleur d'accent. Douze couleurs gardent des nuances plus fines, utiles pour l'illustration ou pour voir de quoi l'image est vraiment faite. Si la palette est dominée par un grand ciel ou un mur, recadrez d'abord la photo sur la partie qui vous intéresse et ajoutez-la de nouveau.
- Utilisez les couleurs les plus présentes et les plus calmes pour les fonds, et les plus petites et saturées pour les boutons et les mises en avant.
- Vérifiez le contraste du texte : pour un texte courant, les règles WCAG demandent au moins 4,5:1 entre le texte et le fond, 3:1 pour un grand texte.
- Gardez les codes au même endroit (une charte graphique ou une liste dans votre fichier de design) pour que tout le monde utilise les mêmes valeurs.
Conseils pour retrouver les couleurs d'une marque
Si vous avez besoin de la couleur exacte d'une entreprise ou d'un produit, la source la plus fiable est sa charte graphique ou une version SVG du logo, car elles contiennent les valeurs d'origine. Un logo pris dans une capture d'écran de site ou une photo d'une enseigne imprimée ne vous donnera qu'une approximation.
Si vous devez prélever dans une image, utilisez la plus grande zone unie du logo, pas le texte ni les traits fins, et préférez un PNG ou un SVG à un JPG. Prélevez trois ou quatre points ; s'ils ne diffèrent que d'une ou deux unités sur chaque canal, vous avez la bonne couleur. N'oubliez pas que les couleurs d'impression (CMJN, Pantone) et les couleurs d'écran ne se définissent pas de la même façon : un code HEX tiré de la photo d'un imprimé est une approximation de son aspect à l'écran, pas la valeur d'impression officielle.