Générateur de palette de couleurs (5 schémas depuis une couleur de
Choisis une couleur de base, sélectionne un schéma de théorie des couleurs et obtiens une palette coordonnée. Clique sur les teintes pour copier les valeurs hex individuelles, ou copie-les toutes en une fois pour les utiliser dans les outils de design et les variables CSS.
Palette générée
- #3BDFF6
- #3B82F6
- #513BF6
Fonctionnement
Les cinq schémas de théorie des couleurs
Complémentaire : deux couleurs aux extrémités opposées de la roue chromatique (à 180° l'une de l'autre). Contraste élevé, vibrant. Utilisé pour les accents, les boutons d'appel à l'action et les points focaux.
Analogue : trois couleurs adjacentes sur la roue (à 30° l'une de l'autre). Harmonieux et agréable, faible contraste. Courant dans la nature ; idéal pour les arrière-plans et les surfaces d'interface.
Triadique : trois couleurs également espacées (à 120° l'une de l'autre). Vibrant et équilibré. Utilisé dans les designs ludiques ou énergiques.
Tétradique (rectangle) : quatre couleurs formant un rectangle (à 90° l'une de l'autre). Palette riche mais plus difficile à équilibrer — utilise généralement l'une comme dominante et les autres comme accents.
Monochromatique : tons, teintes et nuances d'une seule couleur. Sophistiqué et unifié. Courant dans les designs minimalistes et la communication d'entreprise.
Choisir une couleur de départ
Couleurs de marque : la plupart des projets partent d'un logo ou d'une couleur de marque existante. Teste-la comme base dans les 5 schémas pour trouver le meilleur pour ton design.
Inspiration : choisis une couleur issue de la photographie, de l'art ou de la nature. Les couleurs vives (haute saturation, luminosité moyenne) fonctionnent mieux comme base ; les couleurs très pâles ou très sombres produisent des palettes ternes.
Accessibilité : assure-toi que ta palette finale offre suffisamment de contraste pour le texte. Utilise notre vérificateur de contraste pour vérifier que les combinaisons texte/fond respectent le WCAG AA (4,5:1 pour le texte normal).
Utiliser la palette
Variables CSS : définis les couleurs de la palette comme variables :root (--couleur-primaire, --couleur-accent, etc.) pour pouvoir changer de thème en modifiant un seul endroit.
Outils de design : colle les valeurs hex dans les bibliothèques de couleurs de Figma, Sketch ou Adobe XD. La plupart des outils acceptent le hex directement ; certains acceptent aussi HSL ou les couleurs CSS nommées.
Limite l'utilisation : même avec 5 couleurs, les vrais designs n'utilisent typiquement que 2-3 de façon prominente et les autres avec parcimonie. La règle 60-30-10 (60% dominant, 30% secondaire, 10% accent) est un bon équilibre de départ.
Questions fréquentes
›Quel schéma utiliser ?
L'analogue est le choix le plus sûr pour la plupart des designs — trois couleurs proches créent de l'harmonie sans monotonie. Le complémentaire fonctionne bien pour l'emphase (boutons CTA). Le monochromatique est le meilleur pour les marques minimalistes/sophistiquées. Le triadique pour un effet ludique/énergique.
›Puis-je obtenir plus de 5 couleurs ?
Pas avec cet outil — nous générons les schémas canoniques de 2 à 5 couleurs. Pour des palettes plus larges, utilise la sortie analogue et crée des nuances monochromatiques de chaque couleur (combine les schémas).
›L'algorithme utilise-t-il un espace colorimétrique perceptuellement uniforme ?
Nous utilisons les maths HSL, qui sont rapides et prévisibles. Pour des résultats perceptuellement uniformes (mieux pour les palettes adaptées à l'accessibilité), les outils avancés utilisent OKLCH ou CIELAB. HSL est suffisant pour la plupart du travail de design.
›Ma palette sera-t-elle accessible ?
Pas automatiquement. Les schémas de théorie des couleurs garantissent l'harmonie esthétique, pas le contraste pour le texte. Vérifie toujours les combinaisons texte/fond avec notre vérificateur de contraste avant de mettre en production.
›Puis-je sauvegarder mes palettes favorites ?
Pas encore — copie les codes hex dans ton système de design ou tes notes. Des URLs de palette pouvant être mises en favoris sont prévues.
›Qu'en est-il des palettes Material Design ou Tailwind ?
Ce sont des systèmes préconfigurés. Génère un schéma de base ici, puis cherche des couleurs Material/Tailwind similaires. Certaines applications exportent des codes hex directement compatibles avec ces systèmes.
›Pourquoi ma palette semble-t-elle « plate » ?
Si ta couleur de base est très pâle (luminosité élevée) ou très sombre (luminosité faible), la palette générée a une plage dynamique limitée. Choisis une base avec une luminosité moyenne (40-60%) et une haute saturation (70%+) pour des résultats vifs.
›Les données quittent-elles mon navigateur ?
Non. Tous les calculs s'effectuent localement ; rien n'est envoyé à un serveur.
Outils similaires
Dernière mise à jour: