Générateur de dégradés CSS
Dégradés linéaires, radiaux et coniques.
Design
Extraire les couleurs d'une image.
Cela mérite d'être précisé, car cela change ce que vous pouvez en faire.
L'image est lue via l'API Canvas du navigateur et n'est jamais transmise à un serveur.
Vous pouvez donc l'utiliser avec des captures d'écran internes, des documents client sous accord de confidentialité, ou tout fichier qui ne doit pas quitter votre poste.
Cela signifie aussi que l'outil fonctionne hors connexion une fois la page chargée, et qu'aucune limite de taille n'est imposée par un service : la seule limite est la mémoire de votre navigateur.
Et il n'en reste aucune copie nulle part. Fermez l'onglet, l'image disparaît.
Du point de vue de la protection des données, c'est important si vous manipulez des images contenant des données personnelles : il n'y a pas de transfert vers un tiers à documenter, ni de sous-traitant à encadrer par un contrat.
Ce sont deux choses distinctes, souvent confondues.
La couleur exacte est celle du pixel désigné. Utile pour reproduire une couleur précise, mais soumise au bruit de l'image : deux pixels voisins d'un même « bleu » peuvent différer sensiblement.
Mieux vaut donc prélever dans une zone large et uniforme, jamais sur un bord ni dans une ombre ou un reflet.
La couleur dominante s'obtient en regroupant les pixels proches et en classant les groupes par fréquence. La réponse est plus stable et c'est ce que l'on cherche pour « sortir la palette » d'une photographie.
Notez que la couleur la plus fréquente n'est pas la plus caractéristique : sur une photo avec du ciel, le dominant sera le bleu du ciel même si le sujet est ailleurs.
Méfiez-vous enfin des images fortement compressées en JPEG : les artefacts altèrent les couleurs au bord des aplats, et la pipette y ment.
Quelques précautions avant de valider une couleur.
Si l'image porte un profil colorimétrique autre que sRGB, le navigateur peut l'afficher convertie alors que les données du canvas sont dans un autre espace. La valeur relevée peut donc ne pas correspondre exactement à ce que vous voyez.
Pour un travail où la couleur est critique, vérifiez le résultat contre le fichier d'origine dans une application gérant les profils.
Sur des captures d'écran, le problème ne se pose généralement pas, celles-ci étant déjà en sRGB.
Usages qui fonctionnent bien : retrouver la couleur de marque d'un logotype dont vous n'avez pas la charte, construire une palette à partir d'une photographie de référence, ou vérifier la couleur employée par un site à partir d'une capture.
Et si vous comptez utiliser les couleurs extraites pour du texte, vérifiez ensuite le contraste. Une palette tirée d'une photographie satisfait rarement les niveaux d'accessibilité telle quelle.
Non. Elle est traitée dans votre navigateur via l'API Canvas et ne quitte pas votre poste.
Dans une zone large et uniforme, jamais sur un bord ni dans une ombre ou un reflet.
L'exacte est celle d'un pixel ; la dominante regroupe les pixels proches et est plus stable.
Le profil colorimétrique de l'image, ou des artefacts de compression JPEG sur les bords.
Oui, puisqu'il n'y a aucun transfert vers un tiers.
Oui, une fois la page chargée.