Passer au contenu principal

Color Palette Generator

Generate harmonious color palettes — 9 harmony types, image extraction, random, CSS/PNG/JSON export

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.

Frequently asked questions

An effective web palette typically contains 3 to 5 colors: a primary color, a secondary one, an accent color, and neutral shades. Apply the 60-30-10 rule: 60% p... An effective web palette typically contains 3 to 5 colors: a primary color, a secondary one, an accent color, and neutral shades. Apply the 60-30-10 rule: 60% primary color, 30% secondary, 10% accent to create balanced visual harmony.

Analogous for a soft and natural look, Complementary for creating contrast and highlighting a CTA, Monochromatic for a clean and professional design, Triadic fo... Analogous for a soft and natural look, Complementary for creating contrast and highlighting a CTA, Monochromatic for a clean and professional design, Triadic for a dynamic and colorful result. The harmony depends on the mood you want to convey.

Our tool automatically calculates the WCAG contrast ratio between each color and white/black. To be accessible (AA level), the ratio must be at least 4.5:1 for ... Our tool automatically calculates the WCAG contrast ratio between each color and white/black. To be accessible (AA level), the ratio must be at least 4.5:1 for normal text and 3:1 for large text. Use our Contrast & Accessibility section to check your combinations.

Use the 'From an image' tab. Drag and drop your image or click to select one. The tool uses a k-means clustering algorithm to identify dominant colors. Choose b... Use the 'From an image' tab. Drag and drop your image or click to select one. The tool uses a k-means clustering algorithm to identify dominant colors. Choose between 4 and 10 colors to extract based on your needs.

Yes. Export as JSON to import into your design tools, or copy HEX/RGB values directly. For Figma, CSS Variables can be used via the Figma Tokens plugin. For Ado... Yes. Export as JSON to import into your design tools, or copy HEX/RGB values directly. For Figma, CSS Variables can be used via the Figma Tokens plugin. For Adobe, use HEX or RGB codes in color management tools.
Publicité
Lien copié !