TAYF est un générateur de palettes de couleurs interactif et mobile-first. Choisissez une couleur de base, explorez 5 harmonies chromatiques, ajustez HSL en temps réel, visualisez le rendu WCAG, extrayez des couleurs depuis une image, et exportez en CSS/Tailwind/JSON.
→ tayf.app
| Fonctionnalité | Description |
|---|---|
| 🎨 Couleur de base | Saisie hex/rgb/hsl + native color picker + aléatoire |
| 🎚️ Sliders HSL | Hue, Saturation, Lightness en temps réel |
| 🔄 5 Harmonies | Analogique, Complémentaire, Triadique, Monochrome, Split |
| 👁️ Live Preview | Mockup UI avec vérification WCAG AA/AAA |
| 📸 Extraction image | Upload + quantification 8×8×8 (Web Worker) |
| 💾 Favoris locaux | Sauvegarde des palettes dans localStorage |
| 🔗 Partage par URL | Lien partagé avec restauration automatique |
| 📥 Export | CSS, Tailwind, JSON (Full Palette) |
| 🎯 Simulation daltonisme | Protanopie, Deutéranopie, Tritanopie |
| 🌗 Thème dark/light | Avec sync PWA theme-color |
| 📱 Mobile-first | Bottom nav, swipe gestures, snap scrolling |
| ⚡ PWA | Installable, offline, splash screen, manifest |
| Technologie | Usage |
|---|---|
| React 19 | UI |
| TypeScript | Typage |
| Vite | Build & dev server |
| TanStack Router | Routage |
| TanStack Start | SSR framework |
| Tailwind CSS v4 | Styles |
| shadcn/ui | Composants UI |
| Supabase | Auth (prêt à l'emploi) |
| Cloudflare Workers | Déploiement |
# Cloner le dépôt
git clone https://github.com/votre-username/tayf.git
cd tayf
# Installer les dépendances
npm install
# Lancer le serveur de développement
npm run dev
# → http://localhost:5173Créez un fichier .env à la racine pour activer Supabase :
VITE_SUPABASE_URL=votre_url_supabase
VITE_SUPABASE_PUBLISHABLE_KEY=votre_cle_publique# Build de production
npm run build
# Preview du build
npm run previewLe projet est conçu pour être déployé sur Cloudflare Workers via wrangler :
npx wrangler deploytayf/
├── public/ # Assets statiques (PWA)
│ ├── manifest.json # Manifest PWA
│ ├── sw.js # Service Worker
│ ├── offline.html # Page offline
│ └── icons/ # Icônes PWA (SVG)
├── src/
│ ├── routes/
│ │ ├── __root.tsx # Layout racine + meta PWA
│ │ └── index.tsx # Page principale
│ ├── components/
│ │ ├── ui/ # shadcn/ui components
│ │ ├── PaletteDisplay.tsx # Affichage palette
│ │ ├── SchemeSelector.tsx # Sélecteur d'harmonie
│ │ ├── ColorInput.tsx # Input couleur
│ │ ├── HslSliders.tsx # Sliders HSL
│ │ ├── PreviewMockup.tsx # Aperçu live
│ │ ├── ExportPanel.tsx # Export (paywall)
│ │ ├── ImageExtractor.tsx # Extraction image
│ │ ├── ShareButton.tsx # Partage URL
│ │ ├── SaveButton.tsx # Cœur favoris
│ │ ├── SavedPalettes.tsx # Palettes sauvegardées
│ │ ├── TrendingPalettes.tsx
│ │ ├── HeaderMenu.tsx # Menu hamburger
│ │ ├── BottomNav.tsx # Nav mobile
│ │ ├── SettingsDialog.tsx # Réglages
│ │ ├── UpgradeDialog.tsx # Full Palette
│ │ └── OnboardingDialog.tsx # Premier lancement
│ ├── hooks/
│ │ ├── use-favorites.ts # CRUD localStorage
│ │ ├── use-swipe.ts # Gestes swipe
│ │ ├── use-mobile.ts # Détection mobile
│ │ └── use-register-sw.ts # Service Worker
│ ├── lib/
│ │ ├── color-utils.ts # Conversion couleurs
│ │ ├── palette-url.ts # Partage URL
│ │ ├── extract-colors.ts # Extraction image
│ │ ├── extract-colors.worker.ts # Web Worker
│ │ └── settings-context.tsx
│ ├── integrations/supabase/ # Supabase (optionnel)
│ └── styles.css # Styles globaux
├── wrangler.jsonc # Config Cloudflare
├── .gitignore
└── package.json
TAYF est une Progressive Web App complète :
- Installable sur l'écran d'accueil (manifest + icônes maskable)
- Offline : service worker avec stratégie stale-while-revalidate
- Page offline : fallback élégant quand le réseau est absent
- Theme-color dynamique (dark →
#0D1117, light →#F5F5FA) - Safe-area insets pour iOS notch & home indicator
- Snap scrolling et swipe gestures sur mobile
MIT