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 ?
Pourquoi la luminosité a un sens en OKLCH
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é par rapport à 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 est restituée à l'identique après aller-retour. Le mapping de gamut a été vérifié de la même façon sur quatre cent quatre-vingts couleurs hors gamut, où l'écart ne dépasse pas une unité sur 255 dans le pire cas. Un public qui lit l'OKLCH repère une matrice fausse : il a semblé utile de préciser 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 livre votre build et celle que vous pouvez coller ailleurs. Tous les navigateurs actuels 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'appelle-t-on ici une différence juste perceptible ?
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.
Ces données sont-elles envoyées quelque part ?
Non. Les conversions se font dans cette page.
Réalisé par l'équipe GO AI. Calculateur CSS clamp() · Vérificateur de contraste WCAG · Tous les outils gratuits