OKLCH et la couleur CSS moderne : le guide pratique

OKLCH décrit la couleur avec trois valeurs perceptuelles — luminosité, chroma, teinte — où des nombres égaux signifient une apparence égale. Cette seule propriété transforme le travail de palette, qui passe de la correction manuelle au calcul : des rampes régulières, un contraste prévisible, des thèmes sombres dérivés plutôt que rechoisis. Ce hub rassemble nos guides sur le modèle de couleur et sur ce qu’il change en pratique ; la version en une image, c’est une rampe aux pas véritablement réguliers.

Le problème qu’il résout

Les modèles plus anciens comme HSL décrivent comment les nombres RGB se combinent, pas comment les couleurs apparaissent. Le résultat est familier à quiconque a déjà généré une palette : des pas qui s’entassent au milieu, des teintes qui dérivent, une colonne de la palette qui passe le contraste tandis que sa voisine échoue à la « même » luminosité. Quand la luminosité veut dire ce qu’elle annonce, ces problèmes cessent d’être de l’artisanat et deviennent de l’arithmétique.

OKLCH vs HSL démontre le mensonge de la luminosité avec des paires de couleurs concrètes, et Qu’est-ce que l’uniformité perceptuelle ? explique la propriété sous-jacente : une distance numérique égale signifie une différence visible égale. Qu’est-ce qu’un JND ajoute la mesure qui transforme « ces deux-là paraissent identiques » en une affirmation vérifiable.

Ce qui change en pratique

Avec un modèle perceptuel en dessous, une palette devient un ensemble de courbes plutôt qu’un ensemble de choix : une courbe de luminosité place les pas, un profil de chroma façonne l’endroit où la saturation culmine, et la même mécanique dérive les thèmes sombres et vérifie le contraste. Vous écrivez rarement des valeurs oklch() à la main — le modèle est le moteur sous la palette, et les valeurs réapparaissent dans les design tokens générés et dans le CSS quand vous devez raisonner sur une couleur.

C’est ce rôle de moteur qu’en fait Scale Composer : une seule échelle pilote ensemble la couleur, la typographie et la grille, et le versant couleur est calculé en OKLCH pour que les rampes sortent régulières sans correction teinte par teinte. Cette façon de travailler fondée sur les courbes a son propre hub — les échelles de couleur traitent les courbes de luminosité et les profils de chroma comme des décisions de conception à part entière — et le hub mode sombre couvre le versant dérivation : un thème sombre calculé en ajustant la luminosité et le chroma plutôt qu’en inversant quoi que ce soit.

Les gamuts : le bémol honnête

Toutes les combinaisons luminosité-chroma-teinte n’existent pas sur un écran. Le chroma a un plafond qui dépend de la luminosité et de la teinte, et les écrans P3 à gamut plus large le relèvent. Une bonne génération de palette respecte ce plafond en gardant une marge de sécurité au lieu de buter contre lui — plusieurs guides ci-dessous expliquent ce que cela signifie pour les accents de marque et l’imagerie. sRGB vs Display-P3 cartographie les deux gamuts et indique où en sont réellement les écrans à gamut large aujourd’hui, et L’écrêtage de gamut montre ce qui se passe quand une couleur générée dépasse le plafond. Le contraste est l’autre frontière stricte qu’une palette générée doit respecter ; le hub contraste explique comment le vérifier.

Par où commencer la lecture

Qu’est-ce qu’OKLCH ? est l’introduction de fond — commencez par là si les trois axes vous sont nouveaux, puis prenez Qu’est-ce que le chroma ? pour le seul axe sans équivalent dans le langage courant. Côté implémentation, La syntaxe CSS oklch() explique comment écrire les valeurs, Convertir du hex en OKLCH explique comment faire entrer et sortir une palette existante, et La prise en charge d’oklch() par les navigateurs tranche la question de savoir si vous pouvez l’expédier sans étape de compilation (vous le pouvez, nativement, dans tous les principaux navigateurs). Deux guides appliquent ensuite le modèle à des problèmes qui semblent sans rapport jusqu’à ce que le modèle les révèle : Pourquoi vos gris ne sont pas vraiment neutres sur le chroma résiduel qui se cache dans la plupart des échelles de gris, et Les rampes de couleur doivent-elles décaler la teinte ? sur les cas où une dérive de teinte est un bug et ceux où c’est une décision.

Guides de ce hub

