Color Picker : Choisir n'importe quelle couleur d'écran

Qu'est-ce que Color Picker ?

Color Picker est un outil gratuit basé sur le navigateur qui vous permet de capturer n'importe quelle couleur de votre écran à l'aide de l'EyeDropper API, ou de saisir manuellement des valeurs de couleur en format HEX, RGB ou HSL pour voir instantanément les conversions dans tous les modèles de couleur principaux. Les designers l'utilisent lorsqu'ils ont besoin de reproduire une couleur depuis une capture d'écran, un site web ou une maquette de design sans ouvrir de logiciel de bureau lourd. Contrairement aux sélecteurs de couleur natifs du système d'exploitation, cet outil convertit immédiatement entre HEX, RGB, HSL, HSB et CMYK dans une seule interface, sans connexion, sans installation, et aucune donnée ne quitte votre navigateur.

Fonctionnalités principales

• Capturer des couleurs n'importe où sur votre écran — L'EyeDropper API active un échantillonneur de couleur au niveau système dans Chrome, Edge et autres navigateurs Chromium modernes. Cliquez sur n'importe quel pixel et la couleur se charge instantanément dans l'outil.
• Prise en charge de l'EyeDropper API dans les navigateurs modernes — L'outil détecte la disponibilité de l'API à l'exécution. Sur les navigateurs non pris en charge, un message clair apparaît plutôt qu'un bouton défaillant.
• Conversion entre HEX, RGB, HSL, HSB, CMYK — Le panneau « All Formats » affiche toutes les représentations simultanément. Modifier n'importe quel champ de saisie met à jour tous les autres en temps réel.
• Copier les valeurs de couleur dans le presse-papiers — Chaque format possède un bouton de copie dédié. Une coche remplace l'icône de copie pendant deux secondes pour confirmer que la copie a réussi.
• Historique des couleurs (fonction supporter) — Jusqu'à 50 couleurs récemment utilisées sont stockées dans IndexedDB et affichées sous forme d'échantillons cliquables. L'historique persiste entre les rechargements de page. Nécessite un abonnement supporter Ko-fi.
• Fonctionne hors ligne après chargement — Toute la logique de conversion s'exécute en JavaScript. Une fois la page chargée, vous pouvez vous déconnecter d'internet et l'outil continue de fonctionner.

Comment utiliser Color Picker

Étape 1 : Ouvrir l'outil et choisir une méthode de saisie

Accédez à Color Picker. L'outil s'ouvre avec la couleur par défaut #3B82F6 (un bleu moyen). Vous disposez de trois façons de définir une couleur :

• Cliquez sur le bouton Pick From Screen (icône pipette) pour utiliser l'EyeDropper API
• Cliquez sur la petite entrée d'échantillon de couleur en haut à droite du panneau du sélecteur pour ouvrir la roue chromatique native de votre navigateur
• Saisissez directement dans les champs de saisie HEX, R/G/B ou H/S/L

Étape 2 : Échantillonner une couleur depuis votre écran (méthode EyeDropper)

Cliquez sur Pick From Screen. L'étiquette du bouton passe à « Picking... » pendant que l'EyeDropper est actif. Votre curseur devient une loupe en réticule. Cliquez sur n'importe quel pixel de votre écran, y compris des pixels en dehors de la fenêtre du navigateur sur la plupart des systèmes. L'outil capture la valeur hex, met à jour tous les champs de format et affiche une notification de succès. La couleur échantillonnée est automatiquement ajoutée au panneau d'historique.

Étape 3 : Saisir ou ajuster manuellement une valeur de couleur

Si vous connaissez déjà la valeur de couleur, saisissez-la dans n'importe quel champ de saisie. Le champ HEX accepte les valeurs avec ou sans le préfixe #. Les entrées RGB acceptent des entiers de 0 à 255. HSL accepte H (0–360), S (0–100) et L (0–100). Tout changement de champ recalcule et met à jour les deux autres formats simultanément.

Étape 4 : Voir toutes les conversions de format de couleur

Faites défiler jusqu'à la carte All Formats sous le sélecteur principal. Ce panneau affiche l'ensemble complet des conversions : HEX, RGB, HSL, HSB et CMYK. Chaque ligne possède son propre bouton de copie. Cliquez sur l'icône Copier à côté de n'importe quel format pour écrire cette valeur dans le presse-papiers.

Étape 5 : Réutiliser les couleurs de l'historique

Les couleurs précédemment sélectionnées apparaissent sous forme d'échantillons colorés dans le panneau Recent Colors. Cliquez sur n'importe quel échantillon pour recharger cette couleur dans le sélecteur et les champs de format. Utilisez le bouton Clear (icône poubelle) pour effacer l'historique si nécessaire.

Exemples pratiques

Reproduire une couleur de marque depuis un site web

