Générateur de palette de couleurs

Une palette de couleurs harmonieuse en un clic

Ce générateur de palette de couleurs propose cinq couleurs qui vont bien ensemble, à partir du hasard, d'une couleur de base ou d'une photo. Pour chaque teinte, il affiche les codes HEX, RGB et HSL, le contraste avec le blanc et le noir, et la couleur de texte lisible dessus. Tout est calculé dans votre navigateur : rien n'est envoyé.

Mode d'emploi

1. Cliquez sur « Générer une palette » ou appuyez sur la barre d'espace. Le menu « Harmonie » choisit la règle, de « Complémentaire » à « Monochrome », ou « Au hasard ».
2. Une couleur vous plaît ? Cliquez sur son cadenas : elle reste en place et les autres se calculent autour d'elle.
3. Pour partir d'une couleur précise, saisissez-la dans « Couleur de base » puis cliquez sur « Appliquer l'harmonie ». « Calcul des teintes » choisit entre HSL et OKLCH, qui garde une clarté plus régulière d'une teinte à l'autre.
4. Retouchez une couleur avec son sélecteur ou son champ HEX ; changez l'ordre en faisant glisser la poignée de chaque couleur.
5. Cliquez sur un code pour le copier. « Exporter la palette » donne les variables CSS, un tableau JSON, une image PNG et un lien qui rouvre la palette.

Vous pouvez aussi tirer une palette d'une photo, décliner une couleur dans le « Nuancier de 50 à 900 » et garder vos favoris et les 20 dernières palettes sur cet appareil.

Le cercle chromatique et les harmonies de couleurs

Sur le cercle chromatique, chaque teinte occupe un angle : le rouge à 0°, le vert à 120°, le bleu à 240°. Une harmonie est un jeu d'écarts d'angle. Exemples calculés en HSL à partir du rouge #ff0000 :

Les couleurs complémentaires se font face et donnent le plus fort contraste. Les analogues, voisines, donnent une ambiance calme. La palette monochrome garde une seule teinte et joue sur la clarté. Quand une harmonie compte moins de cinq couleurs, l'outil ajoute des versions plus claires ou plus foncées.

HEX écrit une couleur avec trois paires de chiffres hexadécimaux (rouge, vert, bleu), comme #1d4ed8. RGB donne les mêmes valeurs de 0 à 255, rgb(29, 78, 216), et HSL les traduit en teinte, saturation et luminosité, hsl(224, 76%, 48%).

Bien utiliser une palette : la règle 60-30-10

La règle 60-30-10 donne 60 % de la surface à une couleur dominante, souvent neutre, 30 % à une couleur secondaire et 10 % à une couleur d'accent, réservée à ce qui doit attirer l'œil.

• Site internet : fond clair, couleur de marque pour les titres, accent pour les boutons.
• Logo : deux ou trois couleurs, à tester en noir et blanc et en petit format.
• Présentation : un fond, une couleur de titres, une ou deux pour les graphiques, avec des contrastes francs pour le vidéoprojecteur.
• Décoration : les murs prennent les 60 %, les meubles les 30 %, les coussins et objets les 10 %. La peinture ne rend jamais comme l'écran : faites un essai sur le mur.

Contraste, accessibilité et daltonisme

Les règles WCAG demandent un contraste d'au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte (niveau AA), 7:1 pour le niveau AAA. Le noir #000000 sur blanc atteint 21:1. Le gris #777777 sur blanc n'obtient que 4,48:1 : échec pour du texte normal, l'outil affiche « AA grand texte ».

On estime qu'environ 8 % des hommes et 0,5 % des femmes d'origine européenne ont une forme de daltonisme, le plus souvent une difficulté à distinguer le rouge du vert. La « Simulation du daltonisme » montre votre palette en protanopie, deutéranopie et tritanopie : si deux couleurs se confondent, ajoutez un texte ou une icône.

Questions fréquentes

Pourquoi le complémentaire diffère-t-il en OKLCH ?

En HSL, le complémentaire de #ff0000 est #00ffff. En OKLCH, la teinte tourne à clarté perçue égale : on obtient #009aac, mieux équilibré face au rouge.

Comment garder une couleur quand je régénère ?

Cliquez sur son cadenas. La barre d'espace n'agit pas quand vous tapez dans un champ.

Mes photos sont-elles envoyées ?

Non. L'image est analysée dans votre navigateur : ses pixels sont regroupés par couleurs proches et chaque groupe important donne une couleur.

Comment partager ma palette ?

« Copier le lien de la palette » met les cinq codes dans l'adresse, par exemple #ff0000-00ffff-….