Générateur de palettes

Choisissez une couleur de base et obtenez une palette complète, complémentaire, analogue, triadique, tétradique ou monochromatique. Copiez chaque teinte en HEX, RGB ou HSL. Rien ne quitte votre navigateur.

Comment fonctionne Générateur de palettes

Générateur de schémas de couleurs construit des palettes de couleurs complètes à partir d'une seule couleur de base que vous choisissez : complémentaire (opposée sur la roue des teintes), analogue (teintes adjacentes), triadique (trois teintes également espacées), tétradique (quatre teintes en deux paires complémentaires) et monochromatique (luminosité et saturation variables de la même teinte). Toute la logique de palette s'exécute dans le navigateur ; rien de ce que vous saisissez ne quitte votre appareil.

Chaque palette générée affiche des échantillons avec leurs valeurs HEX et RGB prêtes à copier. Cela donne aux designers un point de départ ancré dans la théorie des couleurs plutôt que dans l'intuition. Comme le générateur est disponible hors ligne après le chargement initial de la page, vous pouvez expérimenter librement avec des couleurs de marque lors d'une réunion client sans connexion réseau. Saisissez votre couleur de base dans la notation dont vous disposez, HEX, RGB ou HSL, et chaque nuance générée vous est rendue dans les trois, pour copier celle qu'attend votre outil de design.

Rédigé par Bastien Sulyan

Comment utiliser Générateur de palettes, étape par étape

Choisissez une couleur de base avec le sélecteur de couleur ou en tapant une valeur HEX.
Sélectionnez un type d'harmonie depuis les onglets : complémentaire, analogue, triadique, tétradique ou monochromatique.
Les échantillons de palette apparaissent instantanément avec leurs valeurs HEX et RGB.
Cliquez sur n'importe quel échantillon pour copier sa valeur HEX dans votre presse-papiers.
Ajustez la couleur de base pour explorer des variations et regarder toute la palette se mettre à jour.

Cas d'utilisation courants

Un designer démarrant une nouvelle identité de marque choisit sa couleur principale et génère une palette triadique pour proposer des combinaisons trois couleurs à un client.
Un développeur créant un thème sombre utilise la palette monochromatique pour générer une gamme de teintes claires et sombres depuis une seule couleur de marque.
Un créateur de contenu choisit une palette analogue pour sélectionner des couleurs d'accent pour une présentation qui semble cohérente sans contraste harsh.
Un designer UI utilise la palette complémentaire pour identifier une couleur d'accent à fort contraste qui se distingue de la couleur de marque principale.

Questions fréquentes

Comment fonctionne la palette complémentaire ?

Une couleur complémentaire est la teinte directement opposée à la couleur de base sur la roue des couleurs HSL, à 180 degrés. Placer des couleurs complémentaires côte à côte crée un contraste maximum. L'outil affiche la couleur de base et son complément, ainsi que des variantes plus claires et plus sombres de chacune.

Quelle est la différence entre les palettes triadique et tétradique ?

Une palette triadique utilise trois teintes également espacées à 120 degrés l'une de l'autre sur la roue des couleurs. Une palette tétradique utilise quatre teintes à 90 degrés l'une de l'autre, formant deux paires complémentaires (aussi appelée palette doublement complémentaire ou carrée). Les palettes tétradiques sont plus complexes et nécessitent un équilibre soigneux des proportions pour éviter le bruit visuel.

Les couleurs que je choisis sont-elles stockées ou envoyées quelque part ?

Non. La génération de palette est de l'arithmétique sur la représentation HSL de la couleur de base : rotation de l'angle de teinte par des montants fixes, décalage de luminosité et de saturation. Chaque calcul s'exécute localement dans le navigateur ; rien n'est envoyé à un serveur.

Puis-je exporter la palette comme fichier CSS ou fichier de tokens de design ?

L'outil affiche actuellement des échantillons avec des valeurs HEX et RGB copiables. Pour un export complet en propriétés CSS personnalisées ou en JSON de tokens de design, copiez les valeurs manuellement dans le fichier de tokens ou CSS de votre projet. Un bouton d'export dédié pourra être ajouté dans une future mise à jour.

Ce générateur suit-il une norme formelle de théorie des couleurs ?

Les calculs de palette utilisent des formules standard de rotation de teinte dans l'espace colorimétrique HSL, ce qui est la convention dans la plupart des outils de design web. L'uniformité perceptuelle exacte de HSL a des limites par rapport à LAB ou OKLCH, mais les rotations HSL produisent des palettes correspondant aux conventions de la roue des couleurs que les designers attendent généralement.

Outils liés

Tout reste local, explorez des outils complémentaires.

Tous les outils développeur