Extracteur de palette
couleur.
Glissez une image, extrayez automatiquement les couleurs dominantes. Copiez la palette en CSS ou JSON. 100% dans votre navigateur.
Pourquoi extraire une palette de couleurs ?
Charte graphique coherente
Extraire les couleurs dominantes d'une image de reference vous permet de construire une charte graphique harmonieuse et fidele a l'identite visuelle souhaitee. Ideal pour le branding et le web design.
Gain de temps
Plus besoin de deviner les couleurs a la pipette. L'algorithme K-means identifie automatiquement les couleurs dominantes et les trie par importance. Copiez directement en CSS ou JSON.
Securite et confidentialite
Votre image ne quitte jamais votre navigateur. L'extraction se fait integralement cote client via Canvas API. Aucune donnee n'est transmise, stockee ou journalisee.
Déposez une image et obtenez instantanément sa palette de couleurs dominantes. Chaque couleur est présentée en trois formats — HEX, RGB et HSL — copiables en un clic. L’export CSS génère directement les variables custom properties prêtes à intégrer dans votre feuille de style. La totalité du traitement se fait dans votre navigateur via l’API Canvas : votre image ne quitte jamais votre appareil.
Comment fonctionne l’extraction des couleurs dominantes
L’extraction repose sur l’algorithme de quantification des couleurs appliqué aux données pixels brutes obtenues via canvas.getContext(‘2d’).getImageData(). L’image est d’abord redimensionnée pour accélérer le traitement, puis les pixels sont regroupés par proximité colorimétrique (clustering). Les couleurs quasi-identiques sont fusionnées pour ne retenir que les teintes réellement distinctes et représentatives de l’image. Le résultat est trié par fréquence d’apparition — la couleur la plus dominante apparaît en premier.
HEX, RGB, HSL : quel format utiliser selon votre contexte
Le format HEX (#RRGGBB) est le standard du web : utilisé dans les CSS, les outils de design (Figma, Adobe, Sketch) et la grande majorité des interfaces développeur. Le format RGB (rgb(R, G, B)) est utile pour les manipulations dynamiques en JavaScript, les dégradés CSS et les contextes où la transparence (RGBA) sera ajoutée. Le format HSL (hsl(H, S%, L%)) est particulièrement adapté pour créer des déclinaisons de couleurs : ajustez la luminosité (L) pour obtenir des variantes claires et sombres sans changer la teinte.
Export CSS : intégrer directement dans votre code
L’export CSS génère des custom properties (variables CSS) nommées automatiquement (–color-1, –color-2…) que vous pouvez coller directement dans votre :root {}. Ce format est compatible avec tous les navigateurs modernes et s’intègre immédiatement dans un projet existant sans modification de la structure. Vous pouvez renommer les variables après export selon votre convention de nommage.
Cas d’usage : branding, intégration web, direction artistique
Cas d’usage courants : extraire la palette d’un logo client avant de créer ses supports de communication, identifier les couleurs dominantes d’une photo pour construire une charte graphique cohérente, récupérer les codes exacts d’une maquette dont vous n’avez pas accès au fichier source, construire un thème de couleurs à partir d’une image d’inspiration pour un site ou une présentation.
Questions fréquentes sur l’extraction de palette
FAQ
Questions fréquentes sur l'extraction de palette
L'outil extrait les 6 couleurs les plus dominantes par défaut. Ce nombre est calibré pour couvrir la quasi-totalité des palettes de branding et de design (une palette professionnelle comporte rarement plus de 5 à 6 couleurs distinctes) tout en restant lisible. Les couleurs très proches sont fusionnées pour éviter les doublons perceptuellement identiques.
PNG, JPG, WebP et GIF (première frame). La limite est fixée à 10 Mo. Pour des résultats optimaux, utilisez une image de résolution suffisante (minimum 200×200px) — une image trop petite ou très compressée peut produire des couleurs altérées par les artefacts de compression.
Non. L'extraction est réalisée intégralement dans votre navigateur via l'API Canvas. Aucun pixel de votre image ne transite par nos serveurs. C'est particulièrement important si l'image contient des éléments propriétaires, confidentiels ou soumis à des droits.
L'extraction travaille sur les pixels rasterisés de l'image, pas sur les objets vectoriels d'origine. Les dégradés, ombres et effets de transparence sont moyennés dans les pixels. Pour récupérer les couleurs exactes d'un fichier Figma ou Illustrator, utilisez les outils d'inspection natifs de ces logiciels. Cet outil est conçu pour extraire des couleurs à partir d'images bitmap finales.
Oui, avec une vérification préalable du contraste si ces couleurs seront utilisées pour du texte. Les codes HEX et RGB extraits sont les valeurs exactes présentes dans l'image. Pour les logos ou documents dont vous n'avez pas le fichier source, cette méthode est souvent la plus rapide pour récupérer les valeurs précises.
Les extractions de palette sont effectuees integralement dans votre navigateur. Aucun fichier n'est transmis ni conserve par Osmova. Osmova ne peut etre tenu responsable du contenu des fichiers traites ni de l'usage qui en est fait. Conditions d'utilisation