Reproduire une maquette en front-end
Prélevez la couleur d'un bouton dans la capture de la maquette et collez le HEX directement dans le CSS.
Guide
La pipette à couleurs sert à prélever précisément une couleur dans une image : quand la souris se déplace, une loupe circulaire de 120px suit le curseur, grossit les 15×15 pixels environnants et met en évidence la case centrale, pour éviter de cliquer à côté dans un dégradé ou sur un bord ; un clic écrit la valeur dans « Couleur actuelle », copie le HEX et affiche les écritures rgb() et hsl(). Au chargement, l'image est aussi réduite à 128px de large pour un regroupement des couleurs, qui extrait 8 teintes dominantes et les dessine en bande proportionnelle. Le traitement se fait localement dans le navigateur.
Mis à jour le 2026-09-093 min read
La pipette à couleurs sert à prélever précisément une couleur dans une image : quand la souris se déplace, une loupe circulaire de 120px suit le curseur, grossit les 15×15 pixels environnants et met en évidence la case centrale, pour éviter de cliquer à côté dans un dégradé ou sur un bord ; un clic écrit la valeur dans « Couleur actuelle », copie le HEX et affiche les écritures rgb() et hsl(). Au chargement, l'image est aussi réduite à 128px de large pour un regroupement des couleurs, qui extrait 8 teintes dominantes et les dessine en bande proportionnelle. Le traitement se fait localement dans le navigateur.
Contrairement à l'« Outil de couleur », les couleurs viennent ici des pixels de l'image ; contrairement à l'« Histogramme d'image », l'outil s'intéresse aux valeurs exactes, pas à la répartition clair / sombre.
Le HEX part automatiquement dans le presse-papiers
Les 8 dominantes proviennent d'une vignette de 128px
Les pixels minuscules sont fusionnés, le prélèvement est légèrement moyenné
Clic sur le ciel dans l'imageHEX `#4A90D9`, `rgb(74, 144, 217)`, `hsl(211, 65%, 57%)`Charger une affiche de marqueLa tranche la plus large de la bande est la couleur principale de l'affiche, les autres décroissent avec la surfaceGrande image de 6000px de côtéLe canevas de prélèvement est réduit à 2048pxPrélevez la couleur d'un bouton dans la capture de la maquette et collez le HEX directement dans le CSS.
Chargez l'affiche d'un concurrent et observez la part des 8 dominantes pour comprendre ses proportions de couleur.
Prélevez la couleur principale et la couleur secondaire du logo de l'entreprise et appliquez-les au thème des diapositives.
Zoomez jusqu'au pixel pour confirmer qu'une zone est bien du noir pur #000000 et non un gris foncé.
La compression JPG, le profil colorimétrique et les mises à l'échelle décalent les valeurs de 1–3 unités ; pour plus de justesse, partez d'un PNG d'origine et prélevez dans une zone unie.
Non, seul le RVB est lu ; sur un PNG transparent, la zone transparente donne la couleur composée sur le canevas.
Les dominantes sont regroupées par nombre de pixels : une touche de couleur très petite est fusionnée ; prélevez-la directement à la loupe.
L'image est dessinée localement dans le canevas du navigateur pour le prélèvement et n'est envoyée à aucun serveur ; l'écriture dans le presse-papiers n'a lieu que lorsque vous cliquez.
Mis à jour le 2026-09-09
Pipette de précision avec loupe (HEX/RGB/HSL) et extraction automatique de la palette dominante
Cet outil n’est pas entièrement traduit ; certains contenus utilisent la langue source ou une langue de repli.