Chargement...
Chargement...
Déposez une photo ou une capture d'écran, survolez pour une loupe agrandie, cliquez pour choisir un pixel — copiez HEX, RGB ou HSL, et assemblez une palette de jusqu'à 20 couleurs en tant que variables CSS prêtes à coller.
Un sélecteur de couleur d'image lit la valeur RGB exacte d'un seul pixel d'une photo, d'une capture d'écran ou d'un modèle de design afin que vous puissiez utiliser cette couleur ailleurs — dans une palette de marque, une variable CSS, un jeton de thème, ou une correspondance de peinture. Les designers l'utilisent pour extraire des couleurs de tableaux d'inspiration. Les développeurs front-end l'utilisent pour faire correspondre une capture d'écran à un thème CSS. Les marketeurs l'utilisent pour extraire des couleurs de marque d'un logo. Les peintres et les artisans l'utilisent pour faire correspondre une photo du monde réel à une échantillon de peinture ou de fil. Contrairement à un détecteur de 'couleur dominante', cet outil vous donne un contrôle par pixel : survolez pour prévisualiser, cliquez pour capturer. La loupe agrandie vous montre le pixel exact sous votre curseur à un zoom de 8×, donc choisir un seul surlignage ou une bordure de 1 pixel est simple. Tout fonctionne dans votre navigateur — votre image ne quitte jamais la page.
Faites glisser un fichier JPG, PNG, WebP, GIF ou BMP dans la zone de téléchargement, ou cliquez pour choisir depuis votre appareil. L'image s'affiche dans l'espace de travail à l'échelle de prévisualisation, mais l'échantillonnage des pixels se fait sur la copie à résolution originale.
Déplacez votre curseur sur l'image. Une loupe agrandie apparaît au-dessus du curseur montrant le pixel exact en dessous à un zoom de 8×, avec un marqueur de 1 pixel au centre. La carte de couleur du curseur en dessous du canevas se met à jour en direct avec HEX, RGB et HSL.
Cliquez sur n'importe quel pixel pour ajouter sa couleur à la palette. Les doublons sont automatiquement ignorés, donc il est sûr de cliquer sans gonfler la liste. Jusqu'à 20 couleurs peuvent tenir dans une palette.
Cliquez sur n'importe quel HEX, RGB ou HSL dans la palette pour le copier dans le presse-papiers. Cliquez sur l'échantillon lui-même pour copier son HEX. L'ensemble de la palette peut également être exporté sous forme de bloc de propriétés CSS personnalisées (--color-1, --color-2, …).
Cliquez sur Nouvelle image pour effacer l'espace de travail et charger un fichier différent. Utilisez Effacer à l'intérieur de la carte de palette pour garder l'image mais recommencer la palette.
1. Décodez le fichier source avec new Image() — le navigateur gère JPG/PNG/WebP/GIF/BMP nativement. 2. Dessinez l'image à résolution originale sur un canevas hors écran. 3. Rendu d'une prévisualisation réduite sur le canevas visible (max 900 px sur le côté le plus long). 4. Au survol, mappez le curseur (x,y) de l'espace d'aperçu vers les coordonnées de l'espace source. 5. Lisez le pixel via getImageData(sx, sy, 1, 1).data → [R, G, B, A]. 6. Convertissez en HEX (R/G/B en hexadécimal à 2 chiffres) et HSL (rgbToHsl).
L'échantillonnage contre le canevas en pleine résolution (plutôt que l'aperçu) est important car le redimensionnement moyenne les pixels voisins — ce qui ressemble à un rouge pur sur un aperçu de 100px de haut peut être (240, 30, 30) au lieu du (255, 0, 0) exact de la source. Mapper les coordonnées du curseur vers la résolution source et échantillonner là-bas garde la couleur choisie fidèle au fichier original. La loupe adopte la même approche : elle capture un petit carré du canevas en résolution originale autour du curseur et le rend à 8× dans un cercle de 120 pixels, avec imageSmoothingEnabled = false pour que les pixels individuels restent nets.
Référence : MDN — CanvasRenderingContext2D.getImageData
| Source | Meilleur flux de travail |
|---|---|
PNG de logo de marque avec un fond transparent | Survolez la loupe sur la zone de couleur unie, cliquez une fois. Copiez le HEX. Fait en deux clics. La transparence PNG se rend contre le fond de la page — échantillonnez à l'intérieur du logo, pas sur le bord. |
Capture d'écran d'inspiration d'un site de design | Choisissez l'arrière-plan, la couleur d'action principale, l'accent secondaire et la couleur du texte principal. Copiez les variables CSS. Quatre palettes de couleurs sont généralement suffisantes pour recréer un système de design. |
Photo pour référence artistique (dégradé de ciel, correspondance de peinture) | Utilisez la loupe pour choisir des pixels exacts le long du dégradé. Construisez une palette de 5-7 couleurs pour recréer le look. Les dégradés de photo ont du bruit — choisissez dans des zones ayant l'air unies, pas sur les bords. |
Capture d'écran de rapport de bogue avec la mauvaise teinte de rouge | Survolez la loupe sur le mauvais rouge, copiez le HEX, collez dans le problème avec le HEX attendu à côté. La loupe rend les bordures de 1 pixel et les cheveux sélectionnables sans zoomer dans le navigateur. |
Découpez le sujet de n'importe quelle photo avec l'IA sur appareil — aucun téléchargement requis.
Réduisez les fichiers JPG, PNG ou WebP dans votre navigateur avec un curseur de qualité interactif.
Ajustez, filtrez, faites pivoter et recadrez des photos dans le navigateur — pas de téléchargements, pas de filigrane.
Composez des mèmes et des collages d'écran avec de vraies couches — collez, faites glisser, recadrez, légendez, exportez.
Dernière mise à jour