Tokens de couleur pour design system
Générez un jeu complet de tokens de couleur pour votre design system à partir de 7 couleurs de base — primaire, secondaire, accent, succès, avertissement, erreur et info. Chaque couleur obtient 9 variantes dérivées automatiquement (base, light, dark, hover, active, bg, border, text et muted) pour les modes clair et sombre. Exportez en propriétés personnalisées CSS ou JSON. Tout le traitement s'effectue dans votre navigateur — gratuit, sans inscription.
Generate a complete set of design system colour tokens from 7 base colours. Get light and dark mode variants with CSS variables and JSON export - perfect for design systems, component libraries, and theme files.
Main brand colour used for primary actions, active states, and key UI elements
Supporting brand colour for secondary actions and complementary elements
Highlight colour for emphasis, badges, and call-to-action elements
Positive feedback - confirmations, success messages, and valid states
Cautionary feedback - warnings, low-priority alerts, and pending states
Negative feedback - errors, destructive actions, and invalid states
Informational feedback - tooltips, helper text, and neutral notifications
Primary
Secondary
Accent
Success
Warning
Error
Info
:root {
/* Light mode colour tokens */
--color-primary-base: #3b82f6;
--color-primary-light: #e2ecfe;
--color-primary-dark: #0f213e;
--color-primary-hover: #326fd1;
--color-primary-active: #295bac;
--color-primary-bg: #f5f9ff;
--color-primary-border: #9dc1fb;
--color-primary-text: #000000;
--color-primary-muted: #336ecc;
--color-secondary-base: #8b5cf6;
--color-secondary-light: #eee7fe;
--color-secondary-dark: #23173e;
--color-secondary-hover: #764ed1;
--color-secondary-active: #6140ac;
--color-secondary-bg: #f9f7ff;
--color-secondary-border: #c5aefb;
--color-secondary-text: #000000;
--color-secondary-muted: #6133cc;
--color-accent-base: #f59e0b;
--color-accent-light: #fef0da;
--color-accent-dark: #3d2803;
--color-accent-hover: #d08609;
--color-accent-active: #ac6f08;
--color-accent-bg: #fffaf3;
--color-accent-border: #facf85;
--color-accent-text: #000000;
--color-accent-muted: #cc9433;
--color-success-base: #10b981;
--color-success-light: #dbf5ec;
--color-success-dark: #042e20;
--color-success-hover: #0e9d6e;
--color-success-active: #0b825a;
--color-success-bg: #f3fcf9;
--color-success-border: #88dcc0;
--color-success-text: #000000;
--color-success-muted: #33cc99;
--color-warning-base: #f97316;
--color-warning-light: #feeadc;
--color-warning-dark: #3e1d06;
--color-warning-hover: #d46213;
--color-warning-active: #ae510f;
--color-warning-bg: #fff8f3;
--color-warning-border: #fcb98b;
--color-warning-text: #000000;
--color-warning-muted: #cc7333;
--color-error-base: #ef4444;
--color-error-light: #fde3e3;
--color-error-dark: #3c1111;
--color-error-hover: #cb3a3a;
--color-error-active: #a73030;
--color-error-bg: #fef6f6;
--color-error-border: #f7a2a2;
--color-error-text: #000000;
--color-error-muted: #cc3333;
--color-info-base: #06b6d4;
--color-info-light: #daf4f9;
--color-info-dark: #022e35;
--color-info-hover: #059bb4;
--color-info-active: #047f94;
--color-info-bg: #f3fbfd;
--color-info-border: #83dbea;
--color-info-text: #000000;
--color-info-muted: #33b5cc;
/* Dark mode colour tokens */
--color-mode: light;
}
[data-theme="dark"], .dark {
--color-primary-base: #0b3d8e;
--color-primary-light: #dae2ee;
--color-primary-dark: #030f24;
--color-primary-hover: #093479;
--color-primary-active: #082b63;
--color-primary-bg: #f3f5f9;
--color-primary-border: #859ec7;
--color-primary-text: #ffffff;
--color-primary-muted: #336ecc;
--color-secondary-base: #3d0eaa;
--color-secondary-light: #e2dbf2;
--color-secondary-dark: #0f042b;
--color-secondary-hover: #340c91;
--color-secondary-active: #2b0a77;
--color-secondary-bg: #f5f3fb;
--color-secondary-border: #9e87d5;
--color-secondary-text: #ffffff;
--color-secondary-muted: #6133cc;
--color-accent-base: #f5c470;
--color-accent-light: #fef6ea;
--color-accent-dark: #3d311c;
--color-accent-hover: #d0a75f;
--color-accent-active: #ac894e;
--color-accent-bg: #fffcf8;
--color-accent-border: #fae2b8;
--color-accent-text: #000000;
--color-accent-muted: #cc9433;
--color-success-base: #d1faec;
--color-success-light: #f8fefc;
--color-success-dark: #343f3b;
--color-success-hover: #b2d5c9;
--color-success-active: #92afa5;
--color-success-bg: #fdfffe;
--color-success-border: #e8fdf6;
--color-success-text: #000000;
--color-success-muted: #33cc99;
--color-warning-base: #f8b07c;
--color-warning-light: #fef3eb;
--color-warning-dark: #3e2c1f;
--color-warning-hover: #d39669;
--color-warning-active: #ae7b57;
--color-warning-bg: #fffbf8;
--color-warning-border: #fcd8be;
--color-warning-text: #000000;
--color-warning-muted: #cc7333;
--color-error-base: #891010;
--color-error-light: #eddbdb;
--color-error-dark: #220404;
--color-error-hover: #740e0e;
--color-error-active: #600b0b;
--color-error-bg: #f9f3f3;
--color-error-border: #c48888;
--color-error-text: #ffffff;
--color-error-muted: #cc3333;
--color-info-base: #4ddbf5;
--color-info-light: #e4fafe;
--color-info-dark: #13373d;
--color-info-hover: #41bad0;
--color-info-active: #3699ac;
--color-info-bg: #f6fdff;
--color-info-border: #a6edfa;
--color-info-text: #000000;
--color-info-muted: #33b5cc;
--color-mode: dark;
}Génération complète de tokens
Générez des tokens de design prêts pour la production à partir de vos seules couleurs de base.
- 7 catégories sémantiques : Primaire, secondaire, accent, succès, avertissement, erreur et info — chacune avec un jeu complet de variantes dérivées incluant base, light, dark, hover, active, bg, border, text et muted.
- Mode clair et sombre : Chaque token de couleur est automatiquement adapté au mode sombre grâce à une inversion perceptive de la luminosité qui préserve la lisibilité et la hiérarchie visuelle dans les thèmes sombres.
- Variantes intelligentes : Les variantes hover, active, bg, border et texte-sur-couleur sont générées automatiquement par un mélange tenant compte de la luminance — aucun réglage manuel pour un contraste compatible WCAG.
- Export CSS + JSON : Copiez des propriétés personnalisées CSS prêtes à l'emploi pour les sélecteurs :root et [data-theme="dark"], ou exportez un fichier JSON complet de tokens pour l'intégrer à vos outils de design et pipelines de build.
Cas d'usage courants
Des design systems au mode sombre — les tokens de couleur alimentent des interfaces cohérentes.
- Développement de design system : Générez des tokens de couleur cohérents pour votre bibliothèque de composants ou votre design system. Utilisez les variables CSS exportées dans tous vos composants comme source unique de vérité.
- Passation de design : Convertissez les tokens de design Figma ou Sketch en variables CSS et fichiers JSON prêts pour les développeurs. Éliminez les erreurs de correspondance manuelle des couleurs entre design et développement.
- Thèmes et marque blanche : Créez plusieurs jeux de tokens pour différentes marques ou thèmes. Chaque jeu obtient automatiquement des variantes claires/sombres cohérentes — parfait pour les produits SaaS multi-tenants.
- Implémentation du mode sombre : Arrêtez de deviner les couleurs du mode sombre. Saisissez votre palette claire une fois et obtenez instantanément des tokens sombres compatibles WCAG sans calculs à la volée.
- Migration de framework : Lors d'une migration entre frameworks CSS ou de l'ajout d'un design system en cours de projet, générez des tokens de couleur cohérents fonctionnant avec Tailwind, CSS vanilla ou CSS-in-JS.
- E-commerce et sites marketing : Maintenez la cohérence de marque sur les pages d'atterrissage, catalogues produits et tunnels de paiement avec un seul jeu de tokens de couleur sémantiques partagé sur toutes les pages.
À propos des tokens de couleur pour design system
Comprenez le fonctionnement des tokens de couleur et leur utilisation dans vos projets.
- Que sont les tokens de couleur ? : Les tokens de couleur d'un design system sont des noms de variables sémantiques qui abstraient des valeurs de couleur codées en dur en identifiants significatifs et réutilisables. Au lieu d'utiliser directement des codes hexadécimaux — difficiles à maintenir et impossibles à thématiser — vous utilisez des noms comme --color-primary-base ou --color-error-hover. Cela permet un style cohérent entre composants et un changement de thème instantané.
- Comment les tokens du mode clair sont générés : Pour chaque couleur de base, nous dérivons 9 variantes de token : base (l'originale), light (mélange à 85 % de blanc), dark (mélange à 75 % de noir), hover (15 % plus sombre), active (30 % plus sombre), bg (mélange à 95 % de blanc), border (mélange à 50 % de blanc), text (noir ou blanc pour le contraste) et muted (saturation réduite). La variante text utilise la luminance WCAG pour garantir un contraste lisible sur la couleur de base.
- Comment les tokens du mode sombre sont adaptés : Les tokens du mode sombre utilisent un algorithme d'inversion perceptive de luminosité. Les couleurs de base claires sont décalées vers l'extrémité sombre du spectre, tout en préservant les relations de teinte et de saturation. Le résultat conserve la hiérarchie visuelle de la palette d'origine tout en étant confortable à regarder sur fond sombre.
- Utilisation des tokens exportés : La sortie CSS inclut des blocs :root et [data-theme="dark"] avec toutes les variables de tokens prêtes à coller dans votre projet. La sortie JSON utilise un format plat clé-valeur compatible avec les modèles de la spécification Design Token. Glissez-déposez dans votre outil de design ou importez via un script de build pour un flux entièrement automatisé.
Foire aux questions
Les tokens de couleur sont des variables sémantiques qui représentent les couleurs d'un design system. Au lieu d'utiliser des codes hexadécimaux partout, vous utilisez des noms comme --color-primary ou --color-error-bg. Cela facilite la mise à jour globale des couleurs, l'implémentation du mode sombre et le maintien de la cohérence entre composants. Notre générateur en ligne gratuit de tokens de couleur crée un jeu complet à partir de 7 couleurs de base.
Chaque couleur de base génère 9 variantes : base (la couleur d'origine), light (mélangée au blanc), dark (mélangée au noir), hover (légèrement plus sombre), active (plus sombre pour les états enfoncés), bg (très claire pour les arrière-plans), border (désaturée pour les bordures), text (noir ou blanc pour un contraste lisible) et muted (saturation réduite). Les variantes des modes clair et sombre sont toutes deux générées.
L'adaptation au mode sombre utilise un algorithme d'inversion perceptive qui mappe les valeurs de luminosité du mode clair vers leurs équivalents sombres via une courbe préservant les relations de contraste relatif. La saturation est légèrement réduite en mode sombre car les couleurs très saturées peuvent être inconfortables à lire sur des fonds sombres.
Oui. La variante text de chaque token utilise les calculs de luminance WCAG pour choisir automatiquement entre texte noir et blanc, garantissant un ratio de contraste d'au moins 7:1 par rapport à la couleur de base. Cela satisfait aux exigences WCAG AAA pour le texte normal — sans réglage manuel.
Deux formats : propriétés personnalisées CSS (avec blocs :root et [data-theme="dark"] séparés, prêts à coller dans votre projet) et JSON (format plat clé-valeur compatible avec les modèles de la spécification Design Token et des outils comme Style Dictionary).
Les noms de tokens suivent le modèle cohérent --color-{catégorie}-{variante}. Vous pouvez les renommer après copie via un simple rechercher-remplacer — ou modifier directement la sortie CSS/JSON dans votre code.
Oui, ce générateur de tokens de couleur pour design system est 100 % gratuit, sans inscription, sans offre premium et sans limite d'utilisation. Tout le traitement s'effectue dans votre navigateur.
Les 7 catégories (primaire, secondaire, accent, succès, avertissement, erreur, info) couvrent la plupart des besoins d'un design system. Si vous avez besoin de catégories supplémentaires comme surface, background, text ou border au premier niveau, vous pouvez exécuter l'outil plusieurs fois avec des couleurs de base différentes et combiner les résultats.