Convertisseur OKLCH et générateur de palettes

Convertissez entre OKLCH, hex, RGB et HSL, et construisez des rampes qui restent perceptuellement régulières, puisque luminosité et chroma sont maintenus pendant que la teinte tourne. Les couleurs hors sRGB sont mappées en réduisant le chroma, pas en écrêtant les canaux — toute la différence est là : votre violet reste-t-il violet.

Hex, rgb(), hsl() ou oklch(). 

    


    

      
Pourquoi la luminosité en OKLCH veut dire quelque chose

      
En HSL, changer la teinte à luminosité constante change la clarté perçue : un jaune à 50 % paraît bien plus lumineux qu'un bleu à 50 %, et c'est pourquoi les rampes HSL semblent irrégulières quel que soit le soin apporté à leur espacement. OKLab a été ajusté sur des données perceptuelles, si bien que son axe de luminosité suit ce que l'œil rapporte. Fixez L et C, faites tourner H, et chaque échantillon porte le même poids visuel — c'est toute la raison de construire ses palettes ici plutôt qu'en HSL.

      
Le mapping de gamut, voilà l'essentiel

      
Beaucoup de valeurs OKLCH n'ont aucun équivalent sRGB, et le correctif naïf consiste à ramener chaque canal dans les bornes. Cela décale la teinte de façon visible : un violet soutenu écrêté canal par canal dérive vers le bleu. Réduire le chroma en gardant luminosité et teinte laisse la couleur reconnaissable et ne retire que la saturation que l'écran ne pouvait de toute façon pas montrer. Cette page emploie l'algorithme de CSS Color 4 : recherche dichotomique sur le chroma, et acceptation du résultat écrêté dès qu'il tient dans une différence à peine perceptible face à la couleur réduite.

      
Vérifié contre une référence

      
Les conversions ont été comparées à une implémentation indépendante sur une grille de quatre mille couleurs : luminosité et chroma concordent au millionième près, la teinte au dix-millième de degré, et chaque valeur hexadécimale revient exactement. Le mapping de gamut a été vérifié de la même façon sur quatre cent quatre-vingts couleurs hors gamut, et s'en tient à une part sur 255 dans le pire cas. Un public qui lit l'OKLCH repère une matrice fausse : il semblait juste de dire comment cela a été vérifié.

      
Se servir du résultat

      
Les propriétés personnalisées sont écrites en OKLCH avec l'hexadécimal à côté, en commentaire, parce que c'est le couple qu'on veut en relecture : la valeur que votre build expédie et celle que vous pouvez coller ailleurs. Tous les navigateurs en usage comprennent la syntaxe OKLCH ; s'il vous en reste un qui ne la comprend pas, le commentaire est votre solution de repli.


      
FAQ

      

        
Pourquoi le chroma est-il plafonné à 0,4 ?
Parce que rien en sRGB n'en approche. La couleur la plus saturée de sRGB est le bleu, autour de 0,313, et le curseur va au-delà pour que vous voyiez ce qui sort du gamut et comment cela y revient.

        
Qu'est-ce qu'une différence à peine perceptible ici ?
Un delta E de 0,02 en OKLab, le seuil retenu par CSS Color 4. En dessous, écrêtage et réduction de chroma sont indiscernables : l'algorithme prend la couleur écrêtée et garde le chroma en plus.

        
Gère-t-il le P3 ou le Rec2020 ?
Pas encore. Tout ici vise le sRGB, et c'est ce que signifient les avertissements de gamut. Les gamuts plus larges demandent leurs propres primaires et un second jeu de matrices.

        
Une partie de tout cela est-elle envoyée quelque part ?
Non. Les conversions se font dans cette page.

      

      
Réalisé par l'équipe GO AI. Calculateur CSS clamp() · Tous les outils gratuits