Générez des combinaisons de couleurs harmonieuses et exportez les valeurs HEX/RGB.
Générez des combinaisons de couleurs harmonieuses et exportez les valeurs HEX/RGB. Utilisez-le au travail, en développement, en apprentissage ou pour une vérification rapide.
Cet outil fonctionne dans le navigateur. Avant d'utiliser des données sensibles, assurez-vous que votre appareil et votre navigateur sont fiables.
Ce générateur de palettes travaille dans le modèle HSL : H (teinte) est un angle de 0 à 360° sur le cercle chromatique, S (saturation) et L (luminosité) sont des pourcentages. Choisissez une couleur de départ et l’outil tourne autour du cercle selon les règles classiques de la théorie des couleurs pour produire cinq couleurs d’un coup. Comme seule la teinte, ou seules la luminosité et la saturation, changent, les couleurs entretiennent une relation mathématique claire et s’accordent naturellement plutôt qu’au hasard.
Chaque mode a son usage. Monochrome garde une teinte et fait varier luminosité et saturation : le choix le plus sûr pour une marque ou une interface riche en données. Complémentaire prend la couleur opposée à 180°, pour un contraste maximal sur les boutons et mises en avant. Analogue utilise les voisines à ±15° et ±30°, douce et naturelle comme beaucoup d’illustrations et de paysages. Triadique divise le cercle en trois (120° et 240°) pour une palette riche qui demande de doser les proportions. Aléatoire pioche dans des plages raisonnables quand vous cherchez de l’inspiration.
Pour l’appliquer, essayez la règle 60-30-10 : 60 % de couleur dominante pour les fonds et grandes surfaces, 30 % de couleur secondaire pour les sections et cartes, 10 % d’accent pour les boutons et liens. Les palettes complémentaires et triadiques paraissent chargées si toutes les couleurs sont utilisées à parts égales : choisissez une vedette et désaturez les autres. Pensez aussi à la lisibilité : le texte doit atteindre au moins le contraste WCAG AA de 4,5:1, vérifiable avec notre analyseur de contraste.
Cliquez sur une pastille pour copier son code HEX, ou exportez toute la palette en variables CSS, variables SCSS, configuration Tailwind ou JSON pour la coller dans votre projet. Le générateur de dégradés CSS ci-dessous transforme la palette en fond dégradé. Tout est calculé dans le navigateur.
Les complémentaires sont à 180° pour un contraste maximal ; les analogues sont à environ 15–30° pour un rendu doux ; les triadiques sont à 120°, vives mais plus difficiles à équilibrer.
Utiliser environ 60 % de couleur dominante, 30 % de secondaire et 10 % d’accent. Cela évite l’effet fouillis et réserve l’accent aux boutons et détails importants.
Oui. Les formats disponibles sont les variables CSS, les variables SCSS, la configuration Tailwind et le JSON, prêts à coller.
La palette monochrome ne modifie que luminosité et saturation : les couleurs ne se heurtent jamais et la hiérarchie vient du clair-obscur. C’est une valeur sûre pour l’UI et les marques.
Voir cette catégorie: Design & Couleurs
Nettoyez et compressez le code SVG localement avec comparaison de taille.
Créez des dégradés linéaires et radiaux avec aperçu direct et copie CSS.
Convertissez en temps réel entre HEX, RGB, HSL et CMYK.
Ajustez les ombres de boîte et le flou d'arrière-plan avec copie rapide du CSS.
