Mode d’emploi
- Cliquez sur « Choisir une image », glissez-déposez une image ou collez une capture d'écran avec Ctrl+V / Cmd+V.
- Déplacez votre curseur ou votre doigt sur l'image pour afficher en direct les valeurs HEX, RGB, HSL et l'aperçu de la loupe.
- Cliquez sur un point pour enregistrer cette couleur dans votre historique.
- Cliquez sur « Extraire la palette » pour générer une palette adaptée au design, puis copiez les valeurs de couleur dont vous avez besoin.
Exemple : collez la capture d'écran d'un produit, prélevez la couleur principale du bouton et copiez la valeur HEX dans votre fichier CSS ou de conception.
Fonctionnalités principales
- Prélèvement de couleur local : les images sont rendues et échantillonnées localement dans le Canvas du navigateur, sans aucun transfert vers un serveur.
- HEX/RGB/HSL au pixel près : déplacez votre curseur ou votre doigt sur l'image pour lire en temps réel les valeurs HEX, RGB et HSL.
- Loupe de précision : un aperçu zoomé vous aide à cibler précisément les contours des icônes, les détails d'interface et les petites zones de couleur.
- Générateur de palettes : l'échantillonnage des pixels côté client extrait jusqu'à 5 couleurs dominantes pour référence rapide.
- Sauvegarde et copie rapides : cliquez sur l'image pour enregistrer la couleur dans votre historique, puis cliquez sur une nuance pour copier son code couleur.
Outils associés
Convertissez des couleurs en temps réel entre HEX, RGB, HSL et CMYK, et calculez automatiquement le contraste d'accessibilité WCAG (AA/AAA). Gère les pourcentages CMYK pour l'impression. 100 % local.
Générez du texte de remplissage Lorem Ipsum au format texte brut, HTML <p> ou sous forme d'options de tableau JSON. Longueur modulable (paragraphes, phrases, mots), gérant aussi le faux-texte en chinois. 100 % local.
Calculez rapidement les ratios d'aspect et les dimensions manquantes (largeur/hauteur). Intègre des préréglages comme TikTok 9:16, YouTube 16:9, Instagram 4:5, et génère automatiquement le code CSS aspect-ratio. 100 % local.
Logique de calcul
Ce outil décode l'image localement avec HTML5 Canvas et lit les données de pixels RGBA aux coordonnées de prélèvement via getImageData. Les valeurs HEX, RGB et HSL sont calculées instantanément à partir de ces données.
La génération de la palette échantillonne les pixels du Canvas, regroupe les couleurs proches dans des compartiments simples et les classe par fréquence pour renvoyer jusqu'à 5 couleurs dominantes. Ce résultat est idéal pour générer rapidement des palettes de design ou web, mais ne garantit pas la gestion des couleurs professionnelle absolue sous profils ICC / P3.
FAQ
Mes images sont-elles transférées ?
Non. Le chargement de l'image, le prélèvement de couleur, l'aperçu de la loupe et la génération de palettes sont effectués localement dans votre navigateur.
Comment obtenir le code couleur HEX d'une image ?
Sélectionnez ou collez une image, puis déplacez votre curseur ou votre doigt sur le pixel cible. La couleur s'affiche instantanément en direct. Cliquez sur l'image pour enregistrer la couleur dans votre historique, puis cliquez sur la nuance pour copier la valeur HEX.
Quels formats de couleur sont pris en charge ?
L'outil affiche et copie le HEX, le RGB et le HSL, qui sont les formats les plus couramment utilisés en design web et en développement front-end.
Pourquoi la couleur peut-elle différer légèrement de celle de Photoshop ?
Le Canvas lit le pixel tel qu'il est réellement rendu par votre navigateur. Les comportements de navigation, la gamme de couleurs (gamut) de l'écran et les profils colorimétriques intégrés à l'image peuvent créer de légères différences.
Peut-on prélever des couleurs sur mobile ?
Oui. Sur les appareils tactiles, faites glisser votre doigt sur l'image pour déplacer le curseur de visée, puis appuyez ou relâchez pour verrouiller la couleur.