CrateX.app

Pipette et Palette d'Image

Cliquez pour sélectionner des couleurs de l'image, extrayez automatiquement les couleurs dominantes et la palette, copiez HEX/RGB et exportez des variables CSS. Supporte PNG, JPG/JPEG, WebP, AVIF, HEIC/HEIF.

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

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

🚀 Démarrage rapide

Importer image: Glisser-déposer ou cliquer pour sélectionner
Changer de panneau: Bureau affiche panneau latéral; Mobile toucher bouton du bas
Cliquer pour sélectionner: Cliquez n'importe où sur l'image pour obtenir la couleur du pixel
Copier couleur: Après sélection copiez format HEX/RGB/CSS
Définir nombre de couleurs: Glissez le curseur ou cliquez preset (4/6/8/12/16/24/32)
Extraire palette: Cliquez sur le bouton extraire pour obtenir liste des couleurs dominantes
Exporter CSS: Après extraction exportez fichier de variables CSS
Exporter JSON: Après extraction exportez fichier de données JSON
Réinitialiser: Effacer image actuelle et résultats

📌 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, couramment 8/12; photos/dégradés suggèrent 16–32
Boutons preset: 4/6/8/12/16/24/32 changement en un clic
Tri: Par pourcentage de haut en bas, couleurs les plus courantes en premier
Nombre à côté de la couleur: Affiche pourcentage de pixels dans l'image

🧭 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é

Limite fichier unique 128MB, images très grandes peuvent causer ralentissement
Extraction de palette fait downsampling automatique pour performance, résultats sont couleurs représentatives
Décodage HEIC/HEIF dépend du support navigateur, convertir en JPG/PNG si échec
Pixels transparents sont ignorés ou traités comme RGBA réel

🔒 Confidentialité & sécurité

Tout traitement effectué dans le navigateur; données ne quittent jamais votre appareil

❓ FAQ

Comment utiliser le fichier CSS exporté?

Mettre le :root { --color-1: ... } exporté dans CSS global, puis référencer avec var(--color-1).

À quoi sert le JSON exporté?

Pour réutilisation scripts/système de design, ex., générer Design Tokens ou config thème. Chaque couleur inclut hex/css/rgb et count.

Quel nombre de couleurs est recommandé?

UI général: 8 ou 12; icônes minimalistes: 4–6; photos/dégradés: 16–32. Utiliser presets pour comparer rapidement.

Pourquoi les couleurs cliquées et palette sont différentes?

Sélection par clic obtient pixel unique; palette quantifie image entière pour couleurs représentatives accentuant tendance globale.

Pourquoi le bouton exporter est grisé?

Besoin de cliquer d'abord sur 'Extraire Palette', export disponible après extraction complète.

Comment le nom de fichier exporté est-il généré?

Par défaut utilise nom fichier original (sans extension) + .palette-nombre + .css/.json, avec caractères illégaux nettoyés automatiquement.