Quelle est la différence entre analogue et monochromatique ?

Analogue fait varier la teinte par petits pas autour de la base, en gardant saturation et luminosité constantes. Monochromatique garde la même teinte et ne varie que la luminosité — de teintes claires à nuances sombres.

Comment fonctionnent les curseurs de Saturation et Luminosité ?

Ils s'appliquent globalement à toutes les couleurs à la fois. La saturation contrôle l'intensité (0 % = gris pur) ; la luminosité contrôle la clarté — ce qui permet de déplacer toute l'harmonie sans altérer les relations.

Puis-je sauvegarder les palettes que j'aime ?

Cliquez sur Regenerate avant de modifier quoi que ce soit — la palette actuelle est enregistrée dans l'Historique (jusqu'à 10 entrées). Pour un stockage permanent, copiez le CSS ou le JSON.

Combien de couleurs contient chaque palette ?

Exactement 5 — le juste équilibre entre variété et cohérence pour la plupart des design systems (primary, secondary, neutral, surface, variante sombre/claire).

Quels formats puis-je exporter ?

CSS Variables génère un bloc `:root {}` avec des noms sémantiques prêts à coller dans n'importe quel projet. JSON fournit le hex, RGB et HSL de chaque couleur. Le bouton Download PNG génère une carte de nuances avec les codes hex, prête à partager dans un brief ou dans Figma.

Comment fonctionne l'attribution des rôles (roles) ?

Glissez n'importe quelle nuance de la palette vers l'une des six cartes — Primary, Secondary, Accent, Background, Surface ou Text — ou cliquez sur l'icône crayon pour choisir manuellement n'importe quelle couleur. En chargeant un preset de marque, les rôles sont déjà suggérés automatiquement selon la luminosité de chaque couleur.

Les palettes de marque (Spotify, Netflix, etc.) sont-elles exactement les couleurs officielles ?

Ce sont des approximations fidèles des couleurs les plus reconnaissables de chaque marque, pensées comme point de départ et source d'inspiration — pas comme un guide de marque officiel. Pour un usage commercial exigeant une précision de brand guidelines, consultez toujours la documentation officielle de la marque.

Générateur de Palette de Couleurs

Générez des palettes de couleurs harmonieuses depuis n'importe quelle couleur de base. Choisissez Analogue, Complémentaire, Triadique ou Tétradique —...

Mis à jour mai 2026

Vérifié par Rafael Duarte

Couleur de base

Règle d'harmonie

Réglages globaux

Saturation 86%

Luminosité 50%

Exporter

Attribuer les rôles

Faites glisser une couleur → déposez-la sur une carte · faites glisser les cartes pour les échanger · pour choisir une couleur

Principale

#197FE6

CTA principaux et marque

Secondaire

#1461B8

Actions secondaires

Accent

#F59E0B

Badges · mises en avant

Arrière-plan

#FFFFFF

Fond de page

Surface

#F5F7FA

Cartes et panneaux

Texte

#111827

Corps et titres

Marque

FonctionnalitésTarifsDocs

Commencer

✦ NOUVEAU — Version 2.0

Créez des produits
que vos utilisateurs adorent

Le moyen le plus rapide de livrer votre prochain projet avec un design system soigné et des composants prêts pour la production.

Commencer gratuitement →

Démo en direct

🚀

Ultra-rapide

Optimisé pour la vitesse et la performance dès le départ.

🎨

Une interface soignée

Des composants travaillés avec des détails au pixel près.

🔒

Sécurisé par défaut

Une sécurité de niveau entreprise intégrée à chaque couche.

🎉 Offre limitée : -30 % sur toutes les formules cette semaine seulement.

En profiter

Prêt à vous lancer ?

Rejoignez plus de 10 000 équipes qui utilisent déjà Marque.

Démarrer l'essai gratuit

ConfidentialitéConditionsContact

Palettes populaires

Palettes de marques

Comment générer une palette de couleurs harmonieuse

Une couleur de base, une règle d'harmonie

1. Choisissez la couleur de base

Cliquez sur la pastille ou saisissez directement un code hexadécimal dans le champ.

2. Choisissez la règle d'harmonie

Analogue, Monochromatique, Complémentaire, Triadique ou Tétradique — la palette se met à jour instantanément.

3. Affinez et exportez

Ajustez avec les curseurs de Saturation et Luminosité, puis exportez en CSS, JSON ou PNG.

Ce que fait cet outil

Des règles géométriques éprouvées, appliquées automatiquement

5 couleurs par palette, toujours

Le juste équilibre entre variété et cohérence pour la plupart des design systems.

Curseurs globaux de saturation et luminosité

Ajustez toute l'harmonie d'un coup, sans modifier les relations entre les teintes.

Régénérer en conservant la règle

Randomise la teinte de base en gardant l'harmonie et les réglages actuels — avec un historique de 10 générations.

3 formats d'export

Variables CSS personnalisées, JSON avec hex/RGB/HSL pour chaque couleur, ou carte PNG de nuances.

Attribution de rôles avec détection intelligente

Glissez n'importe quelle nuance vers les cartes Primary, Secondary, Accent, Background, Surface ou Text — les presets de marque arrivent déjà avec des rôles suggérés selon la luminosité.

Bibliothèque de palettes prêtes à l'emploi

20 palettes à charger en un clic : 10 thèmes populaires d'éditeur (Dracula, Nord, Catppuccin...) et 10 palettes de marques réelles (Spotify, Netflix, Google...).

Les cinq règles d'harmonie

Règle

Fonctionnement

Analogue

Teintes adjacentes (±30°/±60°) — cohérente et naturelle

Monochromatique

Même teinte, luminosité variable — sûre pour le mode sombre/clair

Complémentaire

180° d'opposition — fort contraste et énergie

Triadique

Trois segments de 120° — vibrante et équilibrée

Tétradique

Quatre teintes à 90° les unes des autres, plus un accent — la plus riche, demande une couleur dominante claire

Quand vous allez utiliser cet outil

Les scénarios les plus courants chez les utilisateurs

Design systems d'UI

Générez 5 couleurs à partir de la couleur primaire de la marque et exportez directement en variables CSS.

Identité de marque

Explorez les harmonies analogues et complémentaires à partir de la couleur du logo.

Thèmes mode sombre

Utilisez la règle Monochromatique avec une luminosité basse pour construire surface, background et muted.

Pipelines de design tokens

L'export JSON inclut hex/RGB/HSL avec label sémantique, prêt pour Style Dictionary.

Maquette rapide de site

L'aperçu en direct montre navbar, hero, cartes de fonctionnalités et footer avec les rôles attribués — visualisez le résultat avant de passer à l'implémentation réelle.

Référence de palettes de marques connues

Chargez des palettes comme Spotify, Netflix ou Vercel comme point de départ pour comparer ou inspirer votre propre identité visuelle.

Erreurs courantes

Confondre analogue et monochromatique

Analogue fait varier la teinte par petits pas ; monochromatique garde la même teinte et ne varie que la luminosité.

Utiliser Tétradique sans hiérarchie claire

L'harmonie la plus riche exige une couleur dominante — les trois autres en support, sinon le résultat devient chargé.

Oublier de sauvegarder avant de régénérer

L'historique ne conserve que les 10 dernières générations — copiez le CSS/JSON pour un stockage permanent.

Écraser un rôle sans vérifier le contraste

L'icône crayon sur la carte de rôle permet de choisir librement n'importe quelle couleur, mais la détection automatique de contraste ne vaut que pour les couleurs suggérées — une modification manuelle peut casser la lisibilité sans avertissement.

Croire que l'export suit l'ordre des nuances

Le CSS et le JSON exportés utilisent les couleurs attribuées dans les cartes de rôle (primary, secondary...), pas l'ordre de la bande de nuances ci-dessus. Vous avez glissé des couleurs vers d'autres rôles ? L'export reflète cette nouvelle attribution.

Utiliser une palette de marque sans revoir l'aperçu

Les palettes prêtes comme Dracula ou Spotify ont été pensées pour leur contexte d'origine, pas forcément pour votre mise en page. Ouvrez l'aperçu du site avant d'exporter pour confirmer que texte et fond restent lisibles.

Pourquoi utiliser cet outil

Applique des règles géométriques éprouvées — adjacence analogue, opposition complémentaire, division triadique — pour produire des points de départ qui fonctionnent sans exiger d'intuition de designer.

Les curseurs globaux de saturation et luminosité font passer toute une harmonie d'une "UI diurne vibrante" à "accessible en mode sombre" sans casser les relations entre les couleurs.

Au-delà de la génération mathématique, le flux est complet : attribuez les 5 couleurs aux rôles réels d'un design system (primary, secondary, accent, background, surface, text) par glisser-déposer et visualisez le résultat appliqué à un aperçu de site entier avant d'exporter quoi que ce soit.

Questions fréquentes

C'est l'usage de relations mathématiquement définies entre les teintes sur le cercle chromatique pour créer des palettes équilibrées. Les palettes harmonieuses sont plus faciles à traiter visuellement et paraissent professionnelles sans exiger d'intuition de designer.

Ressources

MDN — Propriétés personnalisées CSS

Comment utiliser les variables CSS générées par cet outil.

Wikipédia — Harmonie des couleurs

Vue d'ensemble de la théorie des couleurs et des règles d'harmonie géométrique.

Material Design — Système de couleurs par rôles

Référence officielle de Google sur la désignation des couleurs par rôle (primary, secondary, surface) — la même logique que l'attribution de rôles de cet outil.

Créez des produitsque vos utilisateurs adorent