Trouver une couleur : image, nom, code HEX ou RVB

Trouver une couleur dans une image#

Méthode, exemple vérifiable et limites

L’aperçu est réduit si son plus grand côté dépasse 1 600 pixels ; les coordonnées désignent cet aperçu, pas le fichier d’origine. Les zones transparentes sont composées sur du blanc. La pipette lit les canaux sRGB de ce rendu.

Pour la palette, une grille régulière d’au plus 128 × 128 points prélève les pixels au centre de chaque cellule. Les composantes sont regroupées par pas de 8, puis les groupes sont séparés selon la dispersion des canaux et leur effectif (découpe médiane pondérée). Chaque groupe fournit la moyenne de ses canaux d’origine. Les groupes de même HEX sont réunis. Ce choix reproductible favorise les grandes surfaces ; il peut manquer un petit accent ou des détails fins.

Couleur	Code exact de l’exemple	Surface du dessin
Écru	#F3EFE0	60 %
Bleu canard	#048B9A	25 %
Terracotta	#E2725B	15 %

Les proportions extraites peuvent différer légèrement de 60/25/15 : la grille échantillonne un nombre fini de points. Téléchargez le PNG d’exemple ou son SVG source pour refaire le calcul. Le SVG sert à documenter le dessin ; l’import de l’outil accepte PNG, JPEG et WebP.

La lumière, la balance des blancs, la compression, le profil colorimétrique et le décodage du navigateur peuvent changer les valeurs. Le résultat n’identifie ni une référence RAL/Pantone, ni une recette de pigments. Les animations éventuelles ne sont pas analysées image par image. Au-delà de 40 millions de pixels, l’image est refusée pour limiter l’usage de mémoire.

Le CSV exporte les codes, le nombre de points et leur part, sans inclure le nom du fichier. Le lien vers le générateur transmet uniquement les codes. En quittant ou rechargeant la page, il faut sélectionner à nouveau l’image.

Autour du point choisi, la pipette examine un carré de 5 × 5 pixels, limité aux pixels disponibles sur les bords. Pour chaque canal sRGB, elle trie les valeurs et retient celle du milieu. Pour un effectif pair, elle arrondit la moyenne des deux valeurs centrales à l’entier le plus proche. Le code obtenu peut être absent des pixels d’origine.

Rechercher par nom ou code#

Deux exemples#

• « sauge » retrouve vert sauge et son alias ; « #9CAF88 » retrouve la même valeur.
• « bleu » parcourt les noms et familles de bleus ; « 4 139 154 » retrouve le bleu canard de notre sélection.

Si la maquette indique violet, la recherche distingue le mot CSS et notre échantillon français. Pour skyblue, elle peut aussi proposer cinq couleurs proches, classées par distance dans OKLab. Valeurs CSS utilisées.

Ce que signifie un résultat#

Un nom courant peut correspondre à plusieurs nuances selon les fabricants. Le répertoire fournit un échantillon déclaré ; il ne remplace pas un système RAL ou Pantone. Lire le statut des valeurs.

Comment les nuances proches sont choisies#

Le code saisi et les valeurs du répertoire sont convertis du sRGB linéaire vers Oklab avec les matrices de Björn Ottosson. Nous classons ensuite la distance euclidienne ΔEOK, sans la multiplier par 100. Une distance de zéro correspond au même code. Les alias d’une même valeur sont regroupés. Aucun seuil de similarité parfaite n’est revendiqué : les cinq premières propositions peuvent rester éloignées.

Björn Ottosson — Oklab, méthode et matrices ; CSS Color, espace Oklab et différences de couleur. Les résultats dépendent de ce répertoire limité, du modèle et de l’écran ; ils ne certifient aucune correspondance RAL ou Pantone.

Avec « safran », la recherche de proximité part du repère français #F4C430. Choisissez ensuite le répertoire français ou les noms CSS. Si la saisie est aussi un mot CSS, sa valeur CSS a priorité. Ainsi, pour chercher à partir du violet de ce site, saisissez #8A2BE2. Le tableau des correspondances donne le premier résultat pour chaque entrée française.

Sources et méthode

1. W3C — CSS Color : codes sRGB, noms CSS et HSL
   Les valeurs numériques et mots-clés CSS ; pas une normalisation des noms français.
2. Björn Ottosson — Oklab, méthode et matrices
   Conversion du sRGB linéaire en Oklab pour comparer des échantillons numériques.
3. Adobe — Color modes in Photoshop
   Différences entre modes RVB et CMJN et contraintes de reproduction.
4. MDN — Lecture des pixels d’un canvas
   Lecture des composantes de pixels ; le résultat dépend du décodage et du rendu du navigateur.

Les palettes et exemples de ce site sont des propositions éditoriales. Les conversions et contrastes sont calculés à partir des codes indiqués. Voir la méthode et signaler une correction.