tfa52app
ColorPalette4Me
ColorPalette4Me
App #07/52

ColorPalette4Me

Une image, une palette, prête à coder

Présentation

ColorPalette4Me transforme n'importe quelle image en palette propre et directement exploitable dans ton code. Une image entre, ta palette sort — rampes complètes, contrastes vérifiés et exports prêts à coller. Le tout 100% dans ton navigateur : ton image ne quitte jamais ta machine.

Le problème

Tu as un visuel inspirant et tu veux en tirer une palette pour ton projet. Les extracteurs classiques te crachent 5 hex bruts — et après ? Il faut générer les nuances à la main, vérifier chaque contraste un par un, retaper tout ça dans ton tailwind.config. Du boulot répétitif entre l'inspiration et le code.

Ce que ça fait

Tu déposes une image (photo, screenshot, moodboard). L'app extrait les couleurs dominantes en local, génère une rampe complète 50→950 pour chacune, vérifie les contrastes WCAG, te montre le rendu live sur un mini-mockup d'UI, et te livre les fichiers prêts à coller dans ta stack.

Fonctionnalités

  • Extraction 100% client-side — l'image est lue en mémoire navigateur (Canvas API), rien n'est uploadé (argument privacy fort)
  • Regroupement perceptuel — quantification en espace OKLCH pour des couleurs cohérentes, de 3 à 10 couleurs réglables
  • Swatches multi-format — valeurs HEX / RGB / HSL / OKLCH, copie au clic, réordonnancement au glisser
  • Rampe complète 50→950 — calibrée façon palette Tailwind officielle pour chaque couleur de base
  • Contraste WCAG — badge AA / AAA avec ratio affiché sur chaque paire texte/fond
  • Aperçu live — un mini-mockup d'UI (bouton, carte, titre, texte, lien) qui applique ta palette en temps réel
  • Exports prêts à collertailwind.config.js, variables CSS :root, design tokens JSON (compatible Figma), fichier .ase Adobe

Pour qui

Devs front, designers, créateurs de SaaS et freelances qui partent d'une image ou d'un moodboard et veulent une palette directement branchable dans leur stack (Tailwind, CSS, Figma).

Stack

Laravel + Livewire pour la coquille, mais toute l'extraction et tous les exports sont 100% client-side (Canvas API + Alpine.js + lib couleur type culori pour l'OKLCH). Aucun upload serveur, aucun compte, zéro coût API.