Color Token Generator

Pourquoi tout système de design nécessite une échelle de couleur

Une échelle de couleur est l'épine dorsale d'un langage visuel cohérent. Sans elle, designers et développeurs prennent des décisions ad hoc — 'un bleu légèrement plus foncé pour le hover' ou 'une version très claire pour l'arrière-plan de la carte' — qui produisent des dizaines de valeurs hexadécimales presque identiques sans aucune relation systématique. Avec le temps, cela crée un code rempli de valeurs de couleur uniques impossibles à mettre à jour en une seule fois.

Une échelle de 11 niveaux bien construite résout ce problème : les niveaux clairs (50–200) servent pour les surfaces et arrière-plans teintés, les niveaux médians (300–600) portent les éléments interactifs comme les boutons, les liens et les anneaux de focus, et les niveaux sombres (700–950) gèrent le texte et les bordures à fort contraste. Chaque décision remonte à l'échelle, et changer la couleur de marque signifie mettre à jour une valeur de base plutôt que de chercher des centaines de codes hex dans une feuille de style.

La convention d'échelle de couleur de Tailwind

Tailwind CSS a popularisé la convention de nommage numérique à 11 niveaux — 50, 100, 200 jusqu'à 900, 950 — et elle a depuis été adoptée comme standard par Radix UI, shadcn/ui, Material Design 3 et la plupart des écosystèmes de bibliothèques de composants modernes. L'avantage est la prévisibilité : un développeur qui a utilisé l'un de ces systèmes sait immédiatement qu'un token de niveau 500 est la couleur de base médiane, qu'un token de niveau 100 est une teinte très claire et qu'un token de niveau 800 est une nuance sombre pour une utilisation sur des arrière-plans clairs.

Cet outil génère des échelles visuellement compatibles avec les palettes intégrées de Tailwind (bleu, rouge, vert, etc.), facilitant l'ajout d'une couleur de marque personnalisée qui s'intègre naturellement aux valeurs par défaut de Tailwind. Le format d'export Tailwind correspond exactement à ce qu'attend theme.extend.colors dans tailwind.config.js, et l'export Variables CSS est formaté pour le bloc @theme de Tailwind v4.

Comprendre les ratios de contraste WCAG

Le ratio de contraste entre une couleur de texte et son arrière-plan est calculé à partir de leur luminance relative — une mesure de la luminosité apparente de chaque couleur à l'œil humain. La formule WCAG est (L1 + 0.05) / (L2 + 0.05), où L1 est la luminance de la couleur la plus claire et L2 celle de la plus sombre. Le résultat va de 1:1 (couleurs identiques, pas de contraste) à 21:1 (texte noir sur fond blanc, contraste maximum).

WCAG AA exige 4.5:1 pour le texte normal et 3:1 pour le texte large (18pt+). WCAG AAA exige 7:1 pour le texte normal. Dans cet outil, les ratios de contraste texte blanc et texte noir de chaque échantillon sont calculés et affichés sous forme de badges W✓ et B✓. Les niveaux d'échelle médians (400–600) échouent généralement aux deux seuils — ils sont conçus pour les remplissages décoratifs et les accents interactifs, pas pour les arrière-plans de texte.

Espaces de couleur : HSL, OKLCH et leur importance

Les générateurs de palettes traditionnels travaillent en HSL — Teinte, Saturation, Luminosité. HSL est intuitif et bien supporté, mais perceptuellement non uniforme : le même pas numérique de luminosité semble dramatiquement différent selon la teinte. Un pas de 50% à 60% de luminosité semble un grand saut pour le bleu mais un petit pas pour le jaune, parce que l'œil humain perçoit les couleurs différemment à travers le spectre.

OKLCH est un espace de couleur perceptuellement uniforme où des pas numériques égaux de luminosité semblent égaux à l'œil humain quel que soit la teinte. Tailwind CSS v4 est passé à OKLCH en interne pour cette raison. Pour un générateur de palettes, OKLCH produit des échelles où chaque niveau semble genuinement un pas uniforme vers plus clair ou plus sombre — particulièrement précieux pour la conception de palettes accessibles.

Export vers CSS, Tailwind, SCSS, JSON et DTCG

L'export Variables CSS utilise le schéma de nommage --color-N à l'intérieur de :root { }. L'export Tailwind s'insère directement dans theme.extend.colors dans tailwind.config.js — renommez 'color' en votre nom de token (ex. : 'primary' ou 'brand'). L'export SCSS utilise la syntaxe de variable $color-N compatible avec Sass et Less. L'export JSON suit le format de token DTCG W3C et est compatible avec Style Dictionary, Theo, Supernova et tout outil de l'écosystème moderne de pipeline de tokens.

Les quatre formats produisent les mêmes 11 valeurs hex, donc passer de l'un à l'autre après génération ne nécessite aucune modification. Cliquez sur n'importe quel échantillon individuel pour copier sa valeur hex directement dans le presse-papiers — utile quand vous avez besoin d'une nuance spécifique pour un fichier de design Figma, un style inline ponctuel ou une référence de couleur rapide.

Comparaison avec Coolors, Adobe Color et Material Design Color Tool

Coolors.co est un outil de découverte de palettes conçu pour générer des combinaisons aléatoires de 5 couleurs. Il est excellent pour l'inspiration, mais ne produit pas d'échelles de tokens, ne génère pas de configurations Tailwind et n'affiche pas de badges de contraste WCAG par échantillon.

Adobe Color offre la génération d'harmonies de couleurs depuis une roue chromatique et quelques options d'export, mais nécessite un compte Adobe pour enregistrer et exporter des palettes. Il ne génère pas d'échelle de couleurs compatible Tailwind ni de JSON DTCG.

Le Material Design Color Tool de Google produit une échelle de 10 niveaux (sans le niveau 50) et est conçu spécifiquement pour la thématisation Material Design — le résultat ne se mappe pas proprement à Tailwind ou d'autres écosystèmes.

Cet outil génère une échelle complète de 11 niveaux, affiche les badges WCAG W✓/B✓ sur chaque échantillon, exporte vers quatre formats et ne nécessite aucune connexion. Tout fonctionne dans votre navigateur — aucune donnée de couleur n'est envoyée à un serveur.