CDRN

Capturar a cor de um pixel de imagem

  • Painel
  • Documentação
  • API
recupera a cor exata de um pixel da sua imagem (RGB, HSL, hexadecimal) clicando no ponto à sua escolha

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 prend votre image en entrée, lit le pixel à la position que vous indiquez et restitue le code couleur prêt à coller dans votre éditeur, votre CSS ou votre charte graphique. Tout se passe sur le serveur via PHP GD : le pixel est lu directement dans l'image, sans approximation, sans recompression.

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 demandez. 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. Convertit la position d'écran en coordonnées image réelles, en compensant le redimensionnement d'affichage (le navigateur affiche souvent l'image plus petite que sa taille native).
  2. Charge l'image côté serveur via PHP GD (imagecreatefromstring).
  3. Lit la valeur RGB à la position (x, y) avec imagecolorat.
  4. Retourne les codes HEX, RGB et HSL équivalents, calculés à partir de la valeur RGB d'origine.

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. Cliquez sur le pixel dont vous voulez la couleur.
  3. Les coordonnées x et y se remplissent automatiquement.
  4. Cliquez sur le bouton de soumission. La couleur s'affiche : 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. Pour des images plus lourdes, redimensionnez avant envoi : la couleur lue ne change pas significativement après réduction tant que le pixel cible reste visible.

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

Non. L'image est traitée à la volée pour lire la couleur du pixel demandé, puis le fichier temporaire est supprimé. Aucune image n'est conservée, indexée ou partagée.

Exemplo de pedido

curl -X POST https://cdrn.fr/api/v1/tools/color-picker/execute \
  -H "Content-Type: application/json" \
  -d '{"image":"...","x":1,"y":1}'

Esquema de entrada

Campo Tipo Obrigatório Predefinição
image file ✓ –
x integer ✓ –
y integer ✓ –

esta ferramenta espera um ficheiro - utilize Content-Type multipart/form-data em vez de application/json

Pontos de acesso

  • GET https://cdrn.fr/api/v1/tools - lista todas as ferramentas disponíveis
  • GET https://cdrn.fr/api/v1/tools/color-picker - obtém o esquema desta ferramenta
  • POST https://cdrn.fr/api/v1/tools/color-picker/execute - executa esta ferramenta com um payload JSON