Construire une palette de couleurs OKLCH pour Tailwind v4 implique deux changements par rapport à l'ancienne méthode : vos nuances vivent dans l'espace colorimétrique OKLCH (pas en hexadécimal), et vos couleurs de marque sont définies en CSS dans un bloc @theme au lieu d'une configuration JavaScript. Faites les deux et vous obtenez une échelle de 50 à 900 où chaque étape semble uniformément espacée, vos tons foncés restent riches sans être boueux, et vos teintes les plus claires ne virent pas au néon délavé. Ce guide parcourt l'ensemble du pipeline, du choix d'une teinte de marque au collage des variables dans @theme.
La plupart des générateurs de palettes vous donnent encore des codes hexadécimaux et s'arrêtent là. Cela fonctionnait pour Tailwind v3. Dans v4, le système de couleurs par défaut a été reconstruit sur OKLCH, donc coller du hexadécimal annule exactement ce qui rend la nouvelle palette équilibrée. Vous verrez ci-dessous pourquoi OKLCH évite le problème classique du « 700 boueux, 100 néon », comment la luminosité, le chroma et la teinte se projettent sur une échelle, et la syntaxe exacte de @theme pour la livrer.
Pourquoi Tailwind v4 est passé à OKLCH#
Tailwind v4 livre toute sa palette par défaut en OKLCH et s'attend à ce que vos couleurs personnalisées suivent le même format. OKLCH signifie Luminosité, Chroma, Teinte, avec un alpha optionnel. C'est un espace colorimétrique perceptuellement uniforme, ce qui signifie qu'un changement du nombre de luminosité produit la même sensation visuelle, quelle que soit la teinte.
Cela semble théorique jusqu'à ce que vous le compariez aux espaces utilisés auparavant. Hex et HSL ne sont pas perceptuellement uniformes. En HSL, une "luminosité à 50%" sur du jaune paraît beaucoup plus claire que sur du bleu, donc une palette construite en augmentant uniformément la luminosité HSL devient déséquilibrée. Certaines nuances semblent trop sombres, d'autres trop pâles, et rien ne s'aligne entre les couleurs.
Idée clé : OKLCH dissocie la luminosité perçue d'une couleur de sa teinte. En augmentant uniformément la luminosité, les nuances semblent espacées de manière égale, que la couleur soit citron ou marine.
Ce que OKLCH corrige en pratique#
Deux problèmes disparaissent lorsque vous travaillez en OKLCH :
- Les tons foncés boueux : En HSL, assombrir une couleur saturée la tire souvent vers le gris ou le marron. OKLCH permet de réduire la luminosité tout en maintenant le chroma, de sorte qu'une nuance 700 ou 800 reste une version riche et reconnaissable de la couleur de la marque, au lieu d'un magma.
- Les néons : Les teintes HSL proches du blanc peuvent voir leur saturation apparente monter en flèche et paraître radioactives. Les teintes OKLCH restent douces et contrôlées car le chroma est géré indépendamment de la luminosité.
Le bonus de la gamme étendue#
OKLCH peut également décrire des couleurs en dehors de l'ancienne gamme sRGB. Sur les écrans modernes prenant en charge la gamme P3 (la plupart des téléphones et ordinateurs portables récents), les couleurs de Tailwind v4 s'affichent plus vives que leurs équivalents sRGB, puis se dégradent gracieusement sur les écrans plus anciens. Vous obtenez des couleurs plus riches gratuitement sur du matériel performant, sans rien casser sur le reste. C'est pourquoi les couleurs de la gamme P3 sont importantes pour le travail de marque en 2026 : le même CSS est plus percutant là où c'est possible et sûr partout ailleurs.
Comment la clarté, le chroma et la teinte se traduisent sur une échelle de 50 à 900#
Une échelle de couleurs Tailwind va de 50 (teinte la plus claire) à 950 (nuance la plus foncée), la couleur de la marque se situant généralement à 500. L'astuce pour une échelle OKLCH propre est de comprendre quel canal vous faites varier à chaque étape, et lequel vous laissez principalement inchangé.
Voici le modèle mental :
| Canal | Ce qu'il contrôle | Comment il évolue de 50 à 950 |
|---|---|---|
| Clarté (L) | La luminosité de la couleur, de 0 à 1 | Maximale à 50 (environ 0,97), minimale à 950 (environ 0,25). C'est ce qui fait l'essentiel du travail. |
| Chroma (C) | L'intensité / saturation de la couleur | Minimale aux extrêmes (teintes claires et foncées), maximale dans la zone médiane (400-600). |
| Teinte (H) | L'angle de couleur réel, de 0 à 360 | Reste presque constante. De petits décalages ajoutent du réalisme mais sont facultatifs. |
La règle la plus importante : la clarté doit augmenter par incréments à peu près égaux. Si votre 500 se situe autour de L 0,65, votre échelle pourrait ressembler à 0,97, 0,94, 0,89, 0,82, 0,74, 0,65, 0,55, 0,45, 0,37, 0,30 de 50 à 900. Un espacement régulier en L est ce qui donne aux échantillons l'impression d'un véritable dégradé plutôt que d'échantillons aléatoires.
Le chroma est une courbe, pas une ligne#
L'erreur que les gens commettent est de maintenir le chroma constant sur toute l'échelle. Cela produit des teintes claires délavées et des nuances foncées sursaturées. Les palettes agréables et réalistes utilisent une arche de chroma :
- Teintes claires (50-200) : chroma faible. Une teinte proche du blanc avec un chroma élevé semble artificielle, donc réduisez-le.
- Cœur (400-600) : chroma maximal. C'est là que la couleur de la marque est la plus vive.
- Nuances foncées (700-950) : le chroma diminue à nouveau, en partie parce que les couleurs profondes ne peuvent pas maintenir un chroma élevé sans sortir de la gamme.
Imaginez le chroma augmentant de la teinte la plus claire jusqu'à un pic autour de 400-500, puis redescendant doucement vers la nuance la plus foncée. Cette arche fait la différence entre une échelle qui semble conçue et une qui semble générée.
Teinte : laissez-la tranquille, la plupart du temps#
Pour une échelle moderne et propre, gardez la teinte constante sur les onze étapes. Si vous voulez plus de raffinement, vous pouvez décaler la teinte de quelques degrés, une technique appelée décalage de teinte, pour imiter le comportement des pigments réels (les ombres deviennent plus froides, les lumières plus chaudes). C'est facultatif et facile à exagérer, alors commencez par une teinte constante et n'ajoutez des décalages subtils que si la version plate semble sans vie.
Comment créer une palette OKLCH pour Tailwind v4#
Vous pouvez calculer cela à la main, mais c'est fastidieux et il est facile de se tromper dans la courbe de chroma. Le chemin le plus rapide et fiable est de générer l'échelle à partir d'une seule couleur de marque, puis de coller les valeurs OKLCH dans votre feuille de style. Voici la procédure complète.
Étape 1 : Choisissez votre couleur de marque comme point d'ancrage 500#
Commencez par une couleur, celle qui représente votre marque, et traitez-la comme le niveau 500. Ne partez pas de l'extrémité la plus claire ou la plus foncée ; le ton moyen est l'ancrage dont tout le reste découle. Si vous n'avez qu'un code hexadécimal provenant d'un logo, c'est très bien, vous le convertirez. Ouvrez le générateur de palette de couleurs gratuit, insérez votre hex de marque ou choisissez une teinte, et laissez-le devenir votre 500.
Étape 2 : Générez l'échelle complète de 50 à 900 en OKLCH#
À partir de l'ancrage 500, générez les niveaux environnants. Un bon générateur effectue le pas de luminosité et l'arc de chroma pour vous, afin d'obtenir des teintes qui restent douces et des ombres qui restent riches. Confirmez que la sortie est en OKLCH, pas en hexadécimal. Vous voulez des valeurs qui ressemblent à oklch(0.65 0.18 250), trois nombres pour la luminosité, la chroma et la teinte. Si un outil ne vous donne que du hex, il produit une sortie Tailwind v3, et vous perdrez l'avantage.
Étape 3 : Vérifiez visuellement l'échelle#
Regardez les échantillons dans l'ordre. Deux tests rapides :
- Les niveaux semblent-ils espacés uniformément, sans saut brusque où une nuance semble beaucoup plus proche de sa voisine que les autres ?
- Les foncés sont-ils clairement votre couleur de marque, et les teintes sont-elles douces plutôt que néon ?
Si un niveau semble incorrect, il s'agit presque toujours d'un problème d'espacement de la luminosité ou d'une valeur de chroma qui n'a pas diminué. Ajustez ce niveau plutôt que de reconstruire toute l'échelle.
Étape 4 : Convertissez chaque niveau en variable CSS#
Tailwind v4 lit les couleurs à partir des propriétés personnalisées CSS. Nommez-les avec la convention --color-brand-50 à --color-brand-950. Le préfixe --color- indique à Tailwind de générer les utilitaires correspondants. Chaque variable contient une valeur OKLCH :
:root {
--color-brand-50: oklch(0.97 0.02 250);
--color-brand-100: oklch(0.94 0.04 250);
--color-brand-200: oklch(0.89 0.07 250);
--color-brand-300: oklch(0.82 0.11 250);
--color-brand-400: oklch(0.74 0.15 250);
--color-brand-500: oklch(0.65 0.18 250);
--color-brand-600: oklch(0.55 0.17 250);
--color-brand-700: oklch(0.45 0.14 250);
--color-brand-800: oklch(0.37 0.10 250);
--color-brand-900: oklch(0.30 0.07 250);
--color-brand-950: oklch(0.22 0.04 250);
}
Remarquez la colonne de chroma : elle monte à 0.18 à 500, puis diminue dans les deux directions. C'est l'arc en action.
Étape 5 : Intégrez l'échelle dans le bloc @theme#
C'est la partie vraiment nouvelle dans v4. Au lieu de modifier tailwind.config.js, vous déclarez les couleurs du thème en CSS dans un bloc @theme, directement dans votre feuille de style principale :
@import "tailwindcss";
@theme {
--color-brand-50: oklch(0.97 0.02 250);
--color-brand-100: oklch(0.94 0.04 250);
--color-brand-200: oklch(0.89 0.07 250);
--color-brand-300: oklch(0.82 0.11 250);
--color-brand-400: oklch(0.74 0.15 250);
--color-brand-500: oklch(0.65 0.18 250);
--color-brand-600: oklch(0.55 0.17 250);
--color-brand-700: oklch(0.45 0.14 250);
--color-brand-800: oklch(0.37 0.10 250);
--color-brand-900: oklch(0.30 0.07 250);
--color-brand-950: oklch(0.22 0.04 250);
}
Comme les noms commencent par --color-, Tailwind génère automatiquement les utilitaires : bg-brand-500, text-brand-700, border-brand-200, etc., ainsi que la valeur brand correspondante en syntaxe arbitraire. Pas de configuration JS, pas de plugin, pas de redémarrage nécessaire au-delà de la reconstruction normale du développement.
Attention : les variables qui définissent vos tokens de design doivent se trouver dans
@theme, pas dans un bloc:rootsimple, si vous voulez que Tailwind génère des utilitaires à partir d'elles. Une variable:rootest juste une variable CSS ordinaire que Tailwind ignore. Utilisez@themepour les tokens,:rootuniquement pour les valeurs d'exécution ponctuelles.
Étape 6 : Utilisez les utilitaires et vérifiez sur un écran réel#
Appliquez les classes et vérifiez le résultat sur un appareil réel, idéalement un avec un écran P3 et un sans. Les couleurs doivent être vives sur l'écran à large gamme et correctes (non cassées) sur l'écran sRGB. Si vous prenez en charge le mode sombre, vous pouvez redéfinir les mêmes variables dans un @theme limité à votre sélecteur sombre, en échangeant quelle extrémité de l'échelle correspond à vos surfaces.
OKLCH vs Hex : Ce qui change vraiment dans votre flux de travail#
Pour les développeurs qui viennent de la v3, le changement peut sembler une formalité supplémentaire. Ce n'est pas le cas, une fois que vous en voyez les bénéfices. Voici le vrai avant-après.
| Aspect | Tailwind v3 (hex/HSL) | Tailwind v4 (OKLCH) |
|---|---|---|
| Où vivent les couleurs | tailwind.config.js (JavaScript) | Bloc @theme en CSS |
| Format de couleur | Hex ou HSL | OKLCH (L, C, H) |
| Uniformité de l'échelle | Réglage manuel, souvent irrégulier | Les paliers de luminosité sont équilibrés |
| Nuances sombres | Tendance à devenir boueuses | Restent riches à faible luminosité |
| Large gamut | sRGB uniquement | Gamut P3 sur les écrans compatibles |
| Modifier une nuance | Recalculer le hex à la main | Ajuster un nombre (L, C ou H) |
Le gain quotidien réside dans la dernière ligne. Vous voulez un 600 un peu plus vif ? Augmentez sa chroma de 0,02. Vous voulez toute l'échelle un peu plus claire ? Ajoutez 0,02 à chaque valeur de luminosité. Parce que les canaux sont indépendants et perceptuels, de petites modifications numériques produisent des changements visuels prévisibles, au lieu des essais-erreurs avec le hex.
Quand vous avez encore besoin du hex#
Certaines destinations ne parlent pas encore OKLCH : certains clients email, des outils de design anciens, certaines plateformes natives. Pour celles-ci, exportez un repli hex en parallèle de votre thème OKLCH. Tailwind v4 gère lui-même le repli navigateur automatiquement pour les navigateurs modernes, mais si vous transmettez des couleurs à une surface non-CSS, conservez une feuille hex convertie. Un bon générateur vous donne les deux représentations à partir de la même couleur source, pour qu'elles ne dérivent jamais.
Assemblage avec d'autres jetons de thème#
Une palette est rarement livrée seule. Une fois votre échelle de marque dans @theme, le même motif s'étend au reste de vos variables de couleurs de thème : neutres, couleurs sémantiques (succès, avertissement, danger) et surfaces. Construisez chacune comme sa propre échelle OKLCH avec le même rythme de luminosité, et l'ensemble de votre système reste visuellement cohérent car chaque couleur partage le même espacement perceptif.
Si votre design utilise aussi des dégradés ou des effets de calque, définissez-les à partir des mêmes jetons OKLCH pour que les points de fin du dégradé correspondent exactement à votre palette. Un moyen rapide de prototyper des arrêts de dégradé alignés sur votre échelle de marque est le générateur de dégradé CSS, qui permet de prévisualiser les mélanges avant de les affecter à un jeton. Et lorsque vous devez livrer le résultat sous forme de marque ou de nuancier, le convertisseur SVG en PNG transforme un export vectoriel en fichier raster pour les diapositives ou les réseaux sociaux.
Pour l'aspect conceptuel du choix des teintes de base avant même d'ouvrir un générateur, le guide sur un générateur de palette de couleurs pour le design de marque couvre les règles d'harmonie et le contraste d'accessibilité, qui se marient naturellement avec les mécanismes OKLCH ici.
Conclusion#
Une palette de couleurs OKLCH pour Tailwind v4 n'est pas qu'un simple changement de format ; c'est une meilleure façon de penser la couleur. Ancrez votre couleur de marque à 500, augmentez la luminosité uniformément de 50 à 950, faites varier le chroma en arc de cercle (plus élevé au milieu, plus bas aux extrémités), maintenez la teinte quasi constante, puis déclarez toute l'échelle comme variables --color-brand-* dans un bloc @theme. Faites cela et vous obtiendrez des nuances équilibrées, vives, non boueuses, avec en prime la richesse du P3 sur les écrans modernes. Générez l'échelle, collez-la dans @theme, et déployez.
Foire aux questions#
Qu'est-ce que l'OKLCH et pourquoi Tailwind v4 l'utilise-t-il ? L'OKLCH est un espace colorimétrique perceptuellement uniforme défini par la Luminosité, le Chroma et la Teinte. Tailwind v4 l'a adopté car des paliers de luminosité réguliers produisent des nuances qui semblent uniformément espacées à l'œil humain, ce que le hex et le HSL ne peuvent pas faire. Le résultat est des échelles 50-950 équilibrées avec des tons foncés riches et des teintes douces, au lieu d'extrêmes boueux ou néon.
Où définir des couleurs personnalisées dans Tailwind v4 ?
Dans un bloc @theme de votre CSS, pas dans un fichier de configuration JavaScript. Déclarez chaque nuance comme une propriété personnalisée telle que --color-brand-500: oklch(0.65 0.18 250);. Comme les noms commencent par --color-, Tailwind génère automatiquement des utilitaires comme bg-brand-500 et text-brand-700. Les variables :root simples ne génèrent pas d'utilitaires, utilisez donc @theme pour les jetons de design.
Comment la luminosité, le chroma et la teinte correspondent-ils à une échelle 50-900 ? La luminosité fait l'essentiel du travail : la plus élevée à 50, la plus basse à 950, par paliers réguliers. Le chroma suit une courbe en arc, faible aux extrêmes des teintes et des tons foncés, et culminant autour de 400-600 où la couleur est la plus vive. La teinte reste presque constante sur toute l'échelle, avec seulement de petits ajustements optionnels pour plus de réalisme.
Pourquoi mes nuances foncées en hex semblent-elles boueuses alors que celles en OKLCH ne le sont pas ? Dans les workflows HSL et hex, assombrir une couleur saturée la tire souvent vers le gris ou le marron car la luminosité et la saturation sont liées. L'OKLCH les sépare, vous pouvez donc baisser la luminosité pour une nuance 700 ou 800 tout en maintenant le chroma, gardant la couleur comme une version riche et reconnaissable de votre marque au lieu d'une boue.
Ai-je encore besoin des valeurs hex avec Tailwind v4 ? Pour le web, non : les navigateurs modernes lisent l'OKLCH et Tailwind gère les solutions de repli. Vous pouvez encore avoir besoin du hex pour des destinations qui ne supportent pas l'OKLCH, comme certains clients email, des outils de design anciens ou des plateformes natives. Générez les deux à partir de la même couleur source pour que les représentations ne divergent jamais.
Puis-je générer une échelle OKLCH Tailwind automatiquement ?
Oui. Un générateur de palette qui produit de l'OKLCH gérera pour vous les paliers de luminosité réguliers et la courbe en arc du chroma à partir d'une seule couleur de marque, puis vous donnera les lignes --color-brand-* à coller dans @theme. C'est plus rapide et plus fiable que de calculer chaque étape à la main, ce qui est facile à se tromper sur la courbe du chroma.
