Convertisseur HEX vers OKLCH

Qu'est-ce qu'un convertisseur HEX vers OKLCH ?

// sRGB hex → OKLCH per W3C CSS Color 4 + Ottosson 2020
// References: https://www.w3.org/TR/css-color-4/#color-conversion-code
//             https://bottosson.github.io/posts/oklab/
// Worked example: #3b82f6 (Tailwind blue-500) → oklch(0.629 0.193 263.4)
function hexToOklch(hex) {
  const h = hex.trim().replace(/^#/, '');
  const srgb = [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) / 255);
  // sRGB → linear-sRGB (CSS Color 4 §11.2 piecewise gamma)
  const lin = srgb.map(v => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
  const [lr, lg, lb] = lin;
  // linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
  const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
  const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
  const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;
  // XYZ D65 → LMS (Ottosson 2020), cube-root, → OKLAB
  const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
  const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
  const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
  const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
  const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
  const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
  // OKLAB → OKLCH (Cartesian to polar)
  const C = Math.sqrt(a * a + b * b);
  const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
}
console.log(hexToOklch('#3b82f6')); // → oklch(0.629 0.193 263.4)

Fonctionnalités clés

Alternatives au convertisseur HEX vers OKLCH

Exemples HEX vers OKLCH

#3b82f6

#FF5733

#FF1744

#0f172a

#3b82f6

Conversions HEX → OKLCH courantes (Tailwind v4)

Table de référence de 10 teintes médianes populaires de la palette par défaut Tailwind v4 avec leurs équivalents HEX et OKLCH. Les valeurs correspondent à la précision de palette publiée par Tailwind v4 (trois décimales sur L et C, entier ou une décimale sur H).

Comment utiliser le convertisseur HEX vers OKLCH

1. 1

   Collez un code hex dans le champ HEX

   Déposez n'importe quelle valeur hex dans l'entrée HEX — avec ou sans `#` initial, en raccourci à 3 chiffres (`#F73`), en forme pleine à 6 chiffres (`#3b82f6`), en raccourci alpha à 4 chiffres (`#F738`) ou en forme pleine alpha à 8 chiffres (`#FF573380`). Le parseur normalise les cinq formes d'entrée vers la même couleur interne avant de dériver OKLCH. La casse n'a pas d'importance (`#3b82f6` et `#3B82F6` s'analysent à l'identique). Des caractères invalides ou un nombre de chiffres incorrect produisent une discrète erreur en ligne ; un hex valide met à jour chaque autre champ de format en temps réel, y compris OKLCH.

2. 2

   Lisez le triplet OKLCH dans le champ OKLCH

   Le champ OKLCH affiche la valeur dans la forme moderne de CSS Color 4 : `oklch(0.629 0.193 263.4)` pour une couleur opaque, `oklch(0.629 0.193 263.4 / 0.5)` pour une couleur portant de l'alpha. L est arrondi à trois décimales (correspond à la précision publiée par Tailwind v4), C à trois décimales, H à une décimale en degrés. La source de vérité OKLCH interne signifie que la précision flottante sous-jacente est préservée sur chaque autre champ — les allers-retours vers hex restent stables au bit près, contrairement aux convertisseurs hérités qui pivotent par HSL et dérivent d'un ou deux degrés par aller-retour.

3. 3

   Cliquez sur Copier pour saisir la chaîne OKLCH

   Chaque carte de format possède un bouton Copier à droite. Un clic et la valeur arrive dans votre presse-papiers — le label du bouton bascule brièvement sur « Copié ! » pour vous le signaler. La chaîne copiée est la syntaxe canonique CSS Color 4 (`oklch(0.629 0.193 263.4)`), prête à déposer dans un bloc `@theme` de Tailwind v4 ou une définition de variable CSS shadcn/ui. Pour une sortie spécifique à une plateforme (propriété personnalisée CSS, token Tailwind v4, SwiftUI, Compose, Flutter), utilisez la section Copier comme code sous le sélecteur — ces extraits émettent le format que chaque plateforme attend nativement.

4. 4

   Vérifiez les badges de gamut chromatique Display P3 / Rec2020

   Trois badges de gamut chromatique (sRGB, Display P3, Rec2020) indiquent si la couleur actuelle tient dans la plage reproductible de chaque espace. Si le badge sRGB devient rouge mais que P3 est vert, la couleur est un OKLCH gamut chromatique large qui rendra saturé sur du matériel Apple (iPhone, iPad, MacBook depuis 2017+) mais se désaturera sur un moniteur 24 bits hérité. Le bouton **Snap to sRGB** utilise la réduction binaire du chroma (algorithme informatif CSS Color 4 §13) pour ramener la couleur dans sRGB tout en préservant L et H, produisant un repli hex que vous pouvez livrer via `@supports not (color: oklch(0 0 0))`.

5. 5

   Aussi visibles : RGB, HSL, OKLAB, HSV, HWB, CMYK, couleur nommée

   Le même hex que vous collez illumine également les huit autres champs de format — RGB pour les appels canvas et le matériel, HSL pour les variables CSS héritées, OKLAB pour les mathématiques de palette et les matrices de daltonisme, HSV et HWB pour les flux de sélecteur de couleur designer, CMYK pour les estimations d'impression et la couleur CSS nommée la plus proche pour la prose de documentation. Vous n'êtes jamais enfermé dans hex → OKLCH seulement. Le sélecteur (carré SL + curseur de teinte + curseur alpha) pilote les neuf simultanément, et sur les navigateurs basés sur Chromium, le bouton EyeDropper échantillonne n'importe quel pixel à l'écran, y compris hors du navigateur.

Erreurs courantes HEX / OKLCH

Régler C OKLCH = 0,3 en attendant « 30 % de saturation » :
oklch(0.7 0.3 250) → peut dépasser le gamut sRGB pour les bleus
La couleur gamut chromatique large rend désaturée sur les écrans hérités.

Traitez C comme un chroma absolu, vérifiez les badges de gamut chromatique :
oklch(0.7 0.15 250) → confortablement dans sRGB pour cette paire L+H
Utilisez les badges pour trouver le C max qui tient dans le gamut chromatique cible.

Copier les pourcentages L HSL directement dans OKLCH :
hsl(220 50% 30%) porté comme oklch(0.30 0.10 220)
Les deux couleurs paraissent notablement différentes en luminosité.

Re-dérivez OKLCH depuis le hex original, ne portez pas depuis HSL :
source hex → conversion OKLCH → oklch(0.34 0.08 254)
Le L perceptuel reste correct ; la palette paraît régulière.

Livrer oklch(0.7 0.4 30) sans vérifier le gamut sRGB :
Les écrans P3 rendent rouge saturé ; les écrans sRGB rendent désaturé
La couleur de marque paraît incohérente sur le matériel utilisateur.

Vérifiez le badge de gamut sRGB, Snap to sRGB si nécessaire, en couches avec @supports :
@supports (color: oklch(0 0 0)) { --primary: oklch(0.7 0.4 30); }
@supports not (color: oklch(0 0 0)) { --primary: #ef6b50; }
Le matériel P3 obtient la valeur gamut chromatique large ; le matériel sRGB obtient le repli ramené.

Définir la couleur de marque en OKLCH seulement :
:root { --primary: oklch(0.629 0.193 263.4); }
IE 11 et vieux iOS Safari ne rendent aucune couleur du tout.

Mettez en couches avec @supports pour un repli gracieux :
:root { --primary: #3b82f6; }
@supports (color: oklch(0 0 0)) { :root { --primary: oklch(0.629 0.193 263.4); } }
Les navigateurs modernes obtiennent OKLCH ; les navigateurs hérités obtiennent le repli hex.

Substituer lch() à oklch() en attendant le même résultat :
lch(60% 50 240) ≠ oklch(0.6 0.15 240) — couleurs entièrement différentes
Copié-collé d'un espace à l'autre, la valeur est silencieusement fausse.

Choisissez un espace et restez-y :
oklch(0.629 0.193 263.4) pour les systèmes de design modernes
ou lch(60% 50 240) — mais ne changez pas le nom de fonction sans reconvertir

Qui utilise HEX vers OKLCH

Développeurs front-end migrant vers les tokens OKLCH de Tailwind v4

Tailwind v4 s'est standardisé sur OKLCH pour sa palette par défaut en janvier 2025. Migrer une base de code v3 avec des couleurs de marque basées sur hex signifie convertir chaque hex en OKLCH et déposer le résultat dans le nouveau bloc `@theme`. Collez chaque hex ici, copiez la valeur `oklch()`, définissez `--color-primary: oklch(0.629 0.193 263.4)` et compagnie. Les badges de gamut chromatique en direct signalent toute couleur qui dépasse sRGB pour que vous puissiez décider de garder la valeur gamut chromatique large pour les utilisateurs Display P3 ou de ramener vers sRGB.

Auteurs de thèmes shadcn/ui construisant des palettes personnalisées

Le thème à variables CSS de shadcn/ui utilise OKLCH pour chaque token (`--background`, `--foreground`, `--primary`, etc.). Les thèmes personnalisés dérivent d'un hex de marque de base en convertissant vers OKLCH puis en faisant varier L pour les variantes claires/sombres. Collez le hex de marque, lisez le triplet OKLCH, construisez le reste du thème en faisant varier L tout en maintenant C et H fixes. Correspond exactement au flux canonique shadcn.

Auteurs de systèmes de design générant des rampes perceptuellement régulières

Générez une rampe 50/100/200/.../900 en faisant varier le canal L par incréments OKLCH égaux tout en maintenant C et H fixes. L'écart visuel entre paliers adjacents paraît identique sur chaque teinte — ce dont une palette de couleurs de marque a réellement besoin. Tailwind v4 utilise exactement cette construction pour sa palette par défaut, et shadcn/ui la reflète. Collez chaque hex de marque, lisez l'OKLCH, générez la rampe algorithmiquement ou via le panneau Teintes claires / Teintes foncées / Tons sous le sélecteur.

Ingénieurs d'accessibilité vérifiant le contraste en espace OKLCH

Le contraste WCAG 2.1 et APCA rapportent tous deux contre la couleur sRGB résolue, pas le triplet OKLCH — mais connaître le L OKLCH d'une couleur de marque rend le réglage du contraste prévisible : augmentez L de 0,1 pour passer AA contre le blanc, baissez L de 0,1 pour passer AA contre le noir. La vue simultanée OKLCH + WCAG + APCA rend la relation visible. Collez le hex de marque, regardez les badges de contraste, ajustez L en OKLCH (plus prévisible qu'en HSL) jusqu'à ce que la paire passe les deux métriques.

Développeurs web construisant des tokens de couleur gamut chromatique large pour les écrans modernes

La plupart des appareils Apple depuis 2017 (et de nombreux appareils Android modernes) restituent Display P3 nativement. Définir les couleurs d'accent de marque en OKLCH vous permet d'adresser des rouges et des verts saturés P3 uniquement qu'aucun code hex ne peut encoder. Collez un hex existant pour lire son OKLCH, puis poussez le canal C au-dessus du plafond sRGB pour revendiquer la saturation P3 supplémentaire. Les badges de gamut chromatique confirment que la nouvelle valeur tient dans P3 (et se rabat gracieusement sur les écrans sRGB uniquement via la compression de chroma du navigateur).

Formateurs enseignant la clarté perceptuelle vs géométrique

La vue simultanée OKLCH + HSL rend évidente la différence entre clarté perceptuelle et géométrique. Collez un vert saturé et un bleu saturé à la même HSL L=50 % ; les valeurs L OKLCH diffèrent notablement parce qu'OKLCH mesure la luminosité effectivement perçue. Faites glisser le curseur de teinte HSL et regardez L OKLCH osciller pendant que vous maintenez L HSL constant — la courbe est la particularité gamma visualisée. Une démonstration prête pour la salle de classe de pourquoi les systèmes de design ont migré vers OKLCH.

Mainteneurs open source modernisant la documentation des tokens

Les documentations de systèmes de design plus anciens listent typiquement les couleurs de marque uniquement comme codes hex. Moderniser vers OKLCH signifie montrer la même couleur dans les deux espaces — le hex pour la compatibilité des blocs de code, l'OKLCH pour le tableau spec et la définition de token moderne. Collez chaque hex, copiez la sortie OKLCH, mettez à jour la doc. Le hash d'URL partageable permet aussi aux contributeurs de lier à la couleur exacte en discussion dans un ticket GitHub sans ambiguïté.

Mathématiques et pipeline HEX vers OKLCH

HEX → OKLCH est un pipeline à 7 étapes

La conversion passe par cinq représentations intermédiaires : hex → sRGB entier → sRGB normalisé (0-1) → linear-sRGB (gamma-décodé) → CIE XYZ D65 → OKLAB → OKLCH. Chaque étape est une matrice ou fonction par morceaux bien définie d'une source primaire. L'outil exécute le pipeline complet à chaque frappe ; les mathématiques sont assez rapides (microsecondes) pour qu'aucun débounce ne soit nécessaire. Exposer le tuple RGB intermédiaire aux côtés d'OKLCH signifie que vous pouvez déboguer une valeur OKLCH inattendue en inspectant les canaux RGB.

Fonction gamma CSS Color 4 §11.2

La conversion sRGB → linear-sRGB utilise la fonction par morceaux CSS Color 4 §11.2 : `v ≤ 0.04045 ? v/12.92 : ((v + 0.055) / 1.055)^2.4`. La forme par morceaux (avec un petit segment linéaire près de zéro) évite l'instabilité numérique de la forme pur-exposant aux couleurs très sombres. C'est la même fonction qu'utilisent les profils ICC pour encoder sRGB et la même fonction qu'utilisent les navigateurs en interne lors du rendu des codes hex. L'inverse pour OKLCH → hex applique la même fonction en sens inverse : `v ≤ 0.0031308 ? v * 12.92 : 1.055 * v^(1/2.4) - 0.055`.

Matrice CSS Color 4 §15.1 : linear-sRGB ↔ XYZ D65

La matrice de CSS Color 4 §15.1 convertit linear-sRGB en CIE XYZ sous le point blanc D65 : `X = 0.4124564 R + 0.3575761 G + 0.1804375 B`, `Y = 0.2126729 R + 0.7151522 G + 0.0721750 B`, `Z = 0.0193339 R + 0.1191920 G + 0.9503041 B`. La ligne Y donne la formule de luminance sRGB. La matrice est la même qu'utilisent chaque bibliothèque de gestion de couleur, y compris ICC, Adobe Color Engine et le pipeline open source LCMS. La matrice inverse pour OKLCH → hex applique l'inverse de §15.1.

Matrices OKLAB d'Ottosson 2020 et étape racine cubique

La conversion XYZ D65 → OKLAB utilise deux matrices et une étape racine cubique publiées dans l'article OKLAB de Björn Ottosson de 2020. La première matrice transforme XYZ vers un espace de réponse cône LMS (modélisé approximativement sur les sensibilités cône L/M/S humaines). Prenez la racine cubique de chaque canal pour compresser la plage dynamique de façon non linéaire (l'étape correctrice d'uniformité perceptuelle). La seconde matrice transforme le LMS racine-cubique vers les coordonnées L/a/b d'OKLAB. Les trois opérations utilisent les valeurs exactes publiées dans l'implémentation de référence de l'article ; aucune redérivation ni arrondi. L'inverse pour OKLCH → hex applique ces matrices en sens inverse.

OKLAB ↔ OKLCH est cartésien-vers-polaire

Les axes `a` et `b` d'OKLAB forment un plan chroma perpendiculaire à l'axe L. OKLCH encode polairement ce plan : `C = sqrt(a² + b²)` (distance euclidienne au gris), `H = atan2(b, a) * 180 / π` (angle en degrés, enroulé à 0-360°). L'inverse : `a = C * cos(H * π / 180)`, `b = C * sin(H * π / 180)`. La forme polaire est préférée à OKLAB pour le stockage des tokens de design parce que la teinte est un axe stable — faire pivoter la teinte ne traverse pas accidentellement le gris comme peut le faire la rotation de `a` ou `b` en OKLAB.

Détection de gamut chromatique via vérification de plage de canal

Une couleur est considérée dans le gamut chromatique pour un espace cible (sRGB, Display P3, Rec2020) si chaque canal tombe dans `[-ε, 1 + ε]` après conversion vers les primaires de cet espace, où `ε = 1e-7` pour absorber le bruit de précision flottante autour des limites. Le badge de gamut chromatique pour chaque espace devient rouge quand un canal dépasse la plage. OKLCH est non borné en gamut chromatique — `oklch(0.7 0.4 30)` est une coordonnée valide mais peut dépasser l'espace d'octet 256-par-canal de sRGB. La vérification s'exécute à chaque frappe ; combinée avec Snap to sRGB, cela attrape l'écueil d'adoption le plus courant (OKLCH gamut chromatique large ne s'affichant pas correctement sur les écrans hérités).

Réduction binaire du chroma Snap-to-sRGB

Snap to sRGB correspond à l'algorithme informatif de cartographie de gamut chromatique de CSS Color 4 §13 : maintenez L et H fixes aux valeurs actuelles, recherche binaire de C ∈ [0, currentC] pour le plus grand C dont la conversion sRGB reste dans le gamut chromatique. La recherche s'exécute en au plus 30 itérations (précision ~10⁻⁹), ce qui est bien plus qu'assez pour la précision visuelle. Préserver L et H signifie que la couleur ramenée se lit comme la même famille de teinte à la même luminosité — elle perd juste en saturation. On ne tronque pas les canaux RGB directement parce que cela distord notablement la teinte (surtout dans les bleus, qui tronquent vers le violet).

Bonnes pratiques pour les flux HEX / OKLCH

Utilisez OKLCH comme format de token canonique dans le nouveau code

Pour tout système de design livré en 2025 ou plus tard, définissez les couleurs de marque et les rampes de palette en OKLCH. L'axe L donne automatiquement des rampes perceptuellement régulières ; l'axe chroma peut adresser des couleurs gamut chromatique large que hex ne peut encoder. Gardez un repli hex pour les navigateurs plus anciens via `@supports not (color: oklch(0 0 0))` ou PostCSS au moment du build, mais faites d'OKLCH la source de vérité dans votre magasin de tokens. Tailwind v4 et shadcn/ui sont livrés ainsi ; les nouveaux projets peuvent suivre leur exemple sans friction.

Générez des rampes en faisant varier L, en maintenant C et H constants

La construction canonique de rampe OKLCH : verrouillez C et H, faites varier L par incréments égaux. Une rampe à 9 paliers `oklch(L 0.15 263)` pour L = 0,1, 0,2, …, 0,9 produit un espacement visuellement régulier sur chaque palier. C'est exactement ce que fait Tailwind v4 en interne. Ne faites pas varier C en même temps que L sauf si vous voulez délibérément faire varier l'intensité chromatique de la rampe (rare). Ne faites pas dériver H sur les paliers — même une dérive de 5° donne une rampe brouillonne.

Respectez la précision de Tailwind v4 : 3 décimales L+C, 1 décimale H

La palette par défaut de Tailwind v4 publie les valeurs OKLCH avec trois décimales sur L et C, et une décimale sur H — `oklch(0.629 0.193 263.4)` pour blue-500. Respecter cette précision dans vos propres tokens signifie que les flux coller-dans-config produisent des valeurs identiques à celles que Tailwind livre, et les outils de diff ne signaleront pas de différences fallacieuses. L'arrondi par défaut de l'outil suit cette convention ; le copier-coller dans un bloc `@theme` est exact au bit près.

Faites passer l'OKLCH gamut chromatique large par la vérification de gamut Display P3

Si vous ciblez du matériel Apple moderne (iPhone, iPad, MacBook depuis 2017+) ou livrez du contenu HDR-aware, les badges de gamut chromatique vous permettent de pousser C au-dessus du plafond sRGB pour revendiquer la saturation P3 supplémentaire. La compression de chroma appliquée par le navigateur empêche la couleur d'être tronquée sur les écrans sRGB uniquement. Ne ramenez pas vers sRGB par défaut sauf si vous savez que toute votre audience est sur des écrans hérités — cela perd 30 %+ de la saturation que peut restituer le matériel P3.

Fournissez un repli hex via @supports pour les navigateurs pré-2023

Bien que la prise en charge des navigateurs evergreen pour `oklch()` soit maintenant à 94 %+, la longue traîne (IE 11, vieux Android Chrome, webviews intégrées) a encore besoin d'un repli. Enveloppez les tokens dans `@supports (color: oklch(0 0 0))` et fournissez une variante hex dans la branche alternative. La sortie de Snap to sRGB est exactement ce repli — généré automatiquement depuis le triplet OKLCH actuel avec L et H préservés. Les plugins PostCSS au moment du build comme `postcss-oklab-function` peuvent aussi intégrer l'approximation sRGB au moment de la compilation.

Documentez à la fois l'OKLCH et le hex source dans vos tokens

Quand vous livrez une variable CSS comme `--color-primary: oklch(0.629 0.193 263.4)`, incluez un commentaire avec le hex source : `/* source : #3b82f6 (Tailwind blue-500) */`. Six mois plus tard, quand quelqu'un doit dériver une teinte foncée connexe ou vérifier la valeur contre un PDF de charte de marque, le hex source préserve la chaîne de provenance complète. OKLCH seul est signifiant mais plus difficile à reconnaître à vue ; le hex source est l'identifiant que la plupart des coéquipiers chercheront en premier.

Utilisez le hash d'URL pour partager des décisions de couleur en direct

Chaque changement de couleur met à jour le hash d'URL sous la forme `#hex=3b82f6` ou `#oklch=...` automatiquement. Copiez l'URL dans un fil Slack ou un ticket GitHub et quiconque l'ouvre atterrit sur la même couleur avec le même triplet OKLCH. C'est plus fiable que de coller une chaîne OKLCH dans le chat — les destinataires font parfois des fautes de frappe sur les décimales ou enveloppent la mauvaise précision — et permet à un fil de revue de design de référencer une couleur exacte plutôt que « le bleu de marque dont on a parlé mardi ». Le hash n'est jamais transmis au serveur.

Questions fréquemment posées