Color Picker fournit un eyedropper au pixel près pour prélever des couleurs depuis n'importe quel élément d'une page web — texte, arrière-plans, images, gradients ou tout pixel visible. Obtenez la valeur exacte de la couleur simultanément en HEX, RGB et HSL, avec un aperçu pixel agrandi pour un ciblage précis. Les couleurs précédemment prélevées sont sauvegardées dans un historique pour y accéder rapidement.
Extraire des valeurs de couleur exactes d'une page web est une tâche courante — reproduire la couleur d'une marque, s'inspirer d'un design ou vérifier une teinte utilisée sur le site d'un concurrent. Les DevTools du navigateur affichent les couleurs dans le panneau Styles, mais uniquement pour les éléments ayant des propriétés CSS de couleur explicites — pas pour les images, les gradients ou les couleurs héritées. L'eyedropper de Color Picker fonctionne au niveau du pixel — il lit la couleur rendue réelle du pixel sous votre curseur, quelle que soit son origine. Cliquez sur un ciel bleu dans une image principale, un point médian d'un gradient ou un calque semi-transparent, et obtenez la valeur de couleur composite exacte. Le cercle d'aperçu agrandi affiche une vue zoomée des pixels environnants afin que vous puissiez cibler le pixel exact souhaité. Les trois formats de sortie (HEX, RGB, HSL) sont affichés simultanément — cliquez sur un format pour le copier. Vos derniers prélèvements sont sauvegardés dans un historique en bas, pour revenir facilement à une couleur déjà prélevée.
Un aperçu circulaire agrandi montre les pixels zoomés autour de votre curseur, avec un réticule pour une sélection de pixel précise. Prélevez des couleurs depuis du texte, des arrière-plans, des images, des gradients, des SVG ou tout pixel visible sur la page.
Chaque couleur prélevée est affichée dans les trois formats à la fois : HEX (#7c3aed), RGB (rgb(124, 58, 237)) et HSL (hsl(262, 83%, 58%)). Aucun changement ni conversion — tous les formats sont immédiatement disponibles.
Cliquez sur n'importe quelle ligne de format (HEX, RGB ou HSL) pour copier instantanément cette valeur dans votre presse-papiers. Une brève animation « Copié ! » confirme l'action. Collez directement dans votre CSS, outil de design ou spécification de couleur.
Vos couleurs prélevées récemment sont sauvegardées dans un historique visuel affichant des color swatches. Cliquez sur un swatch pour resélectionner cette couleur et revoir ses valeurs. L'historique persiste pendant votre session — prélevez des couleurs sur plusieurs pages.
La couleur prélevée est affichée sous forme d'un grand swatch au-dessus des valeurs de format, facilitant la visualisation et la vérification de la couleur. Le swatch est suffisamment grand pour révéler des nuances subtiles qui pourraient sembler identiques à une taille plus petite.
Prélève des couleurs depuis n'importe quel pixel visible : couleurs CSS, gradients CSS, images (PNG, JPG, SVG), éléments canvas, images vidéo, calques semi-transparents (en prélevant la couleur composite), et même les iframes. Si vous pouvez le voir, vous pouvez le prélever.
Prélevez la couleur exacte d'une marque depuis le site web d'une entreprise pour vous assurer que votre design ou contenu utilise la bonne teinte. Obtenez la valeur HEX précise plutôt que de l'estimer à l'œil ou de parcourir les chartes graphiques.
Prélevez des couleurs directement depuis des images principales, des photos de produits ou des illustrations. Extrayez une couleur dominante d'une photo pour l'utiliser comme arrière-plan complémentaire dans votre design.
La spécification de design indique que le bouton doit être #7c3aed. Prélevez la couleur du bouton implémenté pour vérifier qu'elle correspond. Détecte les différences de couleur subtiles invisibles à l'œil nu.
Parcourez des sites d'inspiration design et prélevez les couleurs qui retiennent votre attention. L'historique constitue progressivement une palette des couleurs prélevées durant la session — utilisez-la comme point de départ pour votre propre schéma de couleurs.
Prélevez des couleurs à différents points le long d'un gradient CSS pour voir la couleur exacte à chaque position. Utile pour reproduire des gradients ou comprendre comment les arrêts de gradient se fondent.
Ouvrez le dock flottant DevSuite Pro et cliquez sur l'icône Color Picker. Le curseur se transforme en eyedropper avec un cercle d'aperçu agrandi.
Déplacez votre curseur sur la page. L'aperçu agrandi affiche une vue zoomée des pixels autour de votre curseur, avec un réticule indiquant le pixel cible exact.
Cliquez n'importe où sur la page pour prélever la couleur de ce pixel. Le color swatch, les valeurs HEX, RGB et HSL se mettent à jour instantanément.
Cliquez sur la ligne HEX, RGB ou HSL pour copier cette valeur dans votre presse-papiers. Une confirmation « Copié ! » apparaît brièvement.
Continuez à cliquer pour prélever d'autres couleurs. Chaque prélèvement est ajouté à l'historique. Cliquez sur n'importe quel swatch de l'historique pour rappeler cette couleur.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