Vous construisez une page de destination et avez besoin de reproduire exactement le violet utilisé dans le logo d'un client affiché dans un onglet du navigateur. Cliquez sur Pick From Screen, survolez le logo et cliquez. L'outil capture la valeur hex, par exemple #6B21A8, et affiche immédiatement rgb(107, 33, 168) et hsl(276, 61%, 40%). Copiez le format utilisé par votre fichier CSS.

Convertir une couleur Figma en CSS

Votre spécification de design Figma liste une couleur comme rgb(234, 179, 8). Saisissez 234 dans le champ R, 179 dans G et 8 dans B. Le champ HEX se met à jour vers #EAB308 et HSL affiche hsl(45, 93%, 47%). Copiez la valeur HEX pour l'utiliser dans une classe Tailwind comme bg-[#EAB308] ou le HSL pour une propriété personnalisée CSS.

Vérifier à quoi ressemble un code hex

Une révision de code montre background: #1E3A5F et vous souhaitez le visualiser. Collez la valeur dans le champ HEX. Le grand aperçu de couleur se remplit avec la couleur (un bleu marine foncé) et la couleur du texte de l'étiquette s'ajuste automatiquement entre noir et blanc pour la lisibilité. Vous pouvez la comparer avec d'autres couleurs en utilisant les échantillons de l'historique.

Conseils et meilleures pratiques

Utilisez le panneau d'historique comme palette temporaire (fonction supporter). L'outil stocke jusqu'à 50 couleurs dans IndexedDB pour les supporters premium. Construisez une petite palette en échantillonnant ou en saisissant des couleurs une à une ; chacune devient un échantillon cliquable auquel vous pouvez revenir sans noter les valeurs.

L'EyeDropper fonctionne sur n'importe quel pixel, y compris les images vidéo. Mettez une vidéo en pause sur l'image contenant votre couleur cible, puis utilisez Pick From Screen. L'API échantillonne le pixel rendu, pas la source compressée.

Saisissez des valeurs HSL pour un contrôle précis. Si vous voulez une teinte spécifique à une saturation moindre, saisissez directement dans les champs H et S. HSL est plus intuitif pour des ajustements comme « même couleur, 20% plus claire » (augmenter L de 20).

Les URL partageables encodent la couleur actuelle. L'outil utilise un hook d'état partageable : votre valeur HEX actuelle est encodée dans l'URL de la page. Copiez l'URL du navigateur pour envoyer une couleur spécifique à un collègue.

Effacez l'historique avant de partager un appareil. Si vous sélectionnez des couleurs incluant des éléments de design confidentiels, utilisez le bouton Clear dans le panneau d'historique pour les supprimer d'IndexedDB avant de passer l'appareil à quelqu'un.

Problèmes courants et résolution

Le message « EyeDropper non pris en charge » apparaît. L'EyeDropper API nécessite un navigateur basé sur Chromium (Chrome 95+, Edge 95+). Firefox et Safari ne la prennent pas en charge au début de 2026. Utilisez l'échantillon de saisie de couleur native ou saisissez la valeur manuellement sur les navigateurs non pris en charge.

Le champ HEX n'affiche pas de mise à jour après la saisie. Le champ nécessite un code hex valide de 3, 4, 6 ou 8 caractères, avec ou sans #. Les valeurs partielles comme #3B sont acceptées dans la saisie, mais la conversion ne se déclenche qu'une fois qu'un code valide complet est présent.

Valeurs RGB hors plage. Chaque champ R, G, B est limité à 0–255. La saisie d'une valeur supérieure à 255 est corrigée à 255 lors de la perte de focus. Le fallback parseInt signifie que les caractères non numériques se résolvent à 0.

Le format copié affiche la mauvaise valeur. Chaque bouton de copie copie sa chaîne de format spécifique. Assurez-vous de cliquer sur l'icône de copie dans la ligne du panneau All Formats correspondant au format dont vous avez besoin, et non sur celui de la ligne de saisie HEX principale.

L'historique ne persiste pas après rechargement. L'historique est une fonction réservée aux supporters qui utilise IndexedDB. Si vous n'êtes pas un supporter premium, le panneau d'historique n'enregistrera pas d'entrées. Si IndexedDB est désactivé ou indisponible en mode privé/incognito, le panneau d'historique apparaîtra vide à chaque visite. L'outil gère cela silencieusement : les fonctions d'historique sont simplement indisponibles dans ce contexte.

Confidentialité et sécurité

Color Picker traite tout localement dans votre navigateur en utilisant JavaScript. Aucune valeur de couleur, aucun contenu d'écran ni aucune donnée d'utilisation ne sont transmis à un serveur. L'EyeDropper API ne capture que le seul pixel sur lequel vous cliquez ; aucune capture d'écran ni enregistrement d'écran ne se produit. L'historique des couleurs est stocké dans l'IndexedDB de votre navigateur, pas dans une base de données externe. L'outil fonctionne entièrement hors ligne une fois la page chargée, et il est sûr de l'utiliser avec des éléments de design confidentiels.

Foire aux questions

Color Picker est-il gratuit ?

Oui, Color Picker est entièrement gratuit sans inscription requise. Les fonctions principales, l'échantillonnage EyeDropper, la conversion multi-format et la copie dans le presse-papiers, sont toutes disponibles sans compte supporter. Les fonctions de supporter premium comme l'historique des couleurs, les préréglages et les notes d'outil sont disponibles avec un abonnement supporter Ko-fi.

Color Picker fonctionne-t-il hors ligne ?

Oui. Une fois la page chargée, Color Picker fonctionne sans connexion internet. Toute la logique de conversion des couleurs est implémentée en JavaScript s'exécutant dans votre navigateur. L'EyeDropper API est également une fonction native du navigateur qui ne nécessite pas d'accès réseau.

Mes données sont-elles en sécurité avec Color Picker ?

Oui. Aucune donnée de couleur ni contenu d'écran ne quitte votre navigateur. L'EyeDropper API capture une valeur de pixel au moment où vous cliquez ; elle ne prend pas de captures d'écran ni n'enregistre votre écran. L'historique des couleurs n'est stocké que dans l'IndexedDB de votre navigateur. Glyph Widgets n'a aucune visibilité côté serveur sur les couleurs que vous sélectionnez.

Quels navigateurs prennent en charge le bouton EyeDropper ?

L'EyeDropper API fonctionne dans Chrome 95 et versions ultérieures, Edge 95 et versions ultérieures, et autres navigateurs basés sur Chromium. Elle n'est pas prise en charge dans Firefox ou Safari. L'outil détecte la prise en charge à l'exécution et affiche un message clair au lieu d'un bouton défaillant sur les navigateurs non pris en charge.

Quels formats de couleur l'outil produit-il ?

L'outil convertit et affiche HEX (p. ex., #3B82F6), RGB (p. ex., rgb(59, 130, 246)), HSL (p. ex., hsl(217, 91%, 60%)), HSB (aussi appelé HSV) et CMYK. Le panneau All Formats affiche les cinq simultanément et fournit des boutons de copie individuels pour chacun.

Puis-je saisir une valeur de couleur sans utiliser la pipette ?

Oui. Vous pouvez saisir directement dans les champs de saisie HEX, R/G/B ou H/S/L. Vous pouvez également cliquer sur la petite saisie de couleur native (le carré coloré à côté du bouton Pick From Screen) pour ouvrir la roue chromatique intégrée de votre navigateur. Les trois méthodes de saisie mettent à jour le même état de couleur interne.

Combien de couleurs le panneau d'historique stocke-t-il ?

Le panneau d'historique stocke jusqu'à 50 couleurs (fonction supporter). Lorsque la limite est atteinte, l'entrée la plus ancienne est supprimée. L'historique est enregistré dans IndexedDB et persiste entre les sessions du navigateur. Cette fonction nécessite un abonnement supporter Ko-fi.

Puis-je partager une couleur spécifique avec quelqu'un ?

Oui. La couleur actuelle est encodée dans l'URL de la page comme état partageable. Copiez l'URL depuis la barre d'adresse de votre navigateur après avoir sélectionné une couleur. Lorsque votre collègue ouvre le lien, l'outil se charge avec cette couleur présélectionnée et affiche une notification « Loaded from share ». Vous pouvez également utiliser les boutons de partage en bas de la page pour publier directement sur Twitter, LinkedIn ou Reddit.

L'outil fonctionne-t-il avec les valeurs alpha/transparence ?

L'outil actuel travaille principalement avec des couleurs entièrement opaques. Le champ de saisie HEX accepte les codes hex à 3, 4, 6 et 8 chiffres (les codes à 4 et 8 chiffres incluent un canal alpha), mais les saisies RGB et HSL n'exposent pas de curseur alpha séparé. Si vous avez besoin de valeurs RGBA ou HSLA, les valeurs RGB et HSL affichées peuvent être manuellement étendues avec votre valeur alpha souhaitée.

Que se passe-t-il si je saisis un code hex invalide ?

Le champ de saisie HEX accepte les valeurs partielles ou invalides pendant la frappe. La conversion de couleur ne se met à jour que lorsqu'un code hex valide est présent (3, 4, 6 ou 8 caractères, avec ou sans #). Les valeurs partielles ne causent pas d'erreurs : l'affichage conserve simplement la dernière couleur valide.

Outils connexes

• Contrast Checker — Vérifiez si les couleurs de premier plan et d'arrière-plan que vous avez choisies respectent les normes d'accessibilité WCAG 2.1 après les avoir sélectionnées avec Color Picker.
• Color Converter — Convertissez entre des formats de couleur supplémentaires non affichés dans l'interface principale du sélecteur.
• Bientôt disponible: Palette Generator — Générez une palette de couleurs complète à partir de la valeur hex que vous avez sélectionnée.
• Bientôt disponible: Gradient Generator — Utilisez les couleurs que vous avez échantillonnées pour créer des dégradés CSS avec un éditeur visuel.

Essayez Color Picker maintenant : Glyph Widgets Color Picker