Générateur de palettes de couleurs : des harmonies à partir d’une couleur de base
Avec le générateur de palettes de couleurs, crée une palette en ligne à partir d’une seule couleur de base : choisis une couleur ou saisis un code HEX, et six harmonies apparaissent aussitôt, avec leurs valeurs HEX, RGB et HSL. Gratuit, sans inscription et entièrement calculé dans ton navigateur.
Créé par Justin Schuessler
Ta palette est prête ? Mets ton site en ligne avec un hébergement web rapide et fiable.
Choisir la couleur de base
Toutes les palettes ci-dessous sont calculées instantanément à partir de cette couleur.
Complémentaire
La couleur de base et sa couleur opposée sur le cercle chromatique (180°) : un contraste fort, idéal pour les accents.
Analogique
Trois teintes voisines (±30°) : harmonieuses et apaisantes, souvent présentes dans la nature.
Triadique
Trois teintes équidistantes (espacées de 120°) : vives mais équilibrées.
Complémentaire divisé
La couleur de base et les deux couleurs voisines de sa complémentaire : un contraste moins marqué.
Tétradique
Quatre nuances en deux paires complémentaires (écart de 90°) : une palette riche, de préférence avec une couleur dominante.
Monochromatique
Cinq nuances d’une même couleur (teintes claires, tons et teintes sombres), discrètes et harmonieuses.
Continuer avec la couleur de base : Vérifier le contraste · Voir dans le simulateur de daltonisme · Ouvrir dans le sélecteur de couleurs
Aucune de ces données n’est enregistrée ni transmise : chaque couleur est calculée uniquement dans ton navigateur.
Fonctionnalités
Ce que permet le générateur d’harmonies de couleurs
Une seule couleur de base suffit : le générateur en déduit des combinaisons harmonieuses selon les principes de la théorie des couleurs.
Six harmonies de couleurs en un coup d’œil
Les harmonies complémentaire, analogue, triadique, complémentaire divisée, tétradique et monochromatique s’affichent côte à côte et se mettent à jour à chaque modification de la couleur de base, sans bouton de génération.
Choisir librement la couleur de base
Zone de couleur pour la saturation et la luminosité, curseur pour la teinte, champ HEX (six caractères ou forme abrégée à trois caractères) ou valeurs RGB de 0 à 255. Tu peux aussi commencer avec « Couleur aléatoire ».
HEX, RGB et HSL pour chaque couleur
Chaque échantillon affiche le code HEX et les valeurs RGB et HSL. Un clic sur un échantillon ou sur le grand aperçu de la couleur de base copie le code HEX dans le presse-papiers.
Partager la palette de couleurs par lien
La couleur de base figure automatiquement dans l’URL, par exemple ?color=3b82f6. Toute personne qui ouvre le lien voit la même couleur de base et les six mêmes harmonies de couleurs.
Calculé dans ton navigateur
Toutes les couleurs sont calculées dans ton navigateur. Tu n’as pas besoin de compte et tes choix de couleurs ne sont ni enregistrés ni transmis à un serveur.
Passer au contraste et à l’accessibilité
Sous les harmonies de couleurs, un clic suffit pour envoyer la couleur de base au vérificateur de contraste, au simulateur de daltonisme ou au sélecteur de couleurs.
Comment ça fonctionne
Comment créer une palette à partir d’une couleur de base
Six étapes, de la première couleur à la palette finale.
Étape 1
Choisir la couleur de base
Clique ou fais glisser dans la zone de couleur pour définir la saturation et la luminosité, puis règle la teinte avec le curseur en dessous.
Étape 2
Saisir un code HEX ou des valeurs RGB
Tu peux aussi saisir un code HEX comme #3B82F6 ou trois valeurs RGB. Avec « Couleur aléatoire », tu pars d’une couleur de base choisie au hasard.
Étape 3
Comparer les harmonies de couleurs
Les six harmonies de couleurs (complémentaire, analogue, triadique, complémentaire divisée, tétradique et monochromatique) se mettent à jour immédiatement.
Étape 4
Copier le code couleur
Clique sur un échantillon pour copier son code HEX. Les valeurs RGB et HSL figurent juste en dessous.
Étape 5
Partager la palette de couleurs
Copie l’adresse dans la barre d’adresse. La couleur de base figure dans le lien sous la forme ?color=… : tu peux ainsi rouvrir la palette plus tard ou la partager.
Étape 6
Vérifier le contraste
Ouvre la couleur de base dans le vérificateur de contraste via « Vérifier le contraste » ou visualise-la dans le simulateur de daltonisme.
Harmonie des couleurs
Les six harmonies de couleurs en bref
Chaque teinte correspond à un angle entre 0° et 360° sur le cercle chromatique. Cinq des six harmonies sont obtenues en faisant tourner la teinte de la couleur de base d’un angle fixe, sans modifier la saturation ni la luminosité. L’harmonie monochromatique ne modifie, elle, que la luminosité.
Complémentaire
2 couleurs · couleur de base + 180°
La couleur de base et celle qui lui fait exactement face sur le cercle chromatique. Un contraste maximal, idéal pour les accents comme les boutons.
Analogique
3 couleurs · −30°, couleur de base, +30°
La couleur de base et ses deux voisines immédiates sur le cercle chromatique. Un rendu calme et harmonieux.
Triadique
3 couleurs · 0°, 120°, 240°
Trois teintes réparties à intervalles égaux sur le cercle chromatique. Plus vive qu’une harmonie analogue, mais tout aussi équilibrée.
Complémentaire divisé
3 couleurs · couleur de base + couleurs à ±30° de sa complémentaire
Au lieu de la couleur complémentaire, cette harmonie utilise ses deux voisines. Presque autant de contraste, mais un rendu moins tranché.
Tétradique
4 couleurs · 0°, 90°, 180°, 270°
Deux paires de couleurs complémentaires espacées de 90°. Une harmonie riche, qui fonctionne mieux avec une couleur dominante.
Monochromatique
5 couleurs · même teinte, cinq niveaux de luminosité
La teinte et la saturation restent identiques ; seule la luminosité varie du foncé au clair. Les cinq niveaux restent distincts, même avec des couleurs de base très claires ou très foncées.
Contexte
Trouver une couleur complémentaire et associer les couleurs
Cercle chromatique des écrans, pas des peintres
Le générateur fait tourner la teinte sur le cercle chromatique HSL, le modèle colorimétrique des écrans. Le vert pur #00FF00 y donne le magenta #FF00FF, et le bleu pur #0000FF donne le jaune #FFFF00. Sur le cercle chromatique classique de la peinture (rouge, jaune, bleu), les paires sont en revanche vert et rouge, puis bleu et orange. Les deux réponses sont correctes, chacune dans son modèle colorimétrique.
Répartir les couleurs dans un design
Une règle courante est celle du 60-30-10 : environ 60 % de couleur principale, 30 % de couleur secondaire et 10 % de couleur d’accent. Le générateur ne l’applique pas automatiquement. Tu décides toi-même du rôle de chaque couleur, par exemple la couleur de base comme couleur principale et sa complémentaire comme accent.
Harmonieux ne veut pas dire lisible
Une harmonie de couleurs n’offre pas forcément assez de contraste entre le texte et l’arrière-plan. Vérifie donc ta combinaison finale dans le vérificateur de contraste avant de l’utiliser sur un site ou dans une application. Le lien « Vérifier le contraste » sous les harmonies de couleurs y envoie directement ta couleur de base.
Découvrir plus
Autres outils de couleur et d’accessibilité
Sélecteur de couleurs
Convertis les couleurs en temps réel entre HEX, RGB, HSL, HSV et CMYK, trouve la couleur CSS nommée la plus proche et vérifie le contraste WCAG avec le noir et le blanc, le tout dans ton navigateur.
Créé par Justin Schuessler
Vérificateur de contraste
Calcule en direct le rapport de contraste WCAG entre deux couleurs et vérifie les critères AA/AAA ainsi que les composants d’interface, entièrement dans le navigateur.
Créé par Justin Schuessler
Simulateur de daltonisme
Simule en direct la perception des palettes de couleurs et de tes images en cas de protanopie, de deutéranopie, de tritanopie ou d’achromatopsie, entièrement dans ton navigateur.
Créé par Justin Schuessler
Sélecteur de couleurs à partir d’une image
Relève le code couleur d’une image : pipette avec loupe, HEX, RGB et HSL, palette de l’image et indication de contraste. L’image reste dans le navigateur.
Créé par Dimitri Heissler
FAQ
Questions fréquentes sur Générateur de palettes de couleurs
Des réponses rapides sur les palettes, l’harmonie des couleurs et cet outil.
Définis la saturation et la luminosité dans la zone de couleur, règle la teinte avec le curseur ou saisis un code HEX ou des valeurs RGB. Tu peux aussi cliquer sur « Couleur aléatoire ». Les six harmonies se mettent à jour immédiatement, sans bouton de génération. Chaque échantillon affiche les valeurs HEX, RGB et HSL ; un clic copie le code HEX.
Saisis ta couleur en code HEX ou en valeurs RGB, puis consulte l’harmonie « Complémentaire » : elle montre ta couleur de base et celle qui lui fait face sur le cercle chromatique (teinte décalée de 180°). Le générateur utilise le cercle chromatique HSL des écrans : le vert pur #00FF00 donne le magenta #FF00FF, et le bleu pur #0000FF donne le jaune #FFFF00. Sur le cercle chromatique classique de la peinture, ce seraient respectivement le rouge et l’orange.
Trois couleurs composent trois des six harmonies : triadique (trois teintes espacées de 120°, vives et équilibrées), analogue (la couleur de base et ses voisines à −30° et +30°, calmes et harmonieuses) et complémentaire divisée (la couleur de base et les deux voisines de sa complémentaire, contrastées mais moins tranchées). Saisis ta couleur de base et compare les trois côte à côte.
Une harmonie monochromatique conserve la même teinte et la même saturation ; seule la luminosité change. Le générateur crée cinq niveaux de luminosité, du foncé au clair, qui restent distincts même avec une couleur de base très claire ou très foncée. Le résultat est discret et cohérent, idéal pour les arrière-plans et les surfaces.
Harmonieux ne veut pas forcément dire lisible : le problème vient surtout d’un écart de luminosité trop faible entre le texte et l’arrière-plan. Vérifie donc ta combinaison dans le vérificateur de contraste avant de l’utiliser. Le lien « Vérifier le contraste » sous les harmonies de couleurs y envoie directement ta couleur de base.
La règle du 60-30-10 est un principe de design : environ 60 % de couleur principale, 30 % de couleur secondaire et 10 % de couleur d’accent. Le générateur ne l’applique pas automatiquement. Tu répartis toi-même les couleurs, par exemple la couleur de base comme couleur principale et sa complémentaire comme accent.
Oui. La couleur de base figure automatiquement dans l’URL sous forme de paramètre, par exemple ?color=3b82f6. Copie l’adresse dans la barre d’adresse : toute personne qui ouvre le lien voit la même couleur de base et les six mêmes harmonies de couleurs. Aucun compte n’est nécessaire.
Le générateur de palettes de couleurs est gratuit et utilisable sans inscription. Toutes les couleurs sont calculées dans ton navigateur ; tes choix ne sont ni enregistrés ni transmis à un serveur. Si tu fermes l’onglet, tu ne pourras retrouver la palette qu’avec un lien copié au préalable.
D’autres questions ?
Contacter le supportTu cherches un serveur pour ton prochain projet ?
Un VPS ZAP-Hosting te donne le contrôle total de ton infrastructure, avec un accès SSH dédié, un pare-feu et un accès root complet.
Sans configuration. Sans risque. En ligne en quelques secondes.
Tu cherches d’autres outils ? Voir tous les outils d’image et de design
Source préférée sur Google
