Générateur de palette de couleurs
Barre d’espace pour une nouvelle palette ; verrouillez les couleurs qui vous plaisent.
ou appuyez sur la barre d’espace
- rgb(237, 221, 187)hsl(41, 58%, 83%)
- Texte blanc
- 1.34:1AAAAA
- Texte noir
- 15.66:1AAAAA
- rgb(143, 173, 255)hsl(224, 100%, 78%)
- Texte blanc
- 2.19:1AAAAA
- Texte noir
- 9.59:1AAAAA
- rgb(92, 123, 230)hsl(227, 73%, 63%)
- Texte blanc
- 3.87:1AAAAA
- Texte noir
- 5.43:1AAAAA
- rgb(59, 91, 219)hsl(228, 69%, 55%)
- Texte blanc
- 5.67:1AAAAA
- Texte noir
- 3.71:1AAAAA
- rgb(60, 52, 31)hsl(43, 32%, 18%)
- Texte blanc
- 12.33:1AAAAA
- Texte noir
- 1.70:1AAAAA
Rien ne quitte votre appareil
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez, jouez ou enregistrez ici reste sur votre appareil : rien n’est envoyé ni conservé sur un serveur.
Exemple
Exemple : une palette terracotta en harmonie analogue pour une crêperie
Pour la carte et l’enseigne d’une crêperie, on part d’un terracotta. Couleur de base : #c4623f, Harmonie : Analogue, Couleurs : 5. Avec une couleur de base tapée, la palette est toujours la même : le hasard n’intervient qu’avec Générer.
- Analogue garde les teintes voisines, à 30° de part et d’autre du terracotta sur le cercle chromatique : deux roses, deux terracotta (dont la base) et un ocre, chacun du plus clair au plus foncé.
- Sous chaque couleur, le rapport de contraste d’un texte blanc et d’un texte noir : 4,5 pour le niveau AA, 7 pour AAA.
- Ici, aucun texte blanc n’atteint 4,5 : la carte s’écrira en noir, qui passe AA sur les cinq couleurs.
| Couleur | Texte blanc | Texte noir |
|---|---|---|
| #ed8093 (rose clair) | 2,59 | 8,11 (AAA) |
| #c45b70 (vieux rose) | 4,14 | 5,08 (AA) |
| #ed8763 (corail) | 2,55 | 8,25 (AAA) |
| #c4623f (base) | 4,07 | 5,17 (AA) |
| #b37200 (ocre) | 3,94 | 5,32 (AA) |
Texte noir partout, terracotta pour l’enseigne, ocre pour les prix. Pour un bouton à texte blanc, passez en Complémentaire : le même terracotta y donne un brun #9c3e19, à 6,74 avec le blanc. « Copier les variables CSS » donne --color-1 à --color-5.
Comment ça marche
- Cliquez sur Générer ou appuyez sur la barre d’espace pour une nouvelle palette — ou tapez une couleur de base et choisissez une harmonie, complémentaire ou triadique par exemple.
- Verrouillez les couleurs qui vous plaisent : la palette suivante les garde et construit le reste autour. Cliquez sur une couleur pour copier son code hex.
- Vérifiez les badges de contraste, regardez comment une personne daltonienne voit la palette, puis copiez les variables CSS ou téléchargez-la en PNG ou SVG.
Questions fréquentes
- Quelles sont les harmonies de couleurs ?
- Des règles du cercle chromatique : analogue prend les teintes voisines (±30°), complémentaire la teinte opposée, complémentaires adjacentes les deux teintes de part et d’autre de l’opposée, triadique trois teintes à 120°, carré quatre teintes à 90°, camaïeu une seule teinte du clair au foncé, pastel des couleurs douces et claires tout autour du cercle.
- Pourquoi les couleurs paraissent-elles équilibrées ?
- Elles sont calculées en OKLCH, un espace colorimétrique qui suit la luminosité perçue par l’œil : les écarts de clarté semblent réguliers. Les couleurs qu’un écran ne peut pas afficher sont adoucies jusqu’à ce qu’il le puisse.
- Que signifient les badges de contraste ?
- Le rapport de contraste WCAG d’un texte blanc et d’un texte noir sur chaque couleur : le niveau AA demande 4,5 pour un texte normal, AAA 7. L’étiquette s’écrit dans la couleur la plus lisible.
- Puis-je tirer une palette d’une photo ?
- Oui : l’outil « Palette de couleurs d’une image » relève les couleurs principales d’une photo. Celui-ci crée de nouvelles combinaisons.
- Pourquoi la même couleur de base donne-t-elle toujours la même palette ?
- Tant que vous tapez une couleur de base ou changez d’harmonie, la palette est calculée sans hasard : #c4623f en Analogue à 5 couleurs donne toujours les mêmes codes. Générer (ou la barre d’espace) part ensuite d’une nouvelle base tirée au hasard, ou de la première couleur verrouillée : verrouillez la base pour garder ses teintes et ne varier que la clarté et l’intensité des autres.
- Comment récupérer les codes pour un site ou une mise en page ?
- Cliquez sur une couleur pour copier son code hex, ou utilisez « Copier la liste hex » (#ed8093, #c45b70…) ou « Copier les variables CSS » (un bloc :root avec --color-1, --color-2…). La palette se télécharge aussi en PNG ou en SVG, et « Copier le lien de partage » donne une adresse qui rouvre exactement cette palette.
- Quelque chose est-il envoyé ?
- Non. Les palettes sont créées dans votre navigateur ; un lien de partage contient simplement les couleurs.
Outils associés
◉ Palette de couleurs d’une image Les couleurs principales de l’image, en codes hex. ◒ Outils développeur Convertisseur de couleur HEX, RGB, HSL et CMJN — plus le rapport de contraste qui décide de la lisibilité. ◒ Outils développeur Générateur de dégradé CSS Des couleurs d’un côté, une déclaration de l’autre. ◐ Outils développeur Vérificateur de contraste Si quelqu’un peut vraiment le lire.