Extracteur de palette d'image & nuancier

Extracteur de palette d'image & nuancier

Extrayez instantanément les palettes de couleurs de vos images. Générez des nuanciers dominants en HEX, RGB et HSL, exportez vos tokens CSS ou Tailwind et testez le contraste d'accessibilité WCAG.

Charger un exemple
Paramètres & Entrées

Déposez une image ici ou

Formats PNG, JPG, WebP ou AVIF acceptés (traitement 100 % local)

6
361216
14
01430
2.0x
1.0x2.0x3.5x
Résolution analysée:
Pipeline d'extraction colorimétrique1. Importer l'image46,080 px2. Analyser les pixelsCIEDE20003. Clustériser les teintes12 boxes • k=64. Exporter les tokens6 Swatches • ΔE=14
Résolution de l'image: 256×180px
Pixels échantillonnés: 46,080|Confidentialité 100 % côté client
42.5%
21%
16.5%
10.2%
#0D0E1542.5%
Base Canvas
#00F0FF21%
Primary Accent
#FF007F16.5%
Secondary Accent
#7928CA10.2%
Muted Surface
#FEE75C5.8%
Highlight Glow
#1F23384%
Card Border
Échelle de teintes et nuances#00F0FF
50#EEFBFB
100#D8F6F8
200#A8EEF3
300#74EBF3
400#3CEBF7
500#00F0FF
600#00BBC9
700#008993
800#00565C
900#002426
Rôle sémantique: #00F0FF|Primary Accent
Contraste maximal: 15.4:1|Saturation dominante: 70%
Métrique principale46,080
Efficacité / Capacité70%
Rendu final15.4:1
Couleurs extraites6 / 6
Écart ΔE (Delta E)14
Résolution de l'image256×180px

Traitement côté client

Calcul haute performance exécuté intégralement dans la mémoire du navigateur.

Zéro transfert serveur

Toutes les données restent strictement locales, sans aucune communication avec un serveur externe.

Export prêt pour la production

Formats de sortie clairs et optimisés, prêts pour un déploiement immédiat.

ToolsAA•Utilitaires web 100% privés côté client
Référence technique et guide d'architecture

Extracteur de Palette Image & Nuancier — Guide de référence

Extrayez instantanément des palettes de couleurs depuis vos images. Générez des échantillons dominants en hexadécimal, RGB et HSL, exportez vos jetons CSS ou Tailwind et testez le contraste d'accessibilité WCAG.

Extracteur de Palette Image & Nuancier — Guide de référence — Architecture en mémoire côté client et flux de données
Extracteur de Palette Image & Nuancier — Guide de référence — Architecture en mémoire côté client et flux de données

Paramètres clés et contrôles

Nombre d'échantillons dominants (Taille de cluster k)Échelle de palette (3 à 16 nuances)

Quantité cible de centroïdes de couleur distincts extraits de l'image. Pour des espaces de vie harmonieux, des albums photo de famille et des systèmes de design numérique, 5 à 7 couleurs établissent l'équilibre esthétique idéal entre l'arrière-plan du canevas, les surfaces des cartes, la teinte focale principale, les accents secondaires éclatants et les éléments textuels à fort contraste.

Par défaut : 6
Algorithme de quantification des couleurs (Moteur d'extraction)Modèle de partitionnement (Median Cut | K-Means | Saturation Boost)

Méthodologie mathématique de regroupement employée pour isoler les teintes : la coupure médiane modifiée (Modified Median Cut) subdivise récursivement les boîtes englobantes RGB pour capturer les nuances d'accentuation vives ; l'algorithme K-Means regroupe les pixels selon le centroïde euclidien le plus proche dans l'espace CIELAB pour refléter la véritable prévalence statistique ; l'amplification de saturation (Saturation Boost) pondère de manière exponentielle les pixels saturés (S^1,5) afin d'éviter que les arrière-plans neutres n'étouffent les couleurs éclatantes du sujet.

Par défaut : Median Cut
Seuil de différence de couleur perceptible (Delta-E ΔE*ab)Métrique de distance CIELAB (4,0 à 30,0 ΔE)

Distance colorimétrique minimale requise entre les échantillons extraits dans l'espace colorimétrique uniforme CIELAB. En dessous de 2,0, les écarts sont quasiment imperceptibles pour l'œil humain ; entre 5,0 et 12,0, ils définissent des teintes distinctes et harmonieuses ; au-delà de 15,0, ils éliminent toute redondance visuelle pour garantir une palette claire et contrastée.

Par défaut : 12.0
Résolution d'analyse par sous-échantillonnageGrille d'échantillonnage (128px à 512px)

Dimension maximale normalisée de la zone de calcul employée pour l'analyse des pixels. Le sous-échantillonnage à 256 px permet de scruter 65 536 pixels échantillons en moins de 16 millisecondes sans ralentir l'appareil ni vider la batterie, tout en préservant fidèlement la distribution chromatique et la balance tonale des clichés haute résolution.

Par défaut : 256px
Seuil de découpe de transparence alphaSeuil de canal alpha (0 à 255 niveaux)

Limite d'opacité en deçà de laquelle les pixels semi-transparents sont ignorés ou fusionnés sur un fond neutre. Définir un seuil alpha à 128 (opacité de 50 %) empêche les contours flous des PNG transparents, les filigranes et les ombres portées de polluer votre palette avec des noirs parasites (#000000) ou des nuances de gris boueux.

Par défaut : 128

Conseils de pro et bonnes pratiques

Le regroupement perceptuel CIELAB surpasse le modèle RGB

Les formules de distance euclidienne standard en RGB (sqrt(ΔR² + ΔG² + ΔB²)) ne reflètent pas la biologie visuelle humaine, car les cônes de la rétine sont nettement plus sensibles aux variations de longueur d'onde du vert (555 nm) qu'à celles du bleu ou du rouge. Effectuer le partitionnement dans un espace perceptuellement uniforme comme CIELAB ou OKLAB supprime les artefacts marronnasses et reproduit fidèlement la vivacité des couleurs perçue par l'œil humain en photographie.

Évitez la décoloration des neutres grâce à la pondération de saturation

Dans la photographie de paysage, d'extérieur ou de scènes de vie, 60 % à 80 % des pixels correspondent généralement au ciel désaturé, à l'asphalte, aux ombres de feuillage ou aux murs d'une pièce. Un simple comptage de fréquence génère souvent une palette terne de cinq gris presque identiques. L'application d'une pondération non linéaire de la saturation (en multipliant le poids du pixel par S^1,5) garantit que les sujets focaux éclatants — comme la veste d'un coureur ou la composition florale chaleureuse d'une table familiale — soient mis en valeur aux côtés des teintes dominantes d'arrière-plan.

Appliquez la règle de luminance relative de 0,18 pour le contraste WCAG

Ne placez jamais de texte blanc pur (#FFFFFF) sur des teintes moyennes sans mesurer préalablement leur luminance relative. Selon les critères WCAG 2.1, un texte de labeur standard accessible exige un ratio de contraste minimal de 4,5:1, tandis qu'un titre en gras ou supérieur à 18 pt requiert 3,0:1. Si un échantillon extrait possède une luminance relative (L) supérieure à 0,18, le texte blanc pur échoue instantanément aux tests d'accessibilité ; associez-le plutôt à un texte ardoise profond (#0F172A) afin d'éviter toute fatigue oculaire.

Éliminez les halos noirs des PNG transparents via le masque alpha

Lors du traitement d'images PNG transparentes, les moteurs de rendu interprètent les pixels totalement transparents comme RGBA(0, 0, 0, 0). Sans masque de coupure alpha explicite, une icône aux larges zones transparentes produira à tort un noir absolu (#000000) comme couleur dominante. Appliquer un seuil alpha de 128 ou composer l'image sur un fond blanc pur élimine définitivement les halos sombres sur les bordures.

Adoptez la règle d'harmonie 60-30-10 en design d'intérieur et UI

Pour transposer une palette extraite d'une photo dans la décoration d'un intérieur, des diapositives de présentation ou une interface web, allouez environ 60 % de l'espace visuel à une teinte neutre dominante apaisante, 30 % à une nuance structurelle secondaire d'accompagnement, et 10 % à votre couleur d'accentuation la plus vive. Cette répartition proportionnelle intemporelle fait écho aux équilibres des paysages naturels et prévient toute surcharge sensorielle visuelle.

Pièges courants et dépannage

⚠️Les couleurs extraites paraissent trop similaires ou forment des doublons de gris foncé

Augmentez le seuil de tolérance perceptuelle Delta-E à 15,0 ou 18,0 et passez le moteur d'extraction de K-Means à Modified Median Cut. Cela contraint l'algorithme à fusionner les tons voisins indiscernables et à parcourir un spectre chromatique plus étendu, garantissant une diversité équilibrée entre nuances claires et sombres.

⚠️Le navigateur affiche une SecurityError ou un avertissement de canevas corrompu (tainted canvas) avec une URL

Les navigateurs appliquent des règles de sécurité multi-origines (CORS) strictes qui bloquent l'extraction des données lorsque l'image provient d'un serveur tiers sans en-têtes d'accès autorisés. Pour y remédier, enregistrez l'image sur votre disque et importez-la via le sélecteur de fichier, glissez-déposez-la directement dans l'outil, ou collez-la depuis le presse-papiers (Ctrl+V / Cmd+V) pour une analyse 100 % locale côté client.

⚠️Ralentissements temporaires du navigateur avec des photos de smartphone 48 Mpx ou des fichiers RAW

Les photographies en très haute définition comportent plus de 40 millions de pixels individuels. Bien que l'extracteur réduise automatiquement l'échantillon à une grille optimisée de 256 px, le décodage initial de gros fichiers sur mobile peut générer une courte latence. Vérifiez que l'accélération matérielle est activée dans les paramètres de votre navigateur, ou redimensionnez l'image à une taille standard avant l'importation.

⚠️Les échantillons hexadécimaux semblent légèrement désaturés par rapport à la photo originale sur écran moderne

Les iPhone, iPad récents et moniteurs professionnels restituent les photos dans l'espace colorimétrique étendu Display P3, tandis que les codes hexadécimaux web utilisent traditionnellement l'espace sRGB. Pour restituer les verts néon éclatants, les pourpres intenses ou les couchers de soleil flamboyants, activez le mode P3 dans les réglages ou exportez vos valeurs au format CSS color(display-p3 r g b) afin de respecter la saturation native de votre écran.

Foire aux questions (FAQ)

Comment extraire la palette de couleurs d'une image en programmation ?▼

Pour extraire une palette en programmation, dessinez l'image sur un élément canvas HTML, récupérez les données brutes RGBA des pixels via getImageData(), établissez un histogramme de fréquence colorimétrique et regroupez les coordonnées adjacentes à l'aide d'algorithmes tels que Modified Median Cut ou K-Means dans l'espace CIELAB. Pour les designers et créateurs, notre outil côté client exécute l'intégralité de ce pipeline mathématique dans le navigateur en moins de 16 millisecondes, sans jamais téléverser vos photos personnelles sur des serveurs externes.

Quel est le meilleur algorithme pour extraire les couleurs dominantes d'une image ?▼

L'algorithme Modified Median Cut (MMC) constitue la référence absolue pour concevoir des palettes équilibrées et diversifiées, car il subdivise itérativement les volumes colorimétriques selon leur axe chromatique le plus large, évitant ainsi que les détails d'accentuation soient étouffés par de vastes arrière-plans. Si l'objectif recherché est la stricte fréquence mathématique et la représentativité statistique, l'algorithme de partitionnement K-Means avec 5 à 8 centroïdes offre la plus haute fidélité photographique.

Quelle est la différence entre le partitionnement RGB et l'extraction CIELAB Delta-E ?▼

La différence fondamentale réside dans le fait que le modèle RGB mesure l'émission lumineuse des écrans sur une grille non uniforme, tandis que l'espace CIELAB Delta-E (ΔE) modélise la perception visuelle humaine de manière uniforme. En RGB standard, un décalage de 10 points dans le vert paraît beaucoup plus marqué pour l'œil humain qu'un décalage identique dans le bleu, générant souvent des teintes boueuses ou redondantes ; CIELAB compense la réponse des photorécepteurs rétiniens pour que des distances mathématiques égales correspondent à des différences perçues égales.

Comment s'assurer qu'une palette extraite d'une image respecte les normes WCAG ?▼

Pour garantir la conformité d'une palette aux recommandations WCAG 2.1, calculez la luminance relative (L) de chaque nuance via la formule L = 0,2126*R_lin + 0,7152*G_lin + 0,0722*B_lin, puis évaluez le contraste face aux surfaces d'arrière-plan avec (L_clair + 0,05) / (L_sombre + 0,05). Les éléments de texte doivent afficher un ratio minimal de 4,5:1 pour le corps de texte standard et de 3,0:1 pour les titres gras ou d'au moins 18 pt (ou 7,0:1 pour le niveau AAA d'excellence). Si une nuance s'avère insuffisante, ajustez sa luminosité ou basculez la typographie entre l'ardoise foncé (#0F172A) et le blanc immaculé (#FFFFFF).

Combien de couleurs doit contenir une palette équilibrée ?▼

Une palette de couleurs équilibrée se compose idéalement de 5 à 6 teintes : une teinte de base dominante (couvrant 60 % de la composition), une ou deux nuances secondaires de soutien pour les surfaces (30 %), une couleur d'accentuation dynamique (10 %), complétées par deux tons neutres à fort contraste pour les textes (un clair, un foncé). Respecter cette règle d'or 60-30-10, éprouvée en architecture d'intérieur et en graphisme, garantit une harmonie visuelle apaisante et évite tout encombrement chromatique chaotique.

Outils et utilitaires connexes

Tous les outils →
Calculateur Nombre d'Or & Rectangle d'OrDesign

Calculez instantanément les dimensions du nombre d'or et les proportions du rectangle d'or. Divisez les longueurs par phi (1,618), adaptez la typographie et générez des grilles réactives.

Ouvrir l'outil→
Générateur Neumorphisme CSS & Soft UIDesign

Générez des ombres portées CSS en neumorphisme et soft UI avec surfaces extrudées, en creux, plates ou concaves. Copiez instantanément du code CSS, Tailwind, SCSS ou SVG.

Ouvrir l'outil→
Générateur de Palette & HarmoniesDesign

Générez instantanément des harmonies de couleurs équilibrées. Créez des palettes complémentaires, analogues ou triadiques avec audit de contraste WCAG et export CSS.

Ouvrir l'outil→
Générateur Glassmorphism & Verre DépoliDesign

Générez du code CSS moderne de glassmorphism et verre dépoli avec réglages en direct du flou backdrop-filter, opacité, bordure et ombres. Copiez instantanément du code HTML et CSS propre.

Ouvrir l'outil→
Compresseur d'Image & Réducteur PhotoDesign

Compressez vos images en ligne sans perte de qualité. Réduisez la taille des fichiers JPG, PNG et WebP dans le navigateur sans téléversement, avec solveur de Ko cible et export ZIP groupé.

Ouvrir l'outil→
Générateur Interactif de Dégradés CSS Linéaires et RadiauxDesign

Tous les calculs et conversions sont exécutés exclusivement dans la mémoire de votre navigateur sans aucun transfert.

Ouvrir l'outil→