Passer au contenu principal

Générateur de Palette de Couleurs

Générez des palettes de couleurs harmonieuses — 9 types d'harmonies, extraction depuis image, aléatoire, export CSS/PNG/JSON

Palette 6
CSS Variables

          
Contraste & Accessibilité WCAG

Générateur de palette de couleurs : guide design

Une palette de couleurs cohérente est le fondement de toute identité visuelle réussie. Que vous conceviez un site web, une application, un logo ou une charte graphique, les couleurs que vous choisissez transmettent des émotions, créent de la cohérence et influencent directement la perception de votre marque.

Les règles d'harmonie des couleurs

🎨 Analogue

3 couleurs voisines sur la roue chromatique. Rendu harmonieux et naturel, idéal pour les designs apaisants.

⚡ Complémentaire

Deux couleurs opposées (ex. bleu/orange). Fort contraste visuel, excellent pour les CTA et mises en avant.

△ Triadique

3 couleurs espacées de 120°. Palette équilibrée et vibrante, populaire dans les designs ludiques.

□ Tétradique

4 couleurs en carré (90°). Très riche, nécessite une couleur dominante clairement définie.

Accessibilité : ratio de contraste WCAG

NiveauTexte normalGrand texteUsage
Échec< 3:1< 3:1Non accessible
AA Large≥ 3:1Grand texte (18pt+)
AA≥ 4.5:1≥ 3:1Standard minimum
AAA≥ 7:1≥ 4.5:1Accessibilité optimale

Conseils pour une palette web efficace

  • Règle 60-30-10 : 60% couleur principale, 30% secondaire, 10% accent.
  • Limitez à 3-5 couleurs pour garder la cohérence visuelle.
  • Testez sur fond blanc ET fond sombre — votre palette doit fonctionner dans les deux modes.
  • Exportez en CSS variables (--color-primary) pour une maintenabilité maximale.
  • Vérifiez le contraste WCAG AA (4.5:1 minimum) entre le texte et son fond.

Questions fréquentes

Une palette web efficace contient généralement 3 à 5 couleurs : une couleur principale, une secondaire, une couleur d'accent et des nuances neutres. Appliquez l... Une palette web efficace contient généralement 3 à 5 couleurs : une couleur principale, une secondaire, une couleur d'accent et des nuances neutres. Appliquez la règle 60-30-10 : 60% couleur principale, 30% secondaire, 10% accent pour créer une harmonie visuelle équilibrée.

Analogue pour un rendu doux et naturel, Complémentaire pour créer du contraste et mettre en avant un CTA, Monochromatique pour un design épuré et professionnel,... Analogue pour un rendu doux et naturel, Complémentaire pour créer du contraste et mettre en avant un CTA, Monochromatique pour un design épuré et professionnel, Triadique pour un résultat dynamique et coloré. L'harmonie dépend de l'ambiance que vous souhaitez transmettre.

Notre outil calcule automatiquement le ratio de contraste WCAG entre chaque couleur et le blanc/noir. Pour être accessible (niveau AA), le ratio doit être au mi... Notre outil calcule automatiquement le ratio de contraste WCAG entre chaque couleur et le blanc/noir. Pour être accessible (niveau AA), le ratio doit être au minimum 4.5:1 pour le texte normal et 3:1 pour le grand texte. Utilisez notre section Contraste & Accessibilité pour vérifier vos combinaisons.

Utilisez l'onglet 'Depuis une image'. Glissez-déposez votre image ou cliquez pour en sélectionner une. L'outil utilise un algorithme k-means de clustering pour ... Utilisez l'onglet 'Depuis une image'. Glissez-déposez votre image ou cliquez pour en sélectionner une. L'outil utilise un algorithme k-means de clustering pour identifier les couleurs dominantes. Choisissez entre 4 et 10 couleurs à extraire selon vos besoins.

Oui. Exportez en JSON pour importer dans vos outils de design, ou copiez les valeurs HEX/RGB directement. Pour Figma, les CSS Variables peuvent être utilisées v... Oui. Exportez en JSON pour importer dans vos outils de design, ou copiez les valeurs HEX/RGB directement. Pour Figma, les CSS Variables peuvent être utilisées via le plugin Figma Tokens. Pour Adobe, utilisez les codes HEX ou RGB dans les outils de gestion de couleurs.
Publicité
Lien copié !