Outils associés
Pourquoi utiliser un générateur de palettes ?
Une palette partagée assure la cohérence visuelle, accélère la transmission aux développeurs et évite des hex arbitraires.
Avantages
- Cohérence : Mêmes accents sur interfaces et supports.
- Marque : Échantillonnez photos et planches d’ambiance.
- Rapidité : Comparez les nuances sans pipette partout.
- Thèmes : Passez d’une image à des variables clair/foncé.
- Inspiration : La photo suggère des teintes inattendues.
Fonctionnement de l’extraction
Les pixels sont lus, les couleurs proches regroupées, puis les tons les plus représentatifs sont classés selon l’algorithme.
Déroulement type
- Charger : Image nette pour des tons fiables.
- Échantillonner : Les zones trop transparentes sont ignorées.
- Quantifier : Fusion de RVB proches en échantillons réduits.
- Classer : Par fréquence ou centroïdes.
- Livrer : Copie ou export prêt pour le code.
À savoir
Limiter le nombre de couleurs et valider l’accessibilité limite les retours en arrière.
Repères
- Beaucoup d’interfaces utilisent 3 à 10 couleurs principales.
- La fréquence favorise les grandes surfaces de l’image.
- K-means suit mieux certains dégradés.
- CSS et JSON s’intègrent aux design tokens.
- Les gros fichiers demandent plus de pixels à parcourir.
Bonnes pratiques
Utilisez le résultat comme base et affinez avec la charte et le contraste.
- Références propres, peu compressées.
- Plus de couleurs si la scène est chargée.
- Documentez exports et noms de tokens.
- Testez texte réel sur fonds réels.
- Complétez avec la théorie des couleurs.
Cas d’usage
- Web : Pages à partir de photos client.
- Marque : Couleurs issues de campagnes ou packagings.
- Espaces : Inspiration peinture et matériaux.
- Mode : Planches saisonnières.
- Art : Étudier la répartition des teintes.
Questions fréquentes
Comment extraire des couleurs d’une image ?
Importez ou collez l’image, choisissez algorithme et nombre de couleurs, puis lancez l’extraction. Chaque nuancier affiche hex et RVB ; copiez ou exportez.
Quels algorithmes sont disponibles ?
Trois modes : par fréquence (rapide), K-means (efficace sur dégradés) et median cut (polyvalent).
Puis-je exporter ?
Oui : variables CSS, SCSS ou JSON ; aussi copie hex unitaire ou totale.
Est-ce gratuit et privé ?
Oui. Sans compte. Traitement local, pas d’envoi d’image sur nos serveurs.
À quoi sert le vérificateur de contraste ?
Il estime les ratios entre couleurs de la palette et indique des repères WCAG AA et AAA pour les paires texte/fond.