CSS Color Level 5 vient d'atteindre le statut Baseline 2026 : Chrome, Firefox, Safari et Edge supportent désormais toutes les nouvelles fonctions couleur sans flags ni préfixes. C'est une évolution discrète mais profonde de la façon dont on gère les couleurs en CSS, et ça résout des problèmes que les développeurs contournaient depuis des années.
oklch() : la fonction couleur que vous devriez utiliser
oklch() est une fonction couleur basée sur l'espace colorimétrique OKLCH, perceptuellement uniforme. Contrairement à hsl() ou rgb(), modifier la luminosité dans oklch() produit des résultats perceptuellement cohérents : 70% de luminosité dans oklch est visuellement la même "luminosité" quelle que soit la teinte.
/* hsl : modifier la luminosité change la perception de la saturation */
.button-hsl {
background: hsl(240deg 50% 50%); /* bleu medium */
hover: hsl(240deg 50% 60%); /* bleu clair, mais... bizarre */
}
/* oklch : perceptuellement prévisible */
.button-oklch {
background: oklch(0.5 0.2 240); /* Luminosité 50%, Chroma 0.2, Hue 240° */
hover: oklch(0.65 0.2 240); /* +15% luminosité, exactement */
}shadcn/ui a basculé vers oklch pour toutes ses variables CSS dans sa version 2.0. Tailwind CSS 4 utilise oklch nativement pour sa palette.
color-mix() : mélanger les couleurs sans JavaScript
color-mix() permet de mélanger deux couleurs directement en CSS, dans n'importe quel espace colorimétrique :
:root {
--primary: oklch(0.6 0.25 240);
--primary-light: color-mix(in oklch, var(--primary) 70%, white);
--primary-dark: color-mix(in oklch, var(--primary) 70%, black);
--primary-muted: color-mix(in oklch, var(--primary) 30%, transparent);
}En une variable de base, vous générez toute une palette cohérente. Plus besoin de JavaScript ou de preprocesseur pour calculer des variantes.
Les relative colors : modifier une couleur à la volée
La syntaxe de couleur relative permet de modifier les composantes d'une couleur existante :
/* Rendre une couleur 20% plus lumineuse */
.accent {
--base: oklch(0.5 0.2 200);
color: oklch(from var(--base) calc(l + 0.2) c h);
}
- oklch() — MDN — MDN, 2026
- Baseline 2026 — web.dev, 2026
- oklch.com : color picker OKLCH — oklch.com, 2026