• Convertir le hex en OKLCH (et inversement)

  La conversion du hex vers OKLCH est sans perte ; le retour peut écrêter. Comment fonctionne le pipeline, pourquoi cette asymétrie existe, et une rampe détaillée à partir d'un vrai hex de marque.

• Écrêtage du gamut : pourquoi vos couleurs sont écrasées

  L'écrêtage du gamut écrase les couleurs qui existent dans le modèle mais pas à l'écran : pourquoi le plafonnement des canaux décale la teinte, pourquoi les rampes s'aplatissent, et comment la marge de sécurité l'évite.

• La syntaxe CSS oklch() expliquée

  Une référence pratique pour la syntaxe CSS oklch() : les trois valeurs et l'alpha, des exemples de boutons concrets, les couleurs relatives avec oklch(from …), et les solutions de repli.

• Les espaces colorimétriques expliqués aux designers

  Les espaces colorimétriques expliqués aux designers : sRGB, P3 et Rec.2020 sont des gamuts, OKLCH et HSL des systèmes de coordonnées — et quelle combinaison convient à quel travail.

• Les rampes de couleur doivent-elles décaler la teinte ?

  Le décalage de teinte des rampes de couleur, expliqué : pourquoi les palettes réglées à la main faisaient tourner la teinte, pourquoi OKLCH rend une teinte constante visuellement constante, et quand la rotation est un choix délibéré.

• OKLCH dans Tailwind v4

  Tailwind OKLCH en pratique : v4 a reconstruit sa palette en OKLCH et déplacé la config dans le CSS. Comment définir des couleurs de marque personnalisées dans @theme — et ce que ça vous apporte.

• OKLCH vs HSL : pourquoi HSL ment sur la luminosité

  OKLCH vs HSL : la luminosité de HSL est une fraction des chiffres RGB, pas une mesure de la perception — jaune et bleu à 50 % diffèrent énormément. Ce qu'OKLCH corrige, et comment.

• OKLCH vs LAB et LCH

  OKLCH vs LAB et LCH : ce que partagent les espaces colorimétriques perceptuels de 1976 et 2020, comment OKLab a corrigé le décalage de teinte du bleu de CIELAB, et quand chacun est le bon outil.

• Pourquoi vos gris ne sont pas vraiment neutres

  Une couleur gris neutre aux canaux RGB égaux paraît souvent froide à côté d'une palette de marque. Pourquoi la perception décale les gris, et comment un soupçon de chroma corrige le problème.

• Prise en charge de oklch() par les navigateurs en 2026

  Prise en charge de OKLCH par les navigateurs en 2026 : tous les grands moteurs proposent oklch() depuis 2023. Qui reste sur la longue traîne, et les solutions de repli économiques qui les couvrent.

• Qu'est-ce qu'OKLCH ? Une explication pour les designers

  OKLCH décrit la couleur avec trois valeurs qui correspondent à la perception humaine : luminosité, chroma, teinte. Découvrez pourquoi il a remplacé HSL pour les palettes, les rampes et le contraste.

• Qu'est-ce qu'une JND — quand deux couleurs semblent identiques

  La différence à peine perceptible que mesurent les spécialistes de la couleur : le plus petit changement qu'un œil peut détecter de façon fiable. Pourquoi les paliers d'une palette séparés de moins de 0,02 de luminosité OKLCH fusionnent.

• Qu'est-ce que l'uniformité perceptuelle ?

  L'uniformité perceptuelle signifie que des distances numériques égales paraissent des différences visibles égales. Pourquoi RGB et HSL échouent au test, et ce que l'uniformité apporte au travail de design.

• Qu'est-ce que le chroma (et en quoi n'est-il pas la saturation) ?

  Le chroma mesure la coloration de façon absolue ; la saturation est un pourcentage de ce qu'une teinte autorise. Pourquoi cette différence compte pour les palettes et les couleurs d'accent.

• sRGB vs Display-P3 : ce que les designers doivent savoir

  sRGB vs Display-P3 : ce qu'est un gamut, où vivent les couleurs supplémentaires du P3, pourquoi le hex ne peut pas les exprimer, et quand le gamut étendu vaut l'effort dans de vrais projets.

Partez de votre propre couleur

Le modèle prend tout son sens avec une couleur qui vous tient à cœur : déposez une couleur de marque dans Scale Composer et il suggère des couleurs d’appoint dérivées d’elle — puis observez comment les rampes qu’il construit conservent leurs pas de luminosité sur chaque teinte. Ce comportement est OKLCH, vu plutôt qu’expliqué.