Passer au contenu

Pipette et palette d'image

Choisissez des couleurs dans une image localement dans le navigateur, copiez les valeurs HEX/RVB/CSS, extrayez une palette représentative de 2 à 32 couleurs, puis exportez des variables CSS ou du JSON. L'entrée HEIC/HEIF est prise en charge.

Glissez-déposez l'image ici ou cliquez pour sélectionner

Supporte PNG / JPEG / WebP / AVIF / HEIC / HEIF

Nombre de fichiers

0 / 1

Taille totale

0 bytes / 25 MB

Limite par fichier

25 MB

Pipette et palette d'image

Démarrage rapide

1
Importer une image
2
Cliquer l’aperçu et copier HEX/RVB/CSS
3
Choisir la taille de palette (4/6/8/12/16/24/32)
4
Extraire les couleurs représentatives
5
Exporter des variables CSS ou du JSON

Scénarios courants

Sélection couleur design/affiche

Extraire couleurs primaires et accentuées pour schéma de couleurs

Thème/système de design

Exporter variables CSS ou JSON pour projet

Style de composants

Extraire couleurs assorties pour boutons, tags, graphiques

Cohérence de marque

Extraire palette de couleurs standard des ressources de marque

Options de pipette et palette

Nombre de couleurs: 2-32, généralement 8/12; les photos/dégradés suggèrent 16-32
Boutons preset: 4/6/8/12/16/24/32 changement en un clic
Tri: par nombre d'échantillons quantifiés de haut en bas, les couleurs les plus courantes en premier
Nombre à côté de la couleur: nombre d'échantillons quantifiés dans l'image de palette sous-échantillonnée
Contrat d'export: les variables CSS utilisent :root avec des noms --color-1. JSON liste index/hex/css/rgb/count pour chaque couleur de palette.

Conseils d'utilisation

Commencer avec 8/12 pour voir effet global, puis augmenter à 16/24/32 si nécessaire
En utilisant dans un projet, renommer --color-1 en noms sémantiques (ex., --color-primary)
Garder la page au premier plan lors de l'extraction d'images larges pour éviter limitation du navigateur

Limitations et compatibilité

L'extraction de palette sous-échantillonne automatiquement pour les performances, les résultats sont des couleurs représentatives.
Précision: l'échantillonnage par clic utilise un Canvas affiché jusqu'à 2 048 px sur le côté le plus long; l'extraction de palette utilise un échantillon de 256 px.
HEIC/HEIF est une entrée seulement; le décodage local peut échouer, convertissez alors en PNG/JPEG si nécessaire.
Alpha: CSS peut sortir rgba(...). HEX/RVB n'inclut pas alpha. JSON conserve alpha via la valeur css.
Limite d'entrée: pas d'import d'URL, de collage, de pipette d'écran ni de flux d'extension de navigateur.
Limite de couleur: pas de conversion HSL/CMYK/Pantone/LAB/OKLCH, de vérification de contraste ni de matrice WCAG.
Limite d'export: pas d'export de nuanciers Tailwind/SCSS/ASE/Figma/Procreate.

Confidentialité & sécurité

La sélection des couleurs et l’extraction de palette s’effectuent dans le navigateur. L’image source reste dans la mémoire de la page tant que cet outil est ouvert. Le réglage du nombre de couleurs peut rester dans le stockage du navigateur ; si la synchronisation WebDAV est activée, ce réglage peut se synchroniser selon vos paramètres. La couleur choisie, la palette, le message d’erreur et les données de zoom / déplacement de l’aperçu sont un état de révision d’exécution et peuvent aussi se synchroniser via le WebDAV state schema tant qu’ils existent. Le fichier image n’est pas synchronisé par défaut ; il n’entre dans la synchronisation des pièces jointes WebDAV que si vous l’activez explicitement. Les exports de palette CSS/JSON sont générés au téléchargement et ne sont pas stockés comme résultats séparés. Sur un appareil partagé, effacez l’image, les couleurs choisies, la palette, les réglages enregistrés et les données du site si nécessaire.

FAQ

5

Poursuivez avec ces outils associés pour l’étape suivante.

Tout le traitement des outils s'effectue localement dans votre navigateur.