Qu'est-ce qu'OKLCH et pourquoi l'utiliser à la place de HEX ou HSL ?

OKLCH (Luminosité, Chroma, Teinte) est un espace colorimétrique perceptuellement uniforme basé sur le modèle Oklab. Contrairement à HEX ou HSL, des changements numériques égaux en OKLCH produisent des différences perçues égales. Cela le rend idéal pour concevoir des palettes de couleurs accessibles, créer des dégradés fluides et générer des échelles de couleurs cohérentes pour Tailwind v4.

Comment convertir HEX en OKLCH ?

Collez votre valeur HEX (ex. #3b82f6) dans le champ d'entrée HEX et le champ OKLCH se met à jour instantanément avec la notation équivalente oklch(0.6 0.18 250). Tous les autres formats — OKLab, RGB et HSL — se synchronisent également au même moment, vous permettant de comparer les représentations de couleur immédiatement.

Que signifie 'hors de la gamme sRGB' et qu'arrive-t-il à la couleur ?

Certaines couleurs OKLCH — notamment les valeurs à chroma élevé — dépassent l'espace colorimétrique sRGB utilisé par la plupart des écrans. Dans ce cas, l'outil applique l'algorithme toGamut de CSS Color 4 pour trouver la couleur sRGB affichable la plus proche. Une bannière d'avertissement ambre apparaît, affichant la valeur originale hors gamme à côté du résultat mappé.

Comment fonctionne le générateur de palette OKLCH de Tailwind v4 ?

Le générateur utilise le calendrier de luminosité officiel de Tailwind v4 (50=0.971, 100=0.945, jusqu'à 950=0.238) appliqué à votre teinte et chroma actuels. Il produit 11 paliers de couleur du clair au sombre et les exporte sous forme de bloc de code @theme { --color-brand-50: oklch(...); } prêt à coller dans votre CSS.

Pourquoi l'interpolation OKLCH est-elle meilleure qu'HSL pour les dégradés ?

HSL interpole dans un système de coordonnées cylindriques qui ne correspond pas à la perception humaine, causant souvent des creux gris ou des décalages de teinte inattendus au milieu d'un dégradé. OKLCH interpole dans l'espace perceptuellement uniforme Oklab, de sorte que la luminosité et le chroma transitionnent en douceur sans teintes de couleur inattendues.

Ce convertisseur OKLCH est-il gratuit et privé ?

Oui. L'outil est entièrement gratuit et fonctionne entièrement dans votre navigateur en utilisant la bibliothèque culori. Aucune valeur de couleur n'est envoyée à un serveur. Tous les calculs de conversion et de mappage de gamme sont effectués localement sur votre appareil, garantissant une confidentialité totale de vos données.

La syntaxe OKLCH de CSS Color 4 fonctionne-t-elle dans tous les navigateurs ?

La syntaxe de couleur OKLCH (oklch()) est prise en charge dans tous les navigateurs modernes depuis 2023, y compris Chrome 111+, Firefox 113+, Safari 15.4+ et Edge 111+. Pour les navigateurs plus anciens, utilisez les valeurs de secours HEX ou RGB que ce convertisseur fournit.

Outils Couleur

Convertisseur OKLCH – CSS Color 4, Générateur de Palette Tailwind v4

Convertisseur de couleur OKLCH gratuit avec synchronisation en direct entre OKLCH, OKLab, RGB, HSL et HEX. Inclut les curseurs L/C/H/alpha, le mappage de gamme CSS Color 4 et l'export de palette Tailwind v4.

OKLCH (Luminosité, Chroma, Teinte) est un espace colorimétrique perceptuellement uniforme basé sur le modèle Oklab et officiellement adopté dans CSS Color Level 4. Contrairement à RGB ou HSL, OKLCH maintient une luminosité perçue cohérente sur toutes les teintes, ce qui le rend idéal pour les systèmes de couleurs accessibles, les palettes Tailwind v4 et les dégradés fluides.

Comment Utiliser le Convertisseur de Couleur OKLCH

1
Entrez une valeur de couleur
Tapez ou collez une valeur dans tout format pris en charge : oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%) ou oklab(0.6 -0.056 -0.169). L'outil synchronise tous les autres formats instantanément.
2
Affinez avec les curseurs L/C/H/Alpha
Faites glisser les curseurs de Luminosité (L), Chroma (C), Teinte (H) ou Alpha. Le curseur Chroma affiche le marqueur de limite de gamme sRGB pour que vous sachiez toujours quand une couleur dépasse la plage d'affichage standard.
3
Vérifiez l'avertissement de gamme s'il apparaît
Si votre couleur OKLCH est hors de la gamme sRGB, une bannière d'avertissement ambre affiche la valeur originale et le résultat mappé par l'algorithme toGamut de CSS Color 4 utilisé pour l'affichage.
4
Générez une palette Tailwind v4
La section de palette OKLCH de Tailwind v4 génère automatiquement des paliers de couleur de 50 à 950 pour votre teinte actuelle, en suivant le calendrier de luminosité officiel de Tailwind. Cliquez sur Copier pour coller le bloc @theme directement dans votre CSS.

Références

W3C CSS Color Level 4 – oklch()
La spécification W3C définissant la notation de couleur OKLCH et les algorithmes de mappage de gamme.
Culori – Bibliothèque de Couleur JavaScript
La bibliothèque open-source qui alimente la conversion OKLCH, le mappage toGamut et l'interpolation perceptuelle dans cet outil.
Evil Martians – OKLCH en CSS : Pourquoi quitter RGB et HSL ?
Un guide complet expliquant les avantages d'OKLCH par rapport à RGB et HSL pour le travail moderne avec les couleurs.
Tailwind CSS v4 – Palette par Défaut
La documentation officielle de la palette de couleurs Tailwind, y compris les valeurs de luminosité OKLCH utilisées dans ce générateur de palette.

Outils Associés

Convertisseur de Couleur

Convertissez entre RGB, RGBA, HEX, HSL, HSV et CMYK avec synchronisation bidirectionnelle en temps réel.

Minificateur CSS

Minifiez du CSS utilisant vos valeurs de couleur OKLCH.

Visionneuse SVG

Prévisualisez et inspectez des graphiques SVG utilisant des valeurs de remplissage et de contour OKLCH.

Questions Fréquemment Posées

Qu'est-ce qu'OKLCH et pourquoi l'utiliser à la place de HEX ou HSL ?: OKLCH (Luminosité, Chroma, Teinte) est un espace colorimétrique perceptuellement uniforme basé sur le modèle Oklab. Contrairement à HEX ou HSL, des changements numériques égaux en OKLCH produisent des différences perçues égales. Cela le rend idéal pour concevoir des palettes de couleurs accessibles, créer des dégradés fluides et générer des échelles de couleurs cohérentes pour Tailwind v4.
Comment convertir HEX en OKLCH ?: Collez votre valeur HEX (ex. #3b82f6) dans le champ d'entrée HEX et le champ OKLCH se met à jour instantanément avec la notation équivalente oklch(0.6 0.18 250). Tous les autres formats — OKLab, RGB et HSL — se synchronisent également au même moment, vous permettant de comparer les représentations de couleur immédiatement.
Que signifie 'hors de la gamme sRGB' et qu'arrive-t-il à la couleur ?: Certaines couleurs OKLCH — notamment les valeurs à chroma élevé — dépassent l'espace colorimétrique sRGB utilisé par la plupart des écrans. Dans ce cas, l'outil applique l'algorithme toGamut de CSS Color 4 pour trouver la couleur sRGB affichable la plus proche. Une bannière d'avertissement ambre apparaît, affichant la valeur originale hors gamme à côté du résultat mappé.
Comment fonctionne le générateur de palette OKLCH de Tailwind v4 ?: Le générateur utilise le calendrier de luminosité officiel de Tailwind v4 (50=0.971, 100=0.945, jusqu'à 950=0.238) appliqué à votre teinte et chroma actuels. Il produit 11 paliers de couleur du clair au sombre et les exporte sous forme de bloc de code @theme { --color-brand-50: oklch(...); } prêt à coller dans votre CSS.
Pourquoi l'interpolation OKLCH est-elle meilleure qu'HSL pour les dégradés ?: HSL interpole dans un système de coordonnées cylindriques qui ne correspond pas à la perception humaine, causant souvent des creux gris ou des décalages de teinte inattendus au milieu d'un dégradé. OKLCH interpole dans l'espace perceptuellement uniforme Oklab, de sorte que la luminosité et le chroma transitionnent en douceur sans teintes de couleur inattendues.
Ce convertisseur OKLCH est-il gratuit et privé ?: Oui. L'outil est entièrement gratuit et fonctionne entièrement dans votre navigateur en utilisant la bibliothèque culori. Aucune valeur de couleur n'est envoyée à un serveur. Tous les calculs de conversion et de mappage de gamme sont effectués localement sur votre appareil, garantissant une confidentialité totale de vos données.
La syntaxe OKLCH de CSS Color 4 fonctionne-t-elle dans tous les navigateurs ?: La syntaxe de couleur OKLCH (oklch()) est prise en charge dans tous les navigateurs modernes depuis 2023, y compris Chrome 111+, Firefox 113+, Safari 15.4+ et Edge 111+. Pour les navigateurs plus anciens, utilisez les valeurs de secours HEX ou RGB que ce convertisseur fournit.