Extrayez d'abord la palette d'exemple, puis utilisez une sélection précise et des modifications manuelles pour décider quelles couleurs appartiennent à votre propre projet. Ouvrir Sélecteur de couleurs d'image.
Téléchargez et extrayez une palette de départ
Ouvrez le sélecteur de couleur d'image et téléchargez une image prise en charge, ou essayez l'échantillon. L'extraction automatique télécharge la source sur le serveur. L'échantillon dans ce guide est collage-botanical.jpg, une photo 1200 x 900 de fleurs, de feuilles et d'un arrière-plan couleur pêche.
Laissez Couleurs à extraire sur 6 et sélectionnez Dominant pour l'exemple. Dominant privilégie les couleurs principales de l'image, tandis que Vibrant donne plus d'influence aux accents colorés. Une demande peut utiliser de 3 à 12 couleurs ; une image avec moins de groupes visibles distincts peut en renvoyer moins.
Le résultat Dominant réel contient #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA. Le plus grand groupe est #E3B49F à environ 28.88% des pixels visibles échantillonnés. L'extraction a utilisé un échantillon 512 x 384 ; ces pourcentages ne sont pas un recensement exact de l'image en pleine résolution.
Une couleur de palette peut être une moyenne des couleurs proches. Choisissez un pixel particulier lorsque vous avez besoin de la valeur d'un petit détail.
Choisissez et affinez les couleurs individuelles
Cliquez ou appuyez sur l'image pour inspecter un pixel avec la loupe. Mettez l'image au point et utilisez les touches fléchées pour déplacer d'un pixel, Maj plus une flèche pour déplacer de dix, puis Entrée pour choisir. Copiez HEX, RGB ou HSL avec son bouton de copie individuel, ou utilisez Ajouter à la palette.
Sélectionnez un échantillon pour modifier sa valeur HEX ou sa couleur, déplacez-le vers la gauche ou la droite, ou supprimez-le. L'ajout d'une couleur personnalisée accepte une valeur HEX de votre choix. Verrouiller la couleur préserve un échantillon sélectionné lorsqu'Actualiser la palette ou un paramètre d'extraction modifié génère une autre palette de départ.
L'échantillonnage et la transparence proposent une couleur source et une composition sur un arrière-plan. La couleur source inclut l'opacité dans les codes copiés lorsque cela est pertinent ; la composition montre le pixel mélangé sur l'arrière-plan d'échantillon choisi. Les échantillons de palette eux-mêmes sont des valeurs RGB opaques. Les couleurs modifiées et sélectionnées n'ont pas de pourcentage source estimé.
Les images décodables par le navigateur utilisent des échantillons sRGB du navigateur. Si un aperçu normalisé est utilisé, le sélecteur étiquette explicitement ses couleurs et ses coordonnées comme étant approximatives.
L'exemple dans ce guide
Couleurs à extraire : 6 ; Dominante ; aucun changement manuel ni verrouillage ; Enregistrer sous : PNG. L'extraction automatique a échantillonné 512 x 384 pixels.
- Image source
- 1200 x 900 px
- Couleurs extraites
- 6 couleurs opaques
- Carte de palette
- 600 x 500 px
- PNG téléchargé
- 9,163 octets
Vérifier une paire texte et arrière-plan
Ouvrez Vérifier le contraste des couleurs. Définissez le texte et l'arrière-plan avec les commandes de couleur, saisissez des codes HEX ou utilisez la couleur sélectionnée pour l'un ou l'autre côté. L'échantillon de texte en direct vous permet de comparer la paire, et le rapport est accompagné de résultats distincts pour Normal AA, Normal AAA, Large AA et Large AAA.
Choisissez une paire pour l'usage prévu plutôt que de supposer que chaque couleur extraite peut être utilisée comme texte. Une pêche claire et un violet clair peuvent fonctionner ensemble dans une photo tout en constituant une mauvaise combinaison texte-arrière-plan.
Cette commande vérifie uniquement cette paire de couleurs pour le contraste du texte. Il ne s'agit pas d'un audit d'accessibilité complet et cela ne détermine pas si la typographie, l'interaction au clavier ou le reste de la conception est utilisable.
Un rapport de contraste conforme est une vérification utile, pas une garantie qu'une page entière est accessible.
Copiez les valeurs ou exportez la palette
Pour un transfert rapide, copiez un code individuel ou utilisez Copier les couleurs de la palette HEX. Pour un fichier, choisissez Enregistrer sous et sélectionnez Démarrer. PNG crée une image de palette étiquetée ; SVG conserve les échantillons et les étiquettes en tant que contenu vectoriel ; CSS fournit des variables de couleur numérotées ; JSON contient des valeurs HEX, RGB et HSL.
L'exemple non modifié à six couleurs exporte palette.png à 600 x 500 pixels et 9,163 octets. L'ordre de ses échantillons correspond à la palette. Votre palette finale peut contenir de 1 à 12 couleurs après modification, même si le nombre de départ automatique était différent.
Téléchargez avant de partir ou d'actualiser. L'exportation finale télécharge la source et les couleurs choisies pour un traitement côté serveur. Elle crée un nouveau fichier de palette et ne recolore ni ne remplace la photo originale.
PNG et SVG sont des références visuelles pratiques. CSS et JSON sont utiles lorsque l'étape suivante nécessite des valeurs de couleur réutilisables.
Questions fréquentes
La pipette renvoie-t-elle les mêmes couleurs que l'extraction automatique ?
Pas nécessairement. Une valeur sélectionnée décrit un pixel source ou d'aperçu particulier. L'extraction automatique regroupe les pixels échantillonnés et peut renvoyer des couleurs moyennes.
Les pixels transparents sont-ils comptés ?
Les pixels entièrement transparents sont exclus de l'extraction. Les pixels partiellement transparents ont un poids réduit. L'échantillonnage source peut montrer l'opacité, mais les échantillons de palette exportés sont opaques.
Que deviennent les couleurs verrouillées lorsque j'actualise ?
Les couleurs verrouillées restent dans la palette tandis que les nouvelles couleurs extraites remplissent les autres positions. Une couleur conservée ou modifiée ne se voit pas attribuer un pourcentage d'image inventé.
Puis-je utiliser ceci pour une couleur de marque exacte ?
Saisissez directement une valeur HEX connue ou sélectionnez un pixel source approprié. L'éclairage de la photo, la compression, la gestion des couleurs et les aperçus normalisés peuvent modifier les valeurs échantillonnées, donc une palette photo automatique n'est pas une preuve d'une spécification de marque originale.
Construisez une palette que vous pouvez emporter dans votre prochaine conception
Essayez un exemple ou utilisez votre propre fichier, et vérifiez le résultat avant de partager.
