Mode d’emploi
- Cliquez sur Générer ou appuyez sur la barre d'espace jusqu'à ce que des couleurs vous plaisent.
- Cliquez sur 🔒 sur une couleur pour la garder, ou saisissez un code HEX ou utilisez 🎨 pour définir la vôtre ; la palette suivante se construit autour des couleurs verrouillées.
- Consultez le tableau de contraste, puis copiez la palette dans le format voulu ou téléchargez-la en PNG.
Explication des options
- Harmonie de couleurs
- Analogue utilise des teintes voisines, monochrome une seule teinte à différentes luminosités, complémentaire des teintes opposées, triadique trois teintes régulièrement espacées et complémentaire divisée une teinte plus les deux voisines de son opposée. « Au choix » en choisit une au hasard à chaque fois.
- Couleurs verrouillées
- Elles restent exactement telles quelles. La première couleur verrouillée qui n'est pas grise fixe aussi la teinte de base des autres.
- Tableau de contraste
- Chaque cellule montre du texte d'une couleur de la palette sur une autre. AA (4,5:1) est le minimum WCAG 2 pour le texte courant, AAA est 7:1, et 3:1 ne suffit que pour un texte grand ou en gras.
- Lien de partage
- Les couleurs sont enregistrées dans l'adresse de la page (#22333b-3d6b72-…) : vous pouvez ainsi mettre une palette en favori ou l'envoyer à quelqu'un.
Choisir une harmonie
| Harmonie | Aspect | Idéale pour |
|---|---|---|
| Monochrome | Une teinte du sombre au clair | Interfaces sobres, nuances de marque, graphiques à une seule série |
| Analogue | Teintes voisines, p. ex. du bleu-vert au bleu | Palettes naturelles et douces pour photos et illustrations |
| Complémentaire | Deux teintes opposées | Une couleur d’accent qui se détache du reste |
| Triadique | Trois teintes espacées de 120° | Designs enjoués et colorés |
| Complémentaire divisée | Une teinte et les deux voisines de son opposée | Du contraste avec moins de heurt que le complémentaire |
Créer une palette qui fonctionne sur un site web
- Utilisez la couleur la plus claire comme fond de page et la plus sombre pour le texte : l’aperçu montre exactement cette combinaison.
- Choisissez la couleur la plus vive pour les boutons et les liens. Vérifiez son contraste avec le fond ; les liens ont besoin de 4,5:1 pour respecter AA.
- Gardez les couleurs intermédiaires pour les bordures, les panneaux, les étiquettes et les illustrations, où le contraste compte moins.
Questions fréquentes
Comment les couleurs sont-elles choisies ?
Dans l'espace colorimétrique OKLCH, qui correspond à la façon dont l'œil perçoit la luminosité des couleurs. Les teintes suivent l'harmonie choisie, la luminosité va du sombre au clair le long de la palette et la saturation reste dans ce qu'un écran sRGB ordinaire peut afficher.
Comment créer une palette à partir de la couleur de ma marque ?
Saisissez votre couleur dans n'importe quel emplacement, verrouillez-la, choisissez Monochrome ou Analogue et cliquez sur Générer. Les autres couleurs se construisent autour de sa teinte.
Quelle couleur utiliser pour le texte ?
Chaque échantillon indique si un texte noir ou blanc y est plus lisible, ainsi que le rapport de contraste. Pour du texte dans les couleurs de la palette, utilisez le tableau : seules les paires marquées AA ou AAA conviennent au texte courant.
Comment utiliser l'export Tailwind ?
C'est un bloc @theme de Tailwind CSS v4. Collez-le dans votre fichier CSS principal et vous obtenez des classes comme bg-palette-1 et text-palette-3.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Vos fichiers et vos textes sont traités sur votre appareil et ne sont jamais envoyés à nos serveurs.