Selecteur de couleur — image ou spectre
Selectionnez des couleurs depuis une image ou un spectre visuel. Obtenez HEX, RGB, HSL, OKLCH et plus, avec copie instantanee, controles de contraste WCAG et enregistrement de palette. 100% dans votre navigateur.
Deposez une image ici
ou cliquez pour parcourir, collez depuis le presse-papiers, ou saisissez une URL ci-dessous
Comment choisir une couleur depuis une image
- Cliquez sur la zone de depot ou glissez une image. Vous pouvez aussi coller une capture (Ctrl+V / Cmd+V) ou saisir une URL d image.
- Survolez (ou maintenez le doigt sur mobile) l image. Une loupe magnifiee affiche la zone sous le pointeur.
- Choisissez la taille d echantillon (1×1, 3×3 ou 5×5 px) pour moyenner les pixels voisins — utile pour les JPEG bruites.
- Cliquez ou relevez le doigt pour valider. La couleur apparait dans le panneau de sortie avec tous les formats.
- Cliquez sur le bouton de copie d un format pour le placer dans le presse-papiers.
- Optionnel : cliquez sur '+ Palette' pour enregistrer la couleur ou consultez le ratio de contraste WCAG ci-dessous.
Comment choisir une couleur depuis le spectre
- Basculez en mode 'Choisir depuis le spectre' via le selecteur en haut.
- Cliquez ou glissez dans le carre saturation/valeur. Deplacez le curseur de teinte pour changer la teinte de base (0°-360°).
- Utilisez le curseur alpha pour ajuster la transparence — le damier illustre le rendu.
- Saisissez des valeurs precises dans les champs HEX, RGBA ou HSLA.
- Sur le champ saturation/valeur, utilisez les fleches (Maj+Fleche pour de plus grands pas).
- Copiez n importe quel format de sortie et enregistrez dans la palette comme en mode image.
Essayez ces couleurs d exemple
Cliquez sur une pastille pour la charger comme couleur courante et voir tous les formats.
Exemple resolu
#1E88E5 · RGB(30, 136, 229) HSL(207°, 90%, 51%) · OKLCH(0.62, 0.16, 248°) Contraste vs blanc : 4,6 : 1 AA ✓ Comment votre image est traitee
Votre image ne quitte pas votre appareil. Au chargement, elle est decodee et rendue directement dans le navigateur via l API Canvas HTML5. Tout l echantillonnage, la conversion et les operations de palette se font 100% cote client.
Aucune donnee d image n est telechargee vers un serveur. Aucun pixel, nom de fichier ou valeur de couleur n est envoye. Verifiez l onglet Reseau de votre navigateur : aucune requete ne porte de donnees d image.
Les palettes et preferences sont stockees dans le localStorage du navigateur, uniquement sur votre appareil. Pas de compte, pas d inscription, pas de stockage serveur.
Comment fonctionne ce selecteur de couleur ?
L outil s execute entierement dans votre navigateur. En mode Image, il utilise l API Canvas pour lire les pixels de l image. En mode Spectre, il affiche un selecteur HSV interactif. Tous les formats (HEX, RGB, HSL, HSV, CMYK, OKLCH, nom CSS) sont calcules en temps reel.
Mon image est-elle envoyee a un serveur ?
Non. Votre image est traitee entierement sur votre appareil. Aucune donnee, aucun nom de fichier ni valeur de couleur n est envoye a un serveur. Verifiez l onglet Reseau du navigateur : aucune requete ne porte de donnees d image.
Puis-je piquer une couleur n importe ou sur l ecran ?
La selection a l ecran via l API EyeDropper est prevue dans une prochaine version. Pour l instant, vous pouvez piquer depuis une image telechargee ou depuis le spectre. Astuce : faites une capture d ecran et collez-la directement dans l outil.
Quelle difference entre HEX, RGB, HSL et OKLCH ?
HEX (#RRGGBB) est le format web le plus courant. RGB definit la couleur par canaux rouge, vert et bleu (0-255). HSL utilise teinte, saturation et luminosite, plus intuitif pour les designers. OKLCH est un espace perceptuellement uniforme moderne : a luminosite egale les couleurs paraissent egalement lumineuses, ideal pour des palettes et systemes de design equilibres.
Comment copier le code couleur sur mobile ?
Chaque ligne de format possede un bouton de copie d au moins 44×44 px. Appuyez : la valeur passe dans le presse-papiers avec une confirmation 'Copie' annoncee pour les lecteurs d ecran.
Pourquoi la couleur differe-t-elle un peu de l image originale ?
L echantillonnage canvas suppose l espace sRGB, donc les images avec d autres profils peuvent varier legerement. La compression JPEG introduit aussi du bruit — essayez un echantillon 3×3 ou 5×5 pour faire la moyenne sur un petit voisinage.
Comment verifier que le contraste est suffisant pour l accessibilite ?
Le panneau Contraste affiche les ratios WCAG 2.x face au noir, au blanc et a un fond personnalise. AA exige 4,5:1 pour le texte normal et 3:1 pour le grand texte ; AAA exige 7:1. Les badges indiquent reussite ou echec d un coup d oeil.
Puis-je enregistrer ma palette sans creer de compte ?
Oui. La palette est stockee dans le localStorage de votre navigateur, sans compte. Exportez-la en variables CSS, JSON ou une feuille de couleurs PNG pour l utiliser dans votre projet.
- Utilisez l image demo pour tester la loupe avant de charger votre propre photo.
- Passez a une taille 3×3 ou 5×5 sur les JPEG bruites pour moyenner un petit voisinage.
- Utilisez les fleches du clavier sur le champ saturation/valeur pour des ajustements au clavier.
- Epinglez vos couleurs frequentes dans la palette et exportez-les en variables CSS.
- Ouvrez le panneau Contraste pour verifier que vos couleurs respectent WCAG AA avant publication.