Logo Cinquin Andy Signature

Tailwind CSS 4.0: Migration to OKLCH

Développeur Freelance - Logo

The sites and the associated resources.

Tailwind CSS 4.0: Migration to OKLCH

Posted on  - August 28, 2025 by Andy Cinquin

Tailwind CSSOKLCHHSL

En décembre 2024, Tailwind CSS 4.0 a été publié avec un changement majeur : l'abandon complet d'HSL au profit d'OKLCH pour toute leur palette de couleurs. Cette migration n'est pas juste une mode passagère - elle résout des problèmes techniques réels qui handicapaient HSL depuis des décennies.

Les problèmes concrets d'HSL

1. Luminosité perceptuelle incohérente

HSL prétend que cette couleur jaune hsl(60 100% 50%) et cette couleur bleue hsl(240 100% 50%) ont la même "luminosité" à 50%. C'est faux.
À l'œil nu, le jaune HSL à 50% de luminosité apparaît beaucoup plus brillant que le bleu HSL à 50%. Cette incohérence vient du fait qu'HSL utilise un espace colorimétrique cylindrique artificiel qui déforme la réalité de la perception humaine.
Preuve chiffrée : En valeurs de contraste WCAG, le jaune hsl(60 100% 50%) a un ratio de contraste de 1.07:1 avec le blanc, tandis que le bleu hsl(240 100% 50%) a un ratio de 4.59:1. Pourtant, HSL dit qu'ils ont la même "luminosité".

2. Dégradés avec zones grises mortes

Les dégradés HSL passent souvent par une zone grise terne au milieu. Par exemple, un dégradé de rouge hsl(0 100% 50%) vers cyan hsl(180 100% 50%) passe par un gris boueux au centre.
Pourquoi ? HSL force toutes les teintes à avoir la même plage de saturation (0-100%), ce qui déforme l'espace colorimétrique et crée ces zones mortes.

3. Manipulation de couleurs imprévisible

Quand vous modifiez la luminosité HSL d'une couleur, vous obtenez souvent des résultats visuellement incohérents. Augmenter la luminosité de 20% sur du rouge ne produit pas le même changement perceptuel que sur du bleu.

OKLCH : Les faits techniques

OKLCH (OK Lightness Chroma Hue) est basé sur l'espace colorimétrique Oklab développé par Björn Ottosson en 2020. Il corrige mathématiquement les défauts d'HSL.

Structure technique

  • L (Lightness) : 0 à 100% - luminosité perceptuelle réelle
  • C (Chroma) : 0 à ~0.4 - intensité/saturation (pas de pourcentage)
  • H (Hue) : 0 à 360° - teinte sur la roue des couleurs
Exemple concret :
/* HSL - luminosité trompeuse */
color: hsl(60 100% 50%);   /* Jaune qui semble très brillant */
color: hsl(240 100% 50%);  /* Bleu qui semble sombre */

/* OKLCH - luminosité perceptuelle correcte */
color: oklch(0.85 0.2 100);   /* Jaune à luminosité perceptuelle 85% */
color: oklch(0.55 0.3 270);   /* Bleu à luminosité perceptuelle 55% */

Avantages mesurables

1. Uniformité perceptuelle prouvée
Dans OKLCH, deux couleurs avec la même valeur L ont réellement la même luminosité perçue. oklch(0.7 0.15 60) (jaune) et oklch(0.7 0.15 240) (bleu) apparaissent avec la même brillance à l'œil.
2. Gamut P3 étendu
OKLCH peut représenter 50% de couleurs en plus que l'espace sRGB d'HSL. Ceci permet des couleurs plus vibrantes sur les écrans modernes (iPhone depuis 2016, MacBook Pro depuis 2021).
3. Dégradés fluides
Les dégradés OKLCH évitent les zones grises mortes en suivant les courbes naturelles de la perception humaine.

La migration Tailwind CSS 4.0 : les faits

Ce qui a vraiment changé

Tailwind n'a pas "converti" les couleurs HSL vers OKLCH. Ils ont recréé entièrement la palette par défaut en OKLCH pour maintenir l'équilibre visuel.
Avant (v3.x) :
--color-blue-500: rgb(59 130 246); /* #3b82f6 */
Après (v4.0) :
--color-blue-500: oklch(0.647 0.162 252.2);

Configuration moderne

@import "tailwindcss";
@theme {
  --color-primary-50: oklch(0.99 0.02 210);
  --color-primary-500: oklch(0.64 0.18 210);
  --color-primary-900: oklch(0.25 0.12 210);
}

Compatibilité navigateurs

Support natif :
  • Chrome 111+ (Mars 2023)
  • Firefox 113+ (Mai 2023)
  • Safari 15.4+ (Mars 2022)
  • Edge 111+ (Mars 2023)
Couverture globale : 93.1% des navigateurs selon Can I Use (Janvier 2025).

Rétrocompatibilité

Important : Vos projets Tailwind v3 continuent de fonctionner. La migration v3→v4 ne casse pas le code existant car Tailwind génère automatiquement les fallbacks sRGB.

Impact pratique concret

1. Accessibilité améliorée

OKLCH permet un calcul précis du contraste. Exemple :
/* Texte toujours lisible */
color: oklch(0.2 0.1 210);  /* Texte sombre */
background: oklch(0.95 0.02 210); /* Fond clair */
/* Ratio de contraste : 12.5:1 (WCAG AAA) */

2. Palettes cohérentes

Créer des variations de couleur devient prévisible :
--color-base: oklch(0.6 0.15 250);
--color-light: oklch(0.8 0.15 250);  /* +20% luminosité */
--color-dark: oklch(0.4 0.15 250);   /* -20% luminosité */
Les trois couleurs ont visuellement la même relation de luminosité.

3. Interpolation de dégradés

Tailwind 4.0 permet de spécifier l'interpolation :
/* Dégradé OKLCH fluide */
background: linear-gradient(in oklch, red, blue);

/* Dégradé sRGB (ancien comportement) */
background: linear-gradient(in srgb, red, blue);

Limites et considérations

1. Courbe d'apprentissage

Les valeurs OKLCH ne correspondent pas aux habitudes HSL :
  • Chroma maximal : ~0.37 (pas 100%)
  • Angles de teinte décalés (rouge = ~30° au lieu de 0°)

2. Outils de design

Problème actuel : Figma, Sketch, et Adobe n'ont pas encore de support natif OKLCH. Il faut utiliser des plugins tiers.
Solution temporaire : Utilisez oklch.com pour la conversion et validation.

3. Moniteurs sRGB

La majorité des moniteurs grand public restent limités au gamut sRGB. Les couleurs P3 étendues ne sont visibles que sur :
  • MacBook Pro 16" (2021+)
  • iMac 24" (2021+)
  • iPhone (2016+)
  • Moniteurs professionnels

Conclusion : un choix technique justifié

Le passage d'HSL vers OKLCH dans Tailwind 4.0 n'est pas une lubie technique. Il résout des problèmes réels :
  1. Contraste prévisible pour l'accessibilité
  2. Dégradés sans zones grises mortes
  3. Couleurs plus vives sur les écrans modernes
  4. Manipulation cohérente des couleurs



🚀 Thanks for reading!
If you enjoyed this article, feel free to share it around.

💡 Got an idea? Let's talk !

DEVELOP YOUR PROJECTS TOGETHER

An idea, a project? I'm here to answer your questions and help you.
I'd be delighted to discuss your project with you!