Comment transformer une couleur de marque en design tokens, de 50 à 950

La méthode derrière une échelle de tokens (garder la teinte, faire varier la luminosité, attribuer des fonctions aux nuances d’après des mesures) est exposée dans Comment construire une palette accessible à partir d’une seule couleur de marque. Ce guide en est la partie mécanique : ce que le générateur d’échelle et de tokens fait du hex que vous lui donnez, là où le résultat surprend, et comment en tirer deux types de tokens sans les confondre.

Un design token est une valeur nommée que les composants utilisent à la place d’une couleur brute. L’outil vous en fournit deux types. Un token de nuance, comme --brand-600, désigne une position sur l’échelle. Un token de rôle, comme --brand-text, désigne une fonction, et dans chaque thème il pointe vers la nuance qui remplit cette fonction.

Construire l’échelle et ses rôles

1. Saisissez la couleur de marque. Tapez-la dans le champ « Brand colour » (couleur de marque) ou utilisez l’échantillon à côté. Le champ accepte un code hex, mais aussi des valeurs rgb(), hsl() ou oklch().
2. Nommez l’échelle. « Token name » (nom du token) vaut brand au départ. Le nom est mis en minuscules, et tout ce qui n’est ni lettre, ni chiffre, ni trait d’union devient un trait d’union : « Ocean Blue » donne ainsi --ocean-blue-500.
3. Lisez la bande. Onze échantillons, de 50 à 950. Celui marqué « yours » (la vôtre) est la nuance dont la luminosité cible est la plus proche de celle de votre couleur.
4. Lisez les cartes Light theme et Dark theme (thème clair et thème sombre). Chacune liste quatre rôles avec la nuance choisie, l’usage du rôle et le rapport mesuré.
5. Appuyez sur Copy roles dans la barre du bas. Cela copie les tokens de rôle des deux thèmes sous forme de propriétés personnalisées CSS.
6. Copiez les nuances depuis le panneau de code. Choisissez CSS, Tailwind ou JSON au-dessus et appuyez sur Copy.
7. Appuyez sur Share si un développeur a besoin de la même échelle. Le lien contient la couleur et le nom du token, et reconstruit donc exactement cette échelle.

Les onze cibles sont fixes

L’outil ne retient que deux choses de votre couleur : sa teinte et sa chroma. La luminosité vient d’une table fixe, identique pour toutes les marques, et la chroma est ajustée à chaque nuance pour que les extrémités pâle et foncée restent affichables. Lorsqu’une nuance ne peut toujours pas afficher cette chroma à l’écran, elle est réduite davantage, sans toucher à la teinte ni à la luminosité.

Nuance	Luminosité OKLCH	Part de votre chroma
50	0.972	14%
100	0.938	26%
200	0.878	46%
300	0.800	68%
400	0.702	88%
500	0.608	100%
600	0.524	96%
700	0.442	84%
800	0.362	68%
900	0.286	50%
950	0.212	36%

L’espacement n’est pas régulier. Il est le plus serré du côté pâle, où 0.034 sépare 50 de 100, contre 0.098 entre 300 et 400 : les teintes les plus claires sont donc bien plus rapprochées que les tons moyens.

Votre hex exact n’est pas dans l’échelle

C’est là que se trouve la surprise. Comme la luminosité vient de la table, votre couleur n’apparaît dans l’échelle que si sa luminosité tombe exactement sur une cible. Sinon, la nuance marquée « yours » est une voisine construite à la luminosité cible, souvent avec une part différente de votre chroma.

L’outil s’ouvre sur #2563eb, dont la luminosité OKLCH est de 54.6%. La cible la plus proche est 600, à 0.524 (à 0.022, contre 0.062 pour 500) : 600 est donc marquée « yours » et le bouton de la barre indique « Base is 600 ». Cette nuance est construite à 0.524 avec 96% de la chroma ; elle est proche de #2563eb, mais ce n’est pas #2563eb.

Appuyer sur ce bouton remplace la couleur saisie par la valeur que l’échelle donne à cette nuance. Ne le faites que si vous comptez adopter la version de l’échelle comme couleur de marque. Si le hex de la marque doit figurer tel quel dans le code, gardez-le comme token à part, à côté de l’échelle, plutôt que de modifier une nuance.

Comment un rôle choisit sa nuance

Chaque rôle a une exigence, et l’outil parcourt l’échelle depuis l’extrémité du fond jusqu’à trouver une nuance qui la satisfait. Sur la carte claire, le parcours commence à 50 et va vers 950, en mesurant chaque nuance contre le blanc ; sur la carte sombre, il commence à 950 et va vers 50, en mesurant contre le noir. La première nuance qui passe est retenue, c’est-à-dire la moins extrême qui satisfait encore l’exigence.

Rôle	Usage indiqué par l’outil	Exigence	Thème clair	Thème sombre
text	Texte courant sur le fond de la page	4.5:1	Première nuance depuis 50 qui l’atteint sur blanc	Première nuance depuis 950 qui l’atteint sur noir
text-large	Titres de 24px et plus	3:1	Idem, à 3:1	Idem, à 3:1
border	Bordures de champs et autres contrôles qui doivent être repérables	3:1	Idem, à 3:1	Idem, à 3:1
surface	Blocs de fond teintés	Aucune	Nuance 50	Nuance 950

Deux conséquences en découlent. Text-large et border partagent un seuil et une recherche : ils tombent donc toujours sur la même nuance. Et le rôle border tombe sur une nuance plus foncée que beaucoup ne s’y attendent. Pour une échelle neutre, où la luminosité OKLCH est la racine cubique de la luminance relative, la nuance 500 donne 1.05 ÷ (0.608³ + 0.05) ≈ 3.8:1 sur blanc et la nuance 400 donne 1.05 ÷ (0.702³ + 0.05) ≈ 2.7:1. Une bordure qui indique où se trouve un champ, et qui doit donc atteindre 3:1, se situe à 500 ou plus foncé sur blanc. Un séparateur purement décoratif n’a aucune exigence et peut être aussi pâle que vous le voulez.

Si aucune nuance d’une échelle n’atteignait le rapport d’un rôle, Copy roles écrirait cette ligne sous forme de commentaire le signalant, plutôt que d’omettre le rôle sans rien dire.

Relier les tokens de rôle aux tokens de nuance

Copy roles écrit des valeurs hex : un bloc :root pour le thème clair et un second bloc dans une media query prefers-color-scheme: dark. Le panneau de code écrit les tokens de nuance : CSS donne --brand-50 à --brand-950, Tailwind donne un objet colors en hex pour une configuration JavaScript, et JSON imbrique les onze nuances sous le nom du token.

Pour que les deux restent synchronisés quand la couleur de marque change, collez les tokens de nuance, puis faites pointer chaque rôle vers la nuance indiquée sur sa carte au lieu d’un hex copié :

:root {
  --brand-text: var(--brand-600); /* the step the Light theme card chose */
}

Si votre site change de thème avec une classe ou un attribut plutôt qu’avec le réglage du système, placez le bloc sombre sous ce sélecteur.

Pour les nuances, utilisez le panneau de code plutôt que le bouton Export de la barre du bas. Export est commun à tous les outils de couleur et nomme les couleurs par position, de brand-1 à brand-11, et non par nuance.

Autres méthodes

Aucune méthode intégrée à macOS, Windows ou iPhone ne permet de construire une échelle de tokens, et aucune solution en ligne de commande ne figure parmi celles que ces guides garantissent. À la main, la méthode du guide précédent fonctionne avec n’importe quel sélecteur de couleur qui affiche l’OKLCH et un vérificateur de contraste pour mesurer chaque nuance sur chaque fond.

Vérifier que rien n’est envoyé

Aucun fichier n’entre en jeu, et la couleur comme le nom du token sont conservés après le # dans la barre d’adresse, partie que les navigateurs n’envoient pas au serveur. Avec les DevTools ouverts sur le panneau Réseau, changez plusieurs fois la couleur de marque et observez : rien de ce qui part ne la contient.

Ouvrez le générateur d’échelle et de tokens avec le hex de votre marque et lisez les deux cartes de rôles avant les échantillons. Si vous travaillez avec Tailwind v4, l’outil Tailwind colours construit les mêmes onze nuances et les exporte sous forme de bloc @theme.