100% dans ton navigateur · rien n'est uploadé

Une image entre,
ta palette sort.

Dépose un visuel, récupère une palette propre : rampe 50→950, contrastes WCAG, design system live et exports prêts à coller dans ton code.

ou clique pour choisir — PNG, JPG ou WEBP · max 8 MB

Lecture en mémoire navigateur — ton image ne quitte jamais ta machine.
Nombre de couleurs Quantification perceptuelle (OKLCH) · ajustable ensuite

Après l'upload, choisis ton style : Dominantes, Équilibré ou Vibrant.

De l'inspiration au code, sans copier-coller à la main

Couleurs dominantes

Median Cut + clustering OKLCH, de 3 à 10 couleurs.

Rampe 50→950

Onze nuances par couleur, calibrées façon Tailwind.

Contraste WCAG

Badge AA / AAA et ratio sur chaque paire texte/fond.

Exports prêts

Tailwind, CSS, SCSS, Bootstrap, tokens JSON, .ase.

Choisis ton style — 3 façons de lire la même image
Verrouille pour figer ⠿ Glisse pour réordonner Pipette pour piocher
couleurs · espace OKLCH
Image source survole un point · pipette pour piocher
Image source de la palette

Survole pour zoomer, clique pour ajouter la couleur à ta palette.

Harmonie aperçu fondu de la palette
Valeurs par couleur · copie au clic
Rampe complète 50 → 950 calibrée façon Tailwind · 11 nuances par couleur
Design system live ta palette appliquée pour de vrai
P Acme Studio v2.0

Lance ton produit en beauté

Voici à quoi ressemble ta palette une fois posée sur une vraie interface — titres, corps, un lien, boutons, formulaires et alertes.

Plan Pro

Tout l'illimité, exports inclus, support prioritaire.

Disponible
Quota72%
Notifs

Astuce : verrouille une couleur puis appuie sur espace pour régénérer le reste.

Primary Secondary Accent Support
Contraste WCAG ratio + niveau
Exports prêts à coller généré côté client · zéro upload
Visuels & partage
Charte prête pour tes outils
  • Figma — tokens.json via le plugin Tokens Studio (vraies variables), ou glisse palette.svg dans le fichier.
  • Adobe (Illustrator / Photoshop / InDesign) — ouvre palette.ase.
  • Canva — pas d'import auto : ajoute les couleurs au Brand Kit en collant les HEX (bouton ci-dessus).
  • Code — Tailwind, CSS, SCSS ou Bootstrap selon ta stack.
Continuer avec une IA

Envoie ta charte (rôles, hex, rampes + consignes d'accessibilité) directement à un assistant pour générer ton thème ou tes composants.


        

    




        
        

            
            
Généré par ColorPalette4Me — Projet #07/52 · Sprint Factory