Pourquoi extraire une palette depuis une image ?
Tout commence par une image qui vous inspire. Une photo, une illustration, une capture d'écran d'un site concurrent, un packaging que vous admirez. Vous voulez retrouver exactement ces couleurs pour les utiliser dans votre design. C'est là qu'intervient l'extraction de palette.
Extraire une palette de couleurs depuis une image consiste à identifier automatiquement les teintes dominantes d'une image et à les convertir en codes utilisables, HEX, RGB ou HSL, directement exploitables dans Figma, CSS, Tailwind ou tout autre outil de design et de développement.
Créer une identité de marque cohérente avec une photo d'inspiration, générer automatiquement un thème CSS depuis une image, analyser la palette d'un concurrent, ou simplement trouver les couleurs exactes d'un visuel que vous n'avez pas créé vous-même.
HEX, RGB, HSL : quelle différence ?
Avant d'extraire une palette, il faut comprendre les trois formats de couleur les plus courants :
Le format HEX
Le format hexadécimal est le plus utilisé en web design. Il s'écrit
#RRGGBB où chaque paire représente la composante rouge,
verte ou bleue en base 16. Par exemple, #E8622A est un
orange vif.
C'est le format à privilégier pour CSS, Figma et la plupart des
outils de design.
Le format RGB
rgb(232, 98, 42) exprime les trois composantes rouge,
vert, bleu sur une échelle de 0 à 255. Il est particulièrement utile
quand on travaille avec des valeurs d'opacité (rgba) ou
en traitement d'image programmatique.
Le format HSL
hsl(19, 79%, 54%), Teinte (0-360°), Saturation (0-100%),
Luminosité (0-100%). HSL est le format le plus
intuitif pour ajuster une couleur manuellement : si
vous voulez la même teinte mais plus claire, vous augmentez simplement
la luminosité.
Comment fonctionne l'extraction : les algorithmes
L'extraction de palette n'est pas magique : c'est un problème de quantification de couleurs. Une image peut contenir des millions de teintes différentes, l'objectif est de les regrouper en un petit nombre de couleurs représentatives.
L'algorithme k-means : le plus précis
C'est l'algorithme utilisé par HueBox et la plupart des extracteurs de qualité. Le principe est simple : on choisit k points de départ aléatoires dans l'espace colorimétrique, puis on regroupe chaque pixel autour du centre le plus proche. On recalcule les centres, on répète, et on converge vers les couleurs dominantes réelles.
Avantage : excellent résultat, précis. Inconvénient : plus lent sur les grandes images (compensé en sous-échantillonnant les pixels).
La méthode Median Cut
Cette méthode divise récursivement l'espace colorimétrique en boîtes de même nombre de pixels, puis prend le centre de chaque boîte. Plus rapide que k-means, légèrement moins précise sur les images complexes.
La méthode Octree
Basée sur une structure arborescente qui subdivise l'espace RGB en octants. Très rapide et peu gourmande en mémoire, souvent utilisée pour la réduction de couleurs dans les GIF.
Extraire une palette avec HueBox, sans upload
HueBox est un extracteur de palette en ligne entièrement gratuit, qui fonctionne 100% dans votre navigateur grâce à l'API Canvas HTML5. Votre image n'est jamais envoyée sur un serveur, elle est analysée localement sur votre machine.
Comment utiliser HueBox
- Glissez votre image directement dans la zone de dépôt, ou cliquez pour la sélectionner. Formats acceptés : JPG, PNG, WEBP, GIF, SVG jusqu'à 20 Mo.
- Choisissez le nombre de couleurs souhaité (2 à 20) et le niveau de qualité d'analyse.
- Cliquez sur "Extraire la palette", l'algorithme k-means analyse les pixels en quelques secondes.
- Copiez vos couleurs en HEX, RGB, HSL, CSS variables, JSON ou format Tailwind, un clic suffit.
Extraire une palette en JavaScript : le code
Si vous souhaitez intégrer l'extraction de palette dans votre propre application web, voici le cœur de l'algorithme en JavaScript vanilla :
// Dessiner l'image sur un canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
// Récupérer les données pixels
const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
// Échantillonner (1 pixel sur 8 pour la rapidité)
const pixels = [];
for (let i = 0; i < data.length; i += 4 * 8) {
if (data[i + 3] < 128) continue; // ignorer le transparent
pixels.push([data[i], data[i+1], data[i+2]]);
}
// k-means sur l'espace RGB
// → voir implémentation complète sur huebox.frL'astuce clé est le sous-échantillonnage : analyser 1 pixel sur 8 (ou plus) permet de réduire drastiquement le temps de calcul sans affecter significativement la précision du résultat.
Cas d'usage : pour quoi utiliser une palette extraite ?
1. Branding et identité visuelle
Une photo de vos produits, un paysage qui symbolise votre marque, une image d'ambiance, extraire sa palette vous donne des codes couleur réels, cohérents avec votre univers visuel, à utiliser dans votre logo, votre site web et vos supports de communication.
2. Intégration CSS automatique
HueBox génère directement des CSS variables prêtes à coller dans votre feuille de style :
:root {
--color-1: #2D4A6B;
--color-2: #E8622A;
--color-3: #F2EAD8;
--color-4: #8B6F5E;
--color-5: #1A2832;
--color-6: #C4A882;
}3. Design d'interface cohérent
Partir d'une image hero pour générer tout le système de couleurs d'une interface : arrière-plans, textes, boutons, garantit une cohérence visuelle immédiate. Particulièrement utile pour les pages de lancement produit ou les landing pages événementielles.
4. Analyse concurrentielle
Faites une capture d'écran du site d'un concurrent et extrayez sa palette. Vous comprendrez immédiatement ses choix colorimétiques et pourrez vous différencier consciemment.
5. Génération de thèmes Tailwind
HueBox exporte directement un
objet de configuration Tailwind CSS, utilisable
directement dans votre tailwind.config.js pour créer des
utilitaires personnalisés cohérents avec vos couleurs d'image.
Questions fréquentes
Mes images sont-elles envoyées sur un serveur lors de l'extraction ?
Avec HueBox, non. L'analyse se fait entièrement dans le navigateur via l'API Canvas HTML5. Votre image n'est jamais transmise, stockée ou analysée sur un serveur distant. C'est une garantie de confidentialité totale, particulièrement importante si vous travaillez sur des visuels de marque confidentiels.
Combien de couleurs dois-je extraire ?
Pour la plupart des usages design, 5 à 8 couleurs est le sweet spot. En dessous, vous perdez de la nuance. Au-dessus, les couleurs extraites deviennent trop proches pour être réellement distinctes dans un système de design. Pour un système de couleurs complet (avec les variantes light/dark), 5 couleurs de base suffisent généralement.
Pourquoi les couleurs extraites semblent-elles différentes de l'original ?
L'algorithme k-means calcule le centre mathématique d'un cluster de pixels, ce n'est pas nécessairement une couleur visible dans l'image, mais la couleur représentative de tout un groupe de teintes proches. C'est voulu : une couleur légèrement "moyennée" est souvent plus utile en design qu'une couleur exacte prélevée sur un seul pixel.