Générateur de Palette d'Interface
Utiliser Générateur de Palette d'Interface
Tous les outils GotoKit fonctionnent directement en ligne, sans téléchargement.
À propos de cet outil
Générez des palettes complètes à partir d'une couleur de base avec 7 règles d'harmonie. Aperçu UI en direct, bascule clair/sombre, export en liste HEX, config Tailwind ou variables CSS.
- 100% gratuit sans limite d’usage
- Sans inscription ni connexion
- Fonctionne directement dans le navigateur
- Rapide et respectueux de la confidentialité
Documentation
Le Générateur de Palette d’Interface est un outil de création de palettes professionnel destiné aux designers, développeurs frontend et chefs de produit. Construit sur le moteur de roue chromatique iro.js et des algorithmes de couleurs basés sur le modèle HSL, il génère des schémas complets à partir d’une seule couleur de base selon 7 règles d’harmonie classiques : complémentaire, analogue, triadique, complémentaire divisé, tétradique, monochromatique et carré. Un aperçu temps réel des composants UI vous permet d’évaluer l’apparence de votre palette dans une interface réaliste avant d’écrire la moindre ligne de code.
L’outil intègre l’intégralité du flux — choisir une couleur, explorer les harmonies, prévisualiser dans une maquette UI et exporter — dans une interface unique. Le panneau de gauche héberge une roue chromatique interactive avec saisie HEX. Le panneau central affiche les palettes pour chaque règle. Le panneau de droite restitue un aperçu UI en direct (en-tête, boutons, cartes, badges, champ de saisie) avec bascule clair/sombre. Exportez votre schéma final en liste HEX, configuration Tailwind ou propriétés CSS personnalisées en un clic.
Fonctions principales
- Roue chromatique interactive iro.js avec saisie HEX et génération aléatoire.
- 7 règles d’harmonie : complémentaire, analogue, triadique, complémentaire divisé, tétradique, monochromatique, carré.
- Affichage HEX individuel par échantillon avec copie en un clic.
- Aperçu temps réel des composants UI (en-tête / boutons / cartes / badges / champ), avec bascule clair/sombre.
- 3 formats d’export : liste HEX, configuration Tailwind, variables CSS.
Conseils d’usage
- Commencez par la couleur principale de votre marque, puis parcourez les règles pour comparer les directions stylistiques.
- Basculez entre les modes clair et sombre pour vérifier le contraste et la lisibilité.
- Utilisez la fonction d’export pour insérer la palette finale dans une configuration Tailwind ou un fichier de variables CSS.
- Cliquez sur Aléatoire pour trouver rapidement de l’inspiration, puis ajustez la couleur de base.
Notes techniques
Tous les calculs de palette sont exécutés dans le navigateur en utilisant des transformations dans l’espace colorimétrique HSL. Les couleurs sont générées selon les formules de la théorie des couleurs : rotation de teinte de 180° pour complémentaire, ±120° pour triadique, +150°/+210° pour complémentaire divisé, +60°/+180°/+240° pour tétradique, +90°/+180°/+270° pour carré.
Dernière vérification : 2026-07-22 Source : jaames/iro.js
FAQ
Est-ce gratuit ?
Oui, gratuit, sans inscription, sans limite.
Quelles règles ?
7 : complémentaire, analogue, triadique, complémentaire divisé, tétradique, monochromatique, carré.
Puis-je prévisualiser ?
Oui, le panneau droit affiche un aperçu UI en direct (en-tête, boutons, cartes, badges, champ) avec bascule clair/sombre.
Comment exporter ?
3 formats : liste HEX, config Tailwind, variables CSS. Cliquez pour copier.
Données téléchargées ?
Non, tous les calculs sont exécutés localement dans le navigateur.
Plus de Design
Tous les outils DesignSélecteur Pantone
Sélectionnez une couleur et trouvez la référence Pantone la plus proche avec sorties HEX/RGB et copie rapide.
Studio Roue de Couleurs
Un sélecteur de couleurs basé sur iro.js avec roue chromatique, sorties HEX/RGB/HSL/HSV, copie et palette.
Palette Pantone + CMJN + RVB pour l’Impression
Outil de palette d’impression avec 150+ nuanciers Pantone, 2-5 couleurs, correspondance Pantone automatique, calcul CMJN en temps réel et aperçu sur papier couché.
Générateur d Art de Dégradé en Ligne
Outil en ligne inspiré de Art of the Gradient avec dégradés radiaux par calques, mode de fusion, génération aléatoire et copie CSS.
Générateur de Diagramme de Cordes en Ligne - Gratuit
Lisez les relations entre paires avec un diagramme de cordes circulaire : les nœuds ceignent le cercle, la longueur d’arc reflète le flux total de chaque nœud, et la largeur et la couleur des rubans codent la force du lien. Idéal pour migrations, échanges, appels ou citations ; trois thèmes et export PNG / SVG.
Diagramme à Bulles Circulaire Élégant par Date
Projetez une année d’événements sur un anneau de dates concentrique — mois sur le cercle extérieur, jours alignés vers l’intérieur — chaque événement flottant en bulle dégradée au-dessus de sa case de calendrier. Palette raffinée et sobre, fonds clair / sombre et export PNG / SVG.
Rose de Nightingale No 1 à Double Dégradé
Une rose de Nightingale dont les pétales se déploient en anneau symétrique, chacun brossé d’un dégradé bicolore plutôt que d’une couleur unie. Un millésime peut s’afficher au centre du graphique ; fonds clair / sombre et export PNG / SVG inclus.
Générateur de Diagramme de Sankey à Deux Colonnes
Un diagramme de Sankey à deux colonnes digne d’une affiche : les nœuds de gauche prennent des couleurs vives, ceux de droite des gris nuancés selon le poids, et chaque bande de flux affiche nom, valeur et part. Fond clair / sombre et export PNG / SVG.
Générateur de Streamgraph - Créateur de Graphique Fluvial en Ligne
Un streamgraph lisse où chaque série s’empile symétriquement autour d’une ligne de base qui ondule avec le temps, les formes évoquant des méandres qui se déplacent. Idéal pour comparer comment les parts d’un tout évoluent ensemble ; 2 à 16 séries, 3 à 40 lignes, fonds clair / sombre et export PNG / SVG.
Générateur de Streamgraph Morandi - Graphique Rivière en Ligne Gratuit
Un streamgraph vêtu d’une palette Morandi du bleu au rose : bleu marine, gris-bleu et rose poudré à faible saturation apaisent le fleuve superposé, de fins liserés blancs séparent chaque couche et une légende en haut fait correspondre couleurs et séries. Fonds clair / sombre et export PNG / SVG.
Générateur de Graphique à Bande d’Erreur - Gratuit en Ligne
Un graphique à bande d’erreur continue : sous la ligne principale, pas une ombre fixe mais une bande épousant la courbe, plus large dans les périodes volatiles et plus fine dans les calmes, de sorte que tendance et incertitude partagent le même cadre. Thèmes classique, arc-en-ciel et Morandi ; fonds clair / sombre et export PNG / SVG.
Générateur de Graphique à Bulles à Tiges Courbes - Gratuit en Ligne
Un graphique à bulles à tiges courbes pour les frises : chaque événement se place sur l’axe des années, une tige fine s’incurve depuis la base et soulève une bulle translucide, et un axe Y logarithmique rend comparables des valeurs d’ordres de grandeur différents (0,7 à 14) dans un même cadre, la taille des bulles suivant une racine carrée. Cinq couleurs, fonds clair / sombre et export PNG / SVG.
Générateur de Diagramme de Zonage à Bulles Morph - Gratuit en Ligne
Un diagramme de zonage à bulles morph où les nœuds enfants fusionnent dans leur centre via des surfaces Metaball au lieu de flotter détachés, les étiquettes suivent l’arc extérieur de chaque nœud, des liens pointillés relient les bulles et une palette de quatre verts apaisants structure l’ensemble. Conçu pour les structures centre-membres ; fonds clair / sombre et export PNG / SVG.
Générateur de Diagramme de Cordes en Éventail - Gratuit en Ligne
Un diagramme de cordes bicolore en forme de coquille : les arcs de groupes en bas sont pondérés par le flux total en coquilles inégales, les nœuds cibles s’éventent en haut en arcs de largeur égale, et les flux deviennent de fins rubans courbés le long de courbes de Bézier passant par le centre, avec des étiquettes radiales sans chevauchement. Conçu pour les données bipartites de quelques groupes vers de nombreuses cibles.
Générateur de Carte Thermique Annotée - Gratuit en Ligne
Une heatmap qui garde les chiffres lisibles : chaque cellule est colorée et porte sa valeur, une échelle divergente part de zéro vers les extrêmes positif et négatif, et une barre de couleurs graduée se tient à droite. Thèmes classique, arc-en-ciel et Morandi, fonds clair / sombre, export PNG / SVG.
Générateur de Graphique en Barres Groupées avec Barres d’Erreur - Gratuit
Un graphique à barres groupées avec barres d’erreur au style académique sobre : deux barres pastel côte à côte, des barres d’erreur en I noires au sommet, un cadre d’axes noir complet et des étiquettes x inclinées à 45°, une fidèle reproduction de figure de publication. Pensé pour comparer des groupes expérimentaux, fonds clair / sombre et export PNG / SVG.
Générateur de Ridgeline Plot - Créateur de graphique en crêtes en ligne gratuit
Un ridgeline plot (joy plot) qui empile plusieurs distributions le long de leur propre ligne de base, des crêtes lisses qui ne se chevauchent jamais, un nom de série à gauche de chaque rangée et une légende de points en dessous — parfait pour comparer pics et étalements de nombreux groupes côte à côte. Jusqu’à 6 séries et 400 lignes, fonds clair / sombre et export PNG / SVG.
Générateur de Barres Radiales Empilées - Racetrack en ligne gratuit
Un graphique en barres radiales empilées (racetrack) où chaque ligne de données devient un anneau concentrique, découpé en arcs de catégories empilées dont la longueur reste proportionnelle au total de l’anneau — des tours de piste qui étiquettent la composition de chaque année. Un total en italique suit chaque extrémité d’arc et une légende verticale à marqueurs carrés relie les couleurs.
Générateur de Diagramme de Sankey de Décision en Quatre Étapes
Un Sankey en quatre colonnes qui dessine tout l’entonnoir d’un coup — origine, destination, décision, puis détail par origine. Le flux entre en couches par la gauche, la droite le décompose en barres accepté / rejeté par source, avec un badge d’année et trois palettes ; idéal pour revues, validations ou admissions.
Générateur de Heatmap Matricielle en Escalier Triangulaire
Disposez une matrice de fréquences (combien de jours chaque catégorie passe dans chaque tranche de valeurs) en une carte triangulaire en escalier. La couleur code la fréquence ; intervalles interquartiles, médianes et moyennes se dessinent automatiquement. Trois palettes, fonds clair / sombre et export PNG / SVG.
Générateur de Diagramme de Cordes à Rubans Dégradés Circos
Un diagramme de cordes à la Circos opposant camps chaud et froid : les nœuds chauds et froids forment chacun un arc continu, et chaque lien devient un ruban qui passe du ton d’une extrémité à celui de l’autre. Les flux entre camps se lisent d’un coup d’œil ; mode sombre et export PNG / SVG.
Générateur de Diagramme de Cordes à Bulles
Un diagramme de cordes à bulles dispose les relations appariées autour d’un grand cercle : chaque nœud est une bulle dont la taille montre l’échelle du nœud et dont la teinte suit un dégradé menthe-à-bleu pour l’intensité ; les liens s’incurvent vers le centre avec une épaisseur proportionnelle au flux, et les noms rayonnent à l’extérieur. Pensé pour les réseaux de collaboration, les dépendances de chaîne d’approvisionnement ou les flux inter-équipes quand chaque nœud porte aussi des métriques ; lisible jusqu’à ~30 nœuds, mode sombre et export PNG / SVG.
Générateur de Diagramme en Arc Radial
Un diagramme de flux à arcs radiaux pour les flux pays-vers-organisations : une arche supérieure segmentée par région avec des graduations de pays le long de l’arc, des courbes descendant de chaque graduation vers des nœuds d’organisations dimensionnés par le volume total. Pensé pour le commerce, l’aide ou les migrations mondiales ; mode sombre et export PNG / SVG.
Générateur de Diagramme en Arc
Un diagramme à arcs classique qui aplatit les co-occurrences sur une ligne de base : des graduations colorées par groupe reposent sur la ligne, des étiquettes verticales aux couleurs de groupe se tiennent à gauche, et la force des relations est dessinée en demi-cercles semi-transparents dont la hauteur et l’épaisseur varient avec le poids — lisible même avec 400 relations. Mode sombre et export PNG / SVG.
Générateur de Rose à Couleurs Groupées
Transformez des colonnes catégorie, valeur et groupe en une rose de Nightingale dont chaque pétale prend la couleur de son groupe, les teintes s’enchaînant harmonieusement d’un segment à l’autre. Interrupteur d’étiquettes, fonds clair / sombre et export PNG / SVG.
Tableau Blanc Excalidraw en Ligne
Tableau blanc en ligne basé sur Excalidraw pour organigrammes, croquis, wireframes et annotations, avec édition locale dans le navigateur et export PNG, SVG, et .excalidraw.