Bhinish Dhiman· Mis à jour 5 octobre 2026
Comment créer une palette de couleurs Tailwind personnalisée qui passe le contraste
Traduit de l’original en anglais. Lire l’original
Définissez une couleur de base et un nom, vérifiez les aperçus clair et sombre, puis copiez le bloc @theme pour Tailwind v4 ou la config v3. Sur l'échelle par défaut #0066ff, les paliers 600 à 950 portent du texte courant sur blanc (600 à 5.68:1) et les paliers 50 à 500 sur noir, tandis que le 500 n'atteint que 3.96:1 sur blanc. L'échec habituel est la bordure de champ en 300 : 1.86:1 sur blanc, là où il faut 3:1.
Ajouter une couleur de marque à Tailwind est vite fait. Savoir lesquels de ses onze paliers peuvent servir pour du texte, c’est l’étape qu’on saute généralement, et c’est pourquoi un 500 vif finit si souvent en texte courant. L’outil Tailwind colours construit l’échelle, la prévisualise sur les composants qu’on livre réellement et affiche un ratio mesuré sous chacun d’eux.
Une échelle de couleurs Tailwind est une échelle de onze paliers enregistrée sous un nom, de sorte que des utilitaires comme bg-brand-500 et text-brand-700 existent. Dans Tailwind v4, elle se déclare en CSS, dans un bloc @theme, plutôt que dans une config JavaScript, et la palette par défaut de la v4 est elle-même écrite en OKLCH.
Créer l’échelle
- Définissez la couleur de base. Saisissez un code hex dans Base colour (couleur de base). L’outil s’ouvre sur #0066ff.
- Définissez le nom. Ce que vous saisissez dans Name (nom) devient le milieu de chaque utilitaire : « brand » donne ainsi
bg-brand-500. - Lisez l’échelle. Les paliers 50 à 950, chacun avec son hex ; yours (le vôtre) signale le palier le plus proche de votre couleur de base.
- Basculez entre Light et Dark. Utilisez l’interrupteur Light/Dark à droite des commandes, ou la touche D. Les aperçus se redessinent dans l’autre thème.
- Lisez la ligne sous chaque aperçu. Chacune donne le ratio mesuré, ce qui est mesuré et le seuil. Un carré plein signifie que le test passe ; un carré vide, qu’il échoue.
- Choisissez la sortie et copiez-la. Tailwind v4, Tailwind v3 ou CSS vars, puis Copy. Copy scale dans la barre du bas (ou la touche C) fait la même chose.
- Collez-la. Pour la v4, ajoutez le bloc
@themeau fichier CSS qui importe Tailwind. Pour la v3, placez l’entrée nommée danstheme.extend.colorsde votre config, ce qui conserve la palette par défaut de Tailwind à côté.
Utilisez le sélecteur de sortie, et non Export dans la barre du bas, dont la sortie Tailwind numérote les paliers de 1 à 11 au lieu de 50 à 950.
À quoi ressemble chaque sortie
La sortie v4 écrit chaque palier en OKLCH, la luminosité avec une décimale, la chroma avec trois et la teinte avec une :
@theme {
--color-brand-50: oklch(…);
/* … nine more … */
--color-brand-950: oklch(…);
}La sortie v3 est une entrée colors en hex sous un commentaire // tailwind.config.js. CSS vars donne --brand-50 à --brand-950 dans un bloc :root, sans le préfixe --color- : en v4, elle définit donc des variables mais ne génère aucun utilitaire. Utilisez-la quand l’échelle doit atteindre du code en dehors de Tailwind.
Quels paliers peuvent porter du texte
Voici les chiffres qu’affiche l’outil pour sa base par défaut, #0066ff, mesurés par le code qui dessine les aperçus. Votre teinte les fera un peu bouger ; la tendance reste la même.
| Palier | Hex | Sur blanc | Sur noir | Texte courant (4.5:1) sur |
|---|---|---|---|---|
| 50 | #f1f6ff | 1.08:1 | 19.36:1 | Noir |
| 100 | #e0ebff | 1.20:1 | 17.49:1 | Noir |
| 200 | #c1d8ff | 1.44:1 | 14.53:1 | Noir |
| 300 | #99bfff | 1.86:1 | 11.25:1 | Noir |
| 400 | #659dff | 2.68:1 | 7.82:1 | Noir |
| 500 | #2d79ff | 3.96:1 | 5.29:1 | Noir ; grand texte uniquement sur blanc |
| 600 | #005ce8 | 5.68:1 | 3.69:1 | Blanc ; grand texte uniquement sur noir |
| 700 | #0048b9 | 7.99:1 | 2.62:1 | Blanc |
| 800 | #00358d | 11.08:1 | 1.89:1 | Blanc |
| 900 | #012464 | 14.60:1 | 1.43:1 | Blanc |
| 950 | #011540 | 17.75:1 | 1.18:1 | Blanc |
Le 500 et le 600 sont les deux paliers qui ne fonctionnent que dans un sens, et aucun palier de l’échelle ne porte du texte courant sur les deux fonds. C’est pourquoi un 500 vif utilisé en texte courant sur une page blanche échoue.
Ce que mesurent les aperçus
Chaque aperçu teste une association différente, et le thème sombre ne se contente pas d’inverser le thème clair. Les aperçus clairs reposent sur des panneaux blancs posés sur une page en palier 50 ; les aperçus sombres reposent sur des panneaux en palier 900 posés sur du palier 950.
| Ligne d’aperçu | Paire en thème clair | Paire en thème sombre | Exigence | #0066ff, clair / sombre |
|---|---|---|---|---|
| primary label (libellé principal) | Blanc ou noir, selon le plus contrasté, sur 600 | La même, sur 500 | 4.5:1 | 5.68 / 5.29 |
| secondary label (libellé secondaire) | 800 sur 100 | 100 sur 800 | 4.5:1 | 9.23 / 9.23 |
| subtle badge, 11px (badge discret) | 700 sur 100 | 200 sur 800 | 4.5:1 | 6.65 / 7.67 |
| input border (bordure de champ) | 300 sur blanc | 700 sur 900 | 3:1 | 1.86 / 1.82 |
| alert body text (texte d’alerte) | 700 sur 50 | 300 sur 900 | 4.5:1 | 7.37 / 7.82 |
| table header (en-tête de tableau) | 600 sur 50 | 300 sur 900 | 4.5:1 | 5.23 / 7.82 |
| series on surface (série sur surface) | 600 sur blanc | 600 sur 900 | 3:1 | 5.68 / 2.57 |
La bordure et le graphique en mode sombre
Deux lignes de ce tableau échouent, et aucune n’est une paire de texte.
Le contraste des éléments non textuels est l’exigence WCAG, critère de succès 1.4.11, selon laquelle les parties d’une interface nécessaires pour identifier un contrôle, comme la bordure d’un champ ou un anneau de focus, doivent atteindre 3:1 par rapport à ce qui les entoure. L’aperçu de champ dessine sa bordure en 300 sur blanc : 1.86:1. Même le 400 n’atteint que 2.68:1. Si c’est la bordure qui signale la présence d’un champ, utilisez le 500 ou plus foncé sur un panneau blanc.
Le thème sombre reproduit le problème en miroir. Une bordure en 700 sur un panneau en 900 donne 1.82:1, et une série de graphique en 600 sur ce panneau donne 2.57:1, toutes deux en dessous de 3:1. Sur un panneau en 900, le 500 est le premier palier qui franchit ce seuil, à 3.67:1.
Quand vous écrivez des composants avec la nouvelle échelle, les bordures et les couleurs de graphique méritent donc la même attention que le texte, et en mode sombre elles demandent un palier plus clair que ce que suggèrent les habitudes du thème clair.
Le faire à la main
Tailwind ne génère pas d’échelle à partir d’une couleur ; vous écrivez vous-même les onze lignes. C’est facile à faire, et facile à rater exactement de la manière que montrent les tableaux ci-dessus : si vous le faites à la main, testez donc la bordure en 300 et le libellé en 600 dans le vérificateur de contraste avant toute mise en production. L’outil conserve la base et le nom après le # dans son adresse, partie qu’un navigateur n’envoie pas au serveur : la couleur sur laquelle vous travaillez reste sur votre machine.
Ouvrez Tailwind colours, définissez votre base et lisez la ligne de la bordure de champ avant toute autre chose. Si vous voulez des tokens de rôle, comme une couleur de texte et une couleur de bordure choisies par la mesure, le générateur d’échelles et de tokens construit les mêmes onze paliers et leur attribue des rôles. Pour comprendre pourquoi l’OKLCH a remplacé le HSL pour ce type de travail, consultez OKLCH pour les designers.