Récupérez les codes couleurs exacts de vos visuels grâce à notre pipette interactive.
Quand vous ouvrez une image dans un navigateur, elle est décodée en une matrice de pixels sur un élément canvas HTML (ou via le DOM directement). Chaque pixel est accessible comme un tableau de quatre valeurs : Rouge, Vert, Bleu et Alpha (transparence). L'outil de color picker interroge précisément ce tableau aux coordonnées (x, y) de votre clic ou de votre survol.
Les canaux RVB (RGB en anglais) vont de 0 (aucune lumière) à 255 (intensité maximale). Un rouge pur s'écrit rgb(255, 0, 0). Un gris moyen correspond à rgb(128, 128, 128). La conversion vers le format HEX — le plus utilisé en développement web — consiste simplement à traduire chaque canal en notation hexadécimale à deux chiffres. Ainsi, rgb(255, 0, 0) devient #FF0000.
Le passage au format HSL (Teinte, Saturation, Luminosité) implique une formule mathématique un peu plus complexe : la teinte est un angle sur le cercle chromatique (0° à 360°), la saturation exprime l'intensité de la couleur (0% = gris pur, 100% = couleur vive), et la luminosité contrôle le niveau de clarté (0% = noir, 100% = blanc). Pourquoi ce format est utile ? Parce qu'il permet d'ajuster une couleur de façon intuitive — augmenter la luminosité de 10% donne un résultat prévisible, contrairement à la manipulation directe des canaux RVB.
Un détail souvent ignoré : la valeur lue dépend du profil colorimétrique de l'image. Une photo en sRGB et une image en Adobe RGB contiennent des espaces colorimétriques différents pour des valeurs numériques identiques. Un outil fiable devrait soit signaler le profil détecté, soit normaliser vers sRGB — qui reste le standard du web.
Le workflow réel prend moins de trente secondes une fois que vous connaissez les étapes :
1. Chargez votre image. Glissez-déposez le fichier directement dans la zone prévue, ou collez une URL si l'image est déjà hébergée en ligne. Formats acceptés couramment : JPEG, PNG, WebP, BMP, GIF, TIFF. Les fichiers RAW d'appareil photo nécessitent généralement une conversion préalable.
2. Zoomz si nécessaire. Sur une image de 4000 × 3000 pixels, un détail de quelques pixels peut être difficile à cibler sans zoom. L'outil Pixes.app permet un zoom progressif pour atteindre la précision au pixel près.
3. Survolez la zone cible. Le code couleur s'affiche en temps réel pendant le déplacement du curseur. Cette prévisualisation en direct évite les allers-retours : vous voyez immédiatement si vous êtes sur la bonne teinte.
4. Cliquez pour verrouiller la sélection. Le clic fixe la couleur et affiche les valeurs dans tous les formats disponibles — HEX, RGB, HSL, parfois CMYK. Un bouton de copie rapide évite de sélectionner manuellement le texte du code.
5. Récupérez la valeur. Collez directement dans votre feuille de style CSS, votre fichier de design, votre outil de retouche ou votre document. Le format HEX fonctionne partout en CSS (ex : color: #3A7BD5;). Le format RGB est utile quand vous avez besoin de gérer la transparence (ex : rgba(58, 123, 213, 0.7)).
Le prélèvement de couleur semble trivial, mais plusieurs pièges produisent des valeurs incorrectes :
La compression JPEG. Le format JPEG applique une compression destructrice qui modifie les valeurs des pixels. Si vous prélevez une couleur sur un JPEG fortement compressé (qualité inférieure à 60%), la valeur lue peut différer de plusieurs unités par rapport à l'original. Pour un prélèvement fidèle, privilégiez le format PNG ou un JPEG en haute qualité.
Le redimensionnement de l'image. Quand un navigateur affiche une image à une taille différente de sa résolution native, il applique un algorithme d'interpolation (bilinear, bicubic, Lanczos). Ces algorithmes mélangent les couleurs des pixels adjacents. Un pixel affiché à l'écran ne correspond pas nécessairement à un pixel réel de l'image source. Solution : zoomez à 100% (taille réelle) avant de prélever.
Le profil colorimétrique ignoré. Comme mentionné plus haut, deux images avec les mêmes valeurs RVB numériques mais des profils différents rendent des couleurs visuellement distinctes. Si votre image provient d'un appareil photo configuré en Adobe RGB, un prélèvement brut donne un code HEX qui, affiché sur un écran standard sRGB, produira une teinte légèrement décalée — généralement plus terne.
Le gamma et l'anti-aliasing. Sur les bords de formes ou de texte dans une image, les pixels de transition sont des mélanges calculés pour lisser visuellement. Prélever sur ces zones donne une couleur qui n'appartient à aucun objet réel de l'image. Visez toujours les zones uniformes.
Designers UI/UX : Reproduire la palette d'une référence visuelle. Vous avez capturé l'écran d'une application qui vous inspire, vous prélevez chaque couleur clé — fond, texte principal, accent, bordure — pour reconstruire une palette cohérente dans votre propre projet. Un workflow rapide consiste à prélever 5 à 8 couleurs, puis à les organiser dans un outil d'extraction de palette pour visualiser leur harmonie globale.
Développeurs front-end : Traduire un mockup en code CSS. Le designer fournit une maquette en PNG, le développeur prélève les couleurs directement sans avoir à ouvrir le fichier source dans Figma ou Photoshop. Gain de temps réel : chaque aller-retour vers un logiciel de design coûte 2 à 5 minutes. Sur un composant avec 6 couleurs, c'est 15 à 30 minutes économisées.
Photographes : Vérifier la dominante colorimétrique d'une photo retouchée. En prélevant des zones neutres (blanc, gris), vous détectez immédiatement un décalage de balance des blancs. Un gris parfait correspond à rgb(128, 128, 128). Si vous lisez rgb(128, 125, 131), une légère teinte magenta est présente.
E-commerce et marketing : Assurer la cohérence colorimétrique entre une photo produit et la charte graphique du site. Les fiches produits Amazon, Shopify ou WooCommerce exigent souvent un fond d'une blancheur précise. Prélever le fond de la photo et comparer au blanc pur (#FFFFFF) révèle immédiatement si un ajustement est nécessaire.
Imprimeurs et prépresse : Obtenir une valeur CMYK approximative à partir d'une image numérique. Attention cependant : la conversion RVB → CMYK n'est pas perte sans système de gestion colorimétrique (ICC). Un color picker donne une indication, pas une garantie d'impression fidèle.
Le choix du format n'est pas anodin — chaque contexte favorise un format différent :
HEX (#RRGGBB) est le standard en CSS et en design graphique. Sa forme compacte le rend idéal pour les feuilles de style, les outils de design (Figma, Sketch, Adobe XD) et la communication entre équipes. Un code HEX se copie en deux secondes et se colle sans modification dans n'importe quel éditeur CSS.
RGB (ou RGBA avec transparence) devient préférable quand vous avez besoin de gérer l'opacité. En CSS, rgba(255, 87, 51, 0.5) applique une couleur à 50% de transparence — impossible avec le format HEX classique (bien que #RRGGBBAA existe en CSS Level 4, la compatibilité n'est pas universelle).
HSL (Hue, Saturation, Lightness) brille dans les workflows de déclinaison. Besoin de créer une version plus claire de votre couleur d'accent ? Augmentez la luminosité. Besoin d'une variante désaturée pour un état « disabled » ? Réduisez la saturation. Le format HSL rend ces manipulations intuitives là où le RVB oblige à deviner.
Pour le travail d'impression, le format CMYK reste incontournable, mais la conversion depuis un écran nécessite toujours un profil ICC de sortie. Aucun color picker en ligne ne remplace un logiciel de prépresse calibré pour ce besoin spécifique.
Prélever une couleur unique répond à un besoin ponctuel. Mais dans la majorité des projets de design ou de développement, une seule couleur ne suffit pas — il faut construire une palette cohérente de 4 à 10 couleurs qui fonctionnent ensemble.
Le workflow efficace combine deux outils : le color picker pour cibler des couleurs précises dans une image source, puis un extracteur de palette pour analyser l'image dans son ensemble et identifier les dominantes chromatiques. Pixes.app propose les deux approches — l'outil extract-color-palette scanne automatiquement l'image et en ressort les 5 à 12 couleurs les plus représentatives, ce qui vous évite de prélever manuellement chaque teinte.
Une fois la palette constituée, vous pouvez aller plus loin : Pixes.app génère également des ombres portées CSS basées sur les couleurs de votre image, créant ainsi des effets de profondeur visuelle cohérents avec votre palette source. Cette combinaison — prélèvement manuel + extraction automatique + génération CSS — couvre la majorité des besoins en matière de workflow colorimétrique.