Générez des palettes de couleurs harmonieuses et accessibles WCAG pour vos projets web et design. Choisissez entre 5 modes (aléatoire, complémentaire, analogique, triadique, monochromatique) et exportez en JSON, CSS ou Tailwind.
Générateur de Palettes Couleurs
| Couleur | HEX | RGB | HSL | Contraste (AA) |
|---|
Pour qui / Utilité
Le générateur de palettes couleurs est conçu pour les designers, développeurs web et créatifs qui ont besoin de combinaisons de couleurs harmonieuses et accessibles. Que vous soyez:
- Designer UX/UI — Créer des systèmes de design cohérents
- Développeur front-end — Générer des variables CSS ou Tailwind
- Marketeur — Assurer la cohérence visuelle des campagnes
- Entrepreneur / Startup — Définir l'identité visuelle rapidement
- Illustrateur — Trouver des couleurs harmonieuses pour illustrations
Cet outil génère automatiquement des palettes accessibles (WCAG AA) et vous permet d'exporter en JSON, CSS ou Tailwind pour une intégration directe dans vos projets.
Modes de génération détaillés
| Mode | Description | Meilleur pour | Exemple |
|---|---|---|---|
| Aléatoire | 5 couleurs complètement aléatoires | Exploration créative, tests | Bleu #3B82F6, Rouge #EF4444, Vert #10B981… |
| Complémentaire | Couleurs opposées (180° sur roue). Contraste maximal | Appels à l'action, designs audacieux | Bleu #3B82F6 + Orange #F97316 |
| Analogique | Couleurs adjacentes (30° d'écart). Harmonie naturelle | Designs apaisants, cohérence visuelle | Bleu #3B82F6 + Teal #14B8A6 + Cyan #06B6D4 |
| Triadique | 3 couleurs équidistantes (120°). Équilibré et vibrant | Gamers, startup tech, designs dynamiques | Bleu #3B82F6 + Rouge #EF4444 + Jaune #FBBF24 |
| Monochromatique | Teinte unique avec variations (luminosité/saturation) | Designs minimalistes, SaaS pro | Bleu clair #93C5FD → Bleu foncé #1E3A8A |
Accessibilité et contraste WCAG
L'accessibilité des couleurs est critique pour les sites web modernes. Le générateur vérifie automatiquement le ratio de contraste de chaque couleur selon les normes WCAG 2.1.
Qu'est-ce que le contraste WCAG?
Le contraste mesure la différence entre deux couleurs (généralement texte + fond). Les normes WCAG définissent 3 niveaux:
| Niveau | Ratio | Taille min. texte | Statut |
|---|---|---|---|
| AA ✅ | ≥ 4.5:1 | 14px normal | Conforme standard web |
| AAA 🌟 | ≥ 7:1 | Toute taille | Excellence, certifié accessible |
| Fail ❌ | < 4.5:1 | N/A | Non conforme |
Comment on utilise le générateur
Le générateur affiche le score de contraste pour chaque couleur contre un fond blanc et sombre. Par exemple:
- #3B82F6 vs blanc → 4.8:1 (AA ✅)
- #3B82F6 vs noir → 3.2:1 (Fail ❌) → ne pas utiliser sur fond sombre
Astuces pratiques
🎯 Astuces de sélection
- Commencez par votre logo — Sélectionnez la couleur principale de votre logo comme couleur de base. La palette générée s'accordera naturellement avec votre identité.
- Générez 5-10 palettes — Plus vous générez, meilleure est votre sélection. Chaque palette vous inspire différemment.
- Testez en contexte — Une couleur peut sembler belle seule, mais pas avec d'autres. Visualisez la palette sur vos interfaces.
🔧 Astuces d'intégration
- Export CSS — Idéal pour les sites statiques, frameworks CSS. Intégrez les variables directement dans votre `:root {}`.
- Export Tailwind — Pour Tailwind CSS, copiez-collez directement dans `tailwind.config.js`.
- Export JSON — Pour les frameworks JavaScript (React, Vue, Angular) et bases de données de design systems.
🌙 Dark Mode & Light Mode
- Ne générez pas deux palettes (une light, une dark). Utilisez UNE palette avec des variables CSS `:root` basées sur le thème.
- Exemple: `--color-primary: #3B82F6` (light) → `[data-theme="dark"] { --color-primary: #60A5FA }`
- Le générateur vérifie déjà le contraste sur fond sombre — vos couleurs sont compatibles dark mode.
📊 Cas d'usage réels
- SaaS B2B → Mode monochromatique (bleu marine) = pro et calme
- Startup tech → Mode triadique (3-4 couleurs vibrantes) = innovation et énergie
- Blog / Portfolio → Mode analogique (couleurs proches) = harmonie et élégance
- E-commerce → Mode complémentaire (pour les CTA) + neutral (pour le reste) = conversions maximales
Comment utiliser
Le processus est simple et rapide en 3 étapes:
Étape 1: Choisir un mode de génération
Sélectionnez dans le menu déroulant "Mode de génération" le type de palette que vous souhaitez:
Étape 2: Sélectionner une couleur de base (optionnel)
Cliquez sur le sélecteur de couleur pour choisir une teinte de départ. Le générateur créera une palette harmonieuse autour de cette couleur. Si vous laissez la couleur par défaut, une nouvelle sera générée aléatoirement à chaque clic sur "Générer".
Étape 3: Générer et exporter
Cliquez sur 🎲 Générer. La palette s'affiche instantanément avec:
Puis exportez dans le format de votre choix: