Graphisme / Couleur
Générateur de palettes de couleurs : des harmonies en un clic
Générez des palettes de couleurs selon la théorie des couleurs : analogues, complémentaires, triadiques, complémentaires adjacentes, monochromes ou aléatoires, de trois à huit couleurs. Verrouillez celles qui vous plaisent et régénérez les autres, vérifiez le contraste de chaque couleur avec le blanc, puis exportez la palette sous forme de variables CSS, de configuration Tailwind, de JSON, de codes hexadécimaux ou de PNG.
Générateur de palettes de couleurs : des harmonies en un clic: Chaque palette part d’une teinte de base, prise dans une couleur verrouillée si vous en avez une, puis place les autres teintes selon la règle choisie : des écarts de 30° pour les couleurs analogues, la teinte opposée pour les couleurs complémentaires, des écarts de 120° pour les couleurs triadiques, 150° de part et d’autre pour les complémentaires adjacentes, ou une seule teinte allant du foncé au clair pour le monochrome. La luminosité et la saturation varient afin d’obtenir des couleurs claires, intermédiaires et foncées. Chaque couleur affiche son ratio de contraste WCAG avec le blanc. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.
- Catégorie
- Outils développeur
- Exécutions
- Dans votre navigateur
- Coût
- Gratuit · sans inscription
- Disponibilité
- Prêt à l'emploi
Fonctionne entièrement dans votre navigateur
Ou appuyez sur la barre d’espace. Verrouillez les couleurs que vous souhaitez conserver.
#64A6F52.5:1 sur blanc#382B9D10.5:1 sur blanc#772BB77.5:1 sur blanc#BE4BBA4.3:1 sur blanc#E0367B4.2:1 sur blanc:root {
--color-1: #64a6f5;
--color-2: #382b9d;
--color-3: #772bb7;
--color-4: #be4bba;
--color-5: #e0367b;
}
Utiliser une palette
Une répartition courante consiste à utiliser environ 60 % d’une couleur neutre, 30 % d’une seconde et 10 % d’une couleur d’accent, afin de réserver la couleur la plus vive aux boutons et aux éléments mis en évidence.
Contraste
Un ratio de 4,5:1 est le minimum WCAG AA pour le texte courant, et de 3:1 pour les grands caractères ; 7:1 répond au niveau AAA.
Comment l'utiliser
- Choisissez une harmonie et le nombre de couleurs.
- Cliquez sur Générer ou appuyez sur la barre d’espace jusqu’à obtenir un résultat qui vous plaît ; verrouillez les couleurs à conserver.
- Copiez la palette sous forme de code ou téléchargez-la en PNG.
Confidentialité et limitations
Tout est généré dans votre navigateur.
Outils associés
Questions fréquentes
Comment conserver une couleur qui me plaît ?
Cliquez sur le cadenas correspondant. Les couleurs verrouillées restent en place, et la première définit également la teinte de base autour de laquelle les autres sont générées.
Puis-je utiliser la couleur de ma marque ?
Oui : cliquez sur un échantillon pour lui attribuer la couleur de votre choix, verrouillez-le, puis générez les autres couleurs autour de cette base.
Le texte de la palette est-il lisible ?
Chaque échantillon affiche son ratio de contraste avec le blanc. WCAG recommande au moins 4.5:1 pour le texte normal ; une couleur en dessous de ce seuil nécessite donc un texte foncé.
Outil gratuit · dans votre navigateur exécutions · aucun compte requis