CDRN

Capturer la couleur d'un pixel d'image

  • Tableau de bord
  • Documentation
  • API
récupère la couleur exacte d'un pixel de votre image (RGB, HSL, hexadécimal) en cliquant sur le point de votre choix

Qu'est-ce qu'un color picker d'image ?

Un color picker (en français pipette à couleurs ou capture de couleur) est un outil qui restitue la valeur exacte d'un pixel choisi sur une image. Vous chargez une photo, vous cliquez sur le point qui vous intéresse, et l'outil renvoie la couleur précise sous forme HEX, RGB et HSL. C'est l'équivalent web de la pipette des logiciels de design comme Photoshop, GIMP ou Figma.

Notre outil fonctionne directement dans votre navigateur. Vous téléversez votre image, elle s'affiche dans la page, et il vous suffit de cliquer sur un pixel pour récupérer sa couleur. La lecture du pixel se fait côté client via l'API canvas, sans aller-retour serveur, sans recompression et sans envoi de l'image sur le réseau pour la sélection.

Différence avec un extracteur de couleurs

Notre extracteur de couleurs et notre color picker répondent à deux besoins distincts, qu'il est utile de bien distinguer :

  • L'extracteur analyse l'ensemble de l'image et renvoie la palette dominante (les 5, 8 ou 10 teintes les plus représentées). C'est l'outil de choix pour synthétiser l'ambiance colorimétrique d'une photo, créer un mood board ou nourrir une charte.
  • Le color picker renvoie la couleur exacte d'un pixel précis que vous désignez. C'est l'outil de choix quand vous savez où regarder : un logo dans une capture, une nuance précise d'un dégradé, un fond d'écran de référence.

L'extracteur travaille sur des millions de pixels et applique du clustering pour faire émerger des groupes de couleurs ; le picker se contente de lire la valeur RGB stockée à la position que vous cliquez. Le premier généralise, le second est chirurgical.

Comment ça marche, techniquement

Une image numérique est une grille de pixels, chaque pixel portant trois canaux RGB (rouge, vert, bleu) codés en général sur 8 bits, soit 256 valeurs par canal. Quand vous cliquez sur un point, l'outil :

  1. Dessine votre image dans un élément canvas, en conservant ses dimensions natives (avec un plafond de 1500 pixels de large pour rester confortable à l'écran).
  2. Convertit la position du clic en coordonnées image natives, en compensant le redimensionnement d'affichage du navigateur.
  3. Lit la valeur RGBA du pixel via l'API canvas.getContext('2d').getImageData(x, y, 1, 1).
  4. Affiche un aperçu de la couleur picker. À la soumission, le serveur lit la même position avec PHP GD et calcule les codes HEX, RGB et HSL définitifs.

La valeur HSL est calculée par notre service de conversion couleur, identique à celui qu'utilise notre convertisseur de couleurs. Cohérence de bout en bout, vous obtenez les mêmes valeurs que si vous aviez tapé le code HEX dans le convertisseur.

Cas d'usage typiques

  • Reproduire une couleur de capture d'écran : vous avez une capture d'un site, vous voulez reprendre exactement la teinte d'un bouton ou d'un fond. Le picker vous donne le code HEX précis à recoller dans votre CSS.
  • Identifier une couleur de charte sur une photo : un PDF de présentation, une page de magazine, un visuel produit. Plus besoin de demander la charte, vous lisez la couleur directement.
  • Reverse engineering d'identité visuelle : capturer le bleu exact d'un logo, le rose d'une bannière, l'orange d'un appel à l'action.
  • Inspiration et veille design : vous voyez une photo qui vous plaît, vous récupérez la teinte exacte d'une fleur, d'un mur, d'une affiche.
  • Debug front-end : un screenshot de bug montre une couleur incorrecte, vous lisez la valeur réelle pour comparer avec celle attendue dans la maquette.
  • Création de palette à partir d'une référence : vous picker plusieurs points d'une même image pour reconstituer une palette personnalisée.

Comment utiliser le color picker

  1. Téléversez votre image (PNG, JPG, GIF, BMP, WebP, jusqu'à 20 Mo).
  2. Une prévisualisation s'affiche dans la page. Cliquez sur un pixel pour récupérer sa couleur.
  3. Un viseur marque la position cliquée et un aperçu de la couleur apparaît à côté.
  4. Validez avec le bouton de soumission pour obtenir le rendu final : carré coloré, code HEX, RGB et HSL.
  5. Pour transformer la valeur entre formats, passez par notre convertisseur de couleurs.

Questions fréquentes

Quelle est la différence entre HEX, RGB et HSL ?

Ce sont trois représentations de la même couleur. HEX (#ff0000) est le format le plus utilisé en CSS. RGB exprime les trois canaux rouge / vert / bleu en valeurs 0-255. HSL (Hue, Saturation, Lightness) est plus intuitif pour ajuster une teinte : c'est le format à privilégier quand vous voulez assombrir, désaturer ou modifier une couleur sans changer la teinte de base.

Pourquoi mon clic ne renvoie pas exactement la couleur attendue ?

Sur une zone de dégradé, deux pixels voisins peuvent avoir des valeurs très différentes. De plus, les images JPG sont compressées avec perte : la couleur d'un pixel peut différer légèrement de l'original. Pour des codes couleur fiables, préférez des PNG ou des images non recompressées.

Mes coordonnées sont-elles celles de l'écran ou de l'image ?

Celles de l'image originale. Notre script JavaScript convertit automatiquement la position du clic (en pixels d'écran) vers la position dans l'image native. Si votre image fait 4000x3000 et qu'elle s'affiche à 800x600, un clic au centre vous renverra (2000, 1500) et non (400, 300).

Le picker fonctionne-t-il avec les images transparentes ?

Oui. Si vous cliquez sur un pixel transparent, vous récupérez la couleur RGB stockée à cet endroit (souvent du blanc ou du noir selon l'éditeur d'origine). La transparence elle-même (canal alpha) n'est pas restituée dans le résultat ; pour analyser un canal alpha, ouvrez l'image dans un éditeur graphique.

Quelle taille d'image est acceptée ?

Jusqu'à 20 Mo, formats PNG, JPG, GIF, BMP et WebP. Les très grandes images sont affichées à 1500 pixels de large maximum pour rester confortables à l'écran, mais la couleur lue reste celle du pixel d'origine, sans rééchantillonnage.

Mes images sont-elles stockées sur le serveur ?

Non. La sélection se fait dans votre navigateur. Au moment de la soumission, le fichier est traité à la volée pour confirmer la couleur du pixel demandé, puis le fichier temporaire est supprimé. Aucune image n'est conservée, indexée ou partagée.

Que se passe-t-il si JavaScript est désactivé ?

La soumission classique du formulaire reste possible. Les coordonnées x et y sont gérées par des champs cachés que JavaScript remplit au clic. Sans JavaScript, ces champs restent vides et le formulaire signalera qu'il manque une position, mais l'image elle-même est bien transmise au serveur pour traitement.

Exemple de requête

curl -X POST https://cdrn.fr/api/v1/tools/color-picker/execute \
  -F "image=@/path/to/file" \
  -F "x=..." \
  -F "y=..."

Schéma d'entrée

Champ Type Requis Défaut
image file ✓ –
x string – –
y string – –

cet outil attend un fichier - utilisez Content-Type multipart/form-data au lieu de application/json

Points d'accès

  • GET https://cdrn.fr/api/v1/tools - liste tous les outils disponibles
  • GET https://cdrn.fr/api/v1/tools/color-picker - récupère le schéma de cet outil
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - exécute cet outil avec un payload JSON