Générateur de palette de couleurs
Créez des palettes de couleurs à partir de règles d'harmonie ou d'une photo. Voyez les nuances, le contraste et les dégradés, et exportez en CSS, SCSS, Tailwind, JSON, Swift, Android ou Figma.
Chargement de Générateur de palette de couleurs…
Vos fichiers ne quittent jamais votre appareil
Comment utiliser Générateur de palette de couleurs
- 1
Ouvrez Générateur de palette de couleurs sur cette page. Il se charge directement dans votre navigateur.
- 2
Ajoutez votre fichier, texte ou valeurs et ajustez les réglages.
- 3
Copiez ou téléchargez le résultat. Rien n'est envoyé ni stocké.
À propos de cet outil
Ce générateur de palette de couleurs crée des harmonies de couleurs pour vos sites, applications, marques et illustrations. Partez d'une couleur de base et d'une règle d'harmonie, ou importez une photo pour en extraire les couleurs principales. Chaque couleur est fournie avec ses nuances, ses valeurs HEX, RGB et HSL et un contrôle du contraste, et toute la palette s'exporte directement dans votre code ou votre outil de design.
Comment créer une palette
- Choisissez une couleur de base, ou importez une image pour en extraire une palette.
- Choisissez une règle d'harmonie (voir ci-dessous) ou partez d'un préréglage.
- Ajustez les couleurs, puis cliquez sur une couleur ou une nuance pour copier sa valeur.
- Vérifiez les résultats de contraste WCAG avant d'utiliser des couleurs pour du texte.
- Exportez la palette dans le format dont vous avez besoin.
Règles d'harmonie des couleurs
- Complémentaire : deux couleurs opposées sur le cercle chromatique, pour un contraste fort.
- Analogue : des couleurs voisines sur le cercle, calmes et naturelles.
- Triadique : trois couleurs régulièrement espacées, vives mais équilibrées.
- Tétradique et double complémentaire divisée : quatre couleurs pour des palettes riches ; laissez en dominer une.
- Complémentaire divisée : une couleur de base et les deux voisines de sa complémentaire, plus douce que la complémentaire.
- Monochrome : teintes et nuances d'une seule couleur, élégant et sans risque.
- Personnalisée : choisissez chaque couleur vous-même.
Formats d'export
Copiez ou téléchargez la palette en propriétés personnalisées CSS, variables SCSS, configuration de couleurs Tailwind, JSON, Swift (iOS), couleurs XML Android ou liste prête pour Figma. Le créateur de dégradés produit des dégradés linéaires, radiaux ou coniques à partir de vos couleurs et copie le CSS.
Conseils pour une palette réussie
- Appliquez la règle 60/30/10 : une couleur dominante pour la majeure partie de l'espace, une couleur secondaire et une couleur d'accent pour les boutons et les éléments mis en avant.
- Vérifiez le contraste du texte. Le niveau WCAG AA demande au moins 4,5:1 pour un texte normal, le niveau AAA 7:1.
- Ajoutez des neutres. La plupart des interfaces ont besoin d'une gamme de gris en plus des couleurs de marque.
- Testez en mode sombre si votre produit en a un ; les couleurs saturées peuvent sembler briller sur fond sombre.
Besoin d'un dégradé seulement ? Essayez le générateur de dégradés CSS. Pour vérifier en détail une paire de couleurs, utilisez le vérificateur de contraste.
Questions fréquentes
Puis-je obtenir une palette de couleurs à partir d'une image ?
Oui. Importez une photo et l'outil extrait ses couleurs dominantes dans une palette que vous pouvez modifier et exporter.
Qu'est-ce qu'une harmonie de couleurs ?
Une règle pour choisir des couleurs qui vont bien ensemble selon leur position sur le cercle chromatique, comme les harmonies complémentaire, analogue ou triadique.
Puis-je exporter la palette vers Tailwind CSS ?
Oui. Choisissez l'export Tailwind pour obtenir une configuration de couleurs à coller dans votre projet Tailwind. Les formats CSS, SCSS, JSON, Swift, Android et Figma sont aussi disponibles.
Comment savoir si un texte sera lisible sur une couleur ?
La palette affiche un contrôle de contraste WCAG. Visez au moins 4,5:1 pour un texte normal (AA) ou 7:1 pour le niveau plus strict AAA.
Comment copier un code couleur ?
Cliquez sur une couleur ou une nuance et sa valeur est copiée. Les valeurs HEX, RGB et HSL sont affichées pour chaque couleur.
Puis-je créer un dégradé à partir de ma palette ?
Oui. Le créateur de dégradés produit des dégradés linéaires, radiaux ou coniques à partir de vos couleurs et copie le CSS.