Sélecteur de couleur
Prélevez n’importe quelle couleur depuis une image et obtenez instantanément les codes HEX, RGB, HSL, HSV et CMJN.
Importez une image pour choisir une couleur
Glissez-déposez, collez ou parcourez — PNG, JPG, WEBP ou GIF
Astuce : vous pouvez aussi coller une image avec Ctrl/Cmd + V
Codes couleur
Nom de couleur le plus proche: Royal Blue
Harmonies de couleurs
Vérificateur de contraste (WCAG)
Exemple de texte
Couleurs enregistrées
Aucune couleur enregistrée pour l’instant — choisissez-en une et appuyez sur « Enregistrer la couleur ».
Un sélecteur de couleur (ou « pipette » couleur) permet d’identifier la teinte exacte d’un pixel dans une image et d’en récupérer le code correspondant. C’est un outil de base pour quiconque travaille sur un site web, une application, une maquette graphique ou un document destiné à l’impression : plutôt que de deviner une nuance à l’œil, on clique directement sur la photo ou la capture d’écran et on obtient la valeur précise à réutiliser ailleurs.
Ce sélecteur en ligne est entièrement gratuit et s’exécute dans votre navigateur : aucune image n’est envoyée sur un serveur, tout reste sur votre appareil. Il affiche simultanément les codes HEX, RGB, HSL, HSV et CMJN, propose l’extraction automatique d’une palette à partir de votre photo, génère des harmonies de couleurs (complémentaires, analogues, triadiques…) et inclut un vérificateur de contraste WCAG pour s’assurer que vos textes restent lisibles selon les normes d’accessibilité.
Comment prélever une couleur depuis une image
- 1
Importez ou glissez votre image
Déposez un fichier PNG, JPG, WEBP ou GIF dans la zone prévue, collez-le avec Ctrl/Cmd + V, ou indiquez l’URL d’une image déjà en ligne.
- 2
Cliquez avec la pipette sur un pixel
Approchez le curseur de la zone à analyser : un zoom apparaît pour viser précisément le pixel voulu, puis cliquez pour le sélectionner.
- 3
Lisez et copiez les codes de couleur
Les valeurs HEX, RGB, HSL, HSV et CMJN de la couleur choisie s’affichent instantanément ; un clic sur chacune la copie dans le presse-papiers.
- 4
Extrayez la palette dominante de l’image
Lancez l’extraction automatique pour obtenir les teintes principales de la photo, classées par importance, prêtes à être réutilisées dans un projet.
- 5
Générez des harmonies à partir de cette teinte
Choisissez un schéma — complémentaire, analogue, triadique, tétradique, complémentaire divisée ou monochromatique — pour construire une palette cohérente autour de la couleur prélevée.
- 6
Vérifiez le contraste et enregistrez votre palette
Testez le rapport de contraste entre deux couleurs selon les seuils WCAG, puis enregistrez ou exportez votre sélection en CSS, JSON ou PNG.
HEX, RGB, HSL, HSV et CMJN expliqués
Une même couleur peut s’écrire de plusieurs façons selon le contexte : le web privilégie le HEX et le RGB, les designers préfèrent souvent régler la teinte en HSL ou HSV, et l’impression professionnelle raisonne en CMJN. Voici à quoi correspond chaque notation et quand s’en servir.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Feuilles de style CSS et intégration web |
| RGB | rgb(59, 130, 246) | Affichage à l’écran (télévisions, moniteurs, mobiles) |
| HSL | hsl(217, 91%, 60%) | Ajuster teinte, saturation et luminosité de façon intuitive |
| HSV | hsv(217, 76%, 96%) | Sélecteurs de couleur dans les logiciels de design |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Impression professionnelle et prépresse |
Design web et interfaces utilisateur
Pour composer une charte graphique cohérente, il faut souvent reproduire une couleur repérée sur une image de référence, un logo ou une capture d’écran concurrente. La pipette donne immédiatement le code exact à intégrer dans une maquette Figma, un système de design ou une charte de marque, sans approximation visuelle.
Développement front-end et variables CSS
Une fois la couleur identifiée, son code HEX ou RGB se colle directement dans une feuille de style, une variable CSS (--primary-color) ou un thème de composants. Cela évite les allers-retours avec l’équipe design pour connaître la teinte exacte à coder.
Impression et identité de marque
Un logo ou un support imprimé doit respecter des couleurs identiques d’un support à l’autre. La conversion en CMJN permet de transmettre à l’imprimeur des valeurs fidèles, en évitant les écarts de rendu entre un écran et une brochure ou une carte de visite.
Accessibilité et contraste WCAG
Un texte doit rester lisible pour tous les visiteurs, y compris les personnes malvoyantes. Le vérificateur de contraste calcule le rapport entre une couleur de texte et son arrière-plan et indique s’il respecte les seuils AA et AAA définis par les normes d’accessibilité WCAG.
Le comparatif
De nombreux outils en ligne se limitent à afficher un code HEX après un clic sur une image. Voici ce qui distingue ce sélecteur de couleur d’un service comme imagecolorpicker.com.
| Modèles de couleur affichés | HEX, RGB, HSL, HSV et CMJN en une seule fois | Principalement HEX et RGB |
| CMJN pour l’impression | Calculé automatiquement pour chaque couleur | Absent ou à calculer séparément |
| Vérificateur de contraste WCAG | Intégré, avec seuils AA et AAA | Non proposé |
| Harmonies de couleurs | Six schémas générés automatiquement | Non disponible |
| Publicités | Aucune, interface épurée | Présentes autour de l’outil |
Questions fréquentes
Comment prélever une couleur depuis une image ?
Importez votre photo ou capture d’écran dans l’outil, puis cliquez à l’endroit exact dont vous voulez connaître la couleur. Un zoom vous aide à viser le bon pixel, et les codes HEX, RGB, HSL, HSV et CMJN s’affichent aussitôt.
Qu’est-ce qu’un code couleur HEX ?
Un code HEX (hexadécimal) est une notation courte à six caractères, précédée d’un dièse (par exemple #3B82F6), qui encode les proportions de rouge, de vert et de bleu d’une couleur. C’est le format le plus utilisé en CSS et en développement web.
Comment convertir du RGB en HEX ?
Chaque composante RGB (rouge, vert, bleu, de 0 à 255) est convertie en une paire de chiffres hexadécimaux, puis les trois paires sont assemblées après un dièse. L’outil effectue cette conversion automatiquement dès qu’une couleur est prélevée ou saisie.
Comment créer une palette à partir d’une photo ?
Une fois votre image chargée, utilisez la fonction d’extraction de palette : l’outil analyse l’ensemble des pixels et propose les teintes dominantes, que vous pouvez ensuite sélectionner, copier ou enregistrer une par une.
Comment vérifier le contraste des couleurs pour l’accessibilité ?
Choisissez une couleur de texte et une couleur d’arrière-plan dans le vérificateur de contraste : l’outil calcule le rapport entre les deux et indique s’il atteint les seuils AA et AAA des recommandations WCAG, pour du texte normal comme pour du texte large.
Cet outil est-il gratuit et respecte-t-il ma confidentialité ?
Oui. Il est entièrement gratuit et fonctionne directement dans votre navigateur : vos images ne sont jamais transmises à un serveur, tout le traitement se fait localement sur votre appareil.
