Sélecteur de couleur
Choisissez une couleur depuis une image téléversée, depuis l'écran avec l'EyeDropper, avec le sélecteur natif, les curseurs RGB/HSL, ou en collant une valeur hex. Consultez d'un coup d'œil HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK et OKLCH, ainsi que le nom CSS le plus proche, le contraste par rapport au noir/blanc et des palettes d'harmonie complètes.
Les images et valeurs de couleur sont traitées dans votre navigateur. Rien n'est téléversé vers un serveur.
Comment utiliser ce sélecteur de couleur
- Choisissez une couleur avec le sélecteur natif, collez une valeur hex, ou utilisez les curseurs RGB/HSL.
- Téléversez une image, glissez-déposez-la ou collez-la — puis cliquez sur un pixel pour capturer sa couleur.
- Dans les navigateurs compatibles, cliquez sur « Choisir depuis l'écran » pour utiliser l'API EyeDropper.
- Cliquez sur n'importe quelle valeur (HEX, RGB, HSL, HSV, CMYK, OKLCH) pour la copier.
- Parcourez les palettes de teintes claires, foncées, monochromatiques, complémentaires, analogues, triadiques, tétradiques et complémentaires divisées.
- Enregistrez des couleurs dans les récents — elles restent dans votre navigateur via localStorage.
Questions fréquentes
Puis-je choisir une couleur depuis une image ?
Oui. Téléversez une image, glissez-déposez-la ou collez-la depuis le presse-papiers. Survolez pour voir la couleur du pixel dans l'aperçu, puis cliquez ou touchez pour la sélectionner. Tout reste dans votre navigateur.
Qu'est-ce que l'OKLCH et pourquoi l'utiliser ?
OKLCH est un espace colorimétrique perceptuel (luminosité, chroma, teinte) qui offre des progressions de couleur plus régulières que HSL. CSS le prend en charge nativement depuis 2023 via `oklch()`.
L'EyeDropper fonctionne-t-il dans tous les navigateurs ?
Il fonctionne dans les navigateurs basés sur Chromium (Chrome, Edge, Opera) sur ordinateur. Le bouton n'apparaît que si la fonctionnalité est prise en charge.
Quelle est la précision du CMYK ici ?
C'est une approximation à l'écran (sans profil ICC). Pour les travaux d'impression, utilisez toujours un véritable profil CMYK dans votre application de design.
Pourquoi la couleur que je capture avec l'EyeDropper sur l'écran ne correspond-elle pas à mon CSS ?
L'EyeDropper lit le pixel rendu — ce que votre écran affiche réellement après la gestion des couleurs. Sur un écran large gamut P3, cela diffère légèrement du hex sRGB de votre feuille de style. Pour un CSS exactement conforme à la marque, prélevez directement depuis la source de conception (Figma, fichier d'origine) plutôt que depuis l'écran rendu.