Convertisseur de couleurs — HEX, RGB, HSL et OKLCH

Qu'est-ce qu'un convertisseur de couleurs ?

// sRGB → linear → XYZ D65 → OKLAB → OKLCH
// References: W3C CSS Color 4 §11-15, Ottosson 2020 (https://bottosson.github.io/posts/oklab/)
// Worked example: #3b82f6 (Tailwind blue-500)

const srgb = [0x3b, 0x82, 0xf6].map(v => v / 255); // [0.231, 0.510, 0.965]

const toLinear = (v) => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
const lin = srgb.map(toLinear); // gamma-decoded linear-sRGB

// linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
const [lr, lg, lb] = lin;
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 matrix), 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;
console.log(`oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`);
// → oklch(0.629 0.193 263.4)

Fonctionnalités clés

Alternatives au convertisseur de couleurs comparées

Exemples de conversion de couleurs

#3b82f6

#FF5733

#FF6347

oklch(0.7 0.25 30)

#767676

#FF6347

hsl(220 70% 50%)

#3b82f6

Comment utiliser le convertisseur de couleurs

1. 1

   Collez ou saisissez n'importe quelle couleur dans n'importe quel format

   Chacun des 9 champs de format (HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH, OKLAB, Named) est directement modifiable — pas de bouton « Convertir » à cliquer. Collez un hex depuis Figma, saisissez une valeur `oklch()` depuis une configuration Tailwind, déposez un `hsl()` issu d'une vieille feuille de style, ou tapez même un nom de couleur CSS comme `tomato`. L'outil analyse en continu au fur et à mesure de la frappe, donc une valeur à moitié saisie n'effacera pas les autres tant que vous n'aurez pas validé un format correct. Une entrée invalide reçoit une discrète erreur en ligne ; une entrée valide met à jour toute la grille.

2. 2

   Les 9 formats se mettent à jour instantanément

   La source de vérité interne est OKLCH (perceptuellement uniforme, non borné en gamut), et chaque autre format en est dérivé à chaque frappe. Le champ dans lequel vous saisissez actuellement conserve sa position de curseur intacte — seuls les *huit autres* champs sont rendus à nouveau. Cela signifie que vous pouvez modifier directement le canal L de l'OKLCH et regarder hex, RGB, HSL et CMYK se déplacer en temps réel sans perdre votre curseur. Les mathématiques de conversion s'exécutent entièrement en JavaScript, en utilisant les mêmes primitives OKLAB livrées dans les navigateurs modernes.

3. 3

   Utilisez le sélecteur pour l'exploration visuelle

   Sous la grille de formats se trouvent un carré saturation-clarté (faites glisser n'importe où pour fixer S+L de la teinte actuelle), un curseur de teinte (faites glisser pour pivoter autour de la roue chromatique) et un curseur alpha (faites glisser pour régler la transparence). Sur les navigateurs basés sur Chromium (Chrome, Edge, Brave), le bouton **EyeDropper** active l'API native `EyeDropper` — cliquez n'importe où à l'écran, même hors de la fenêtre du navigateur, pour échantillonner la couleur de ce pixel. Safari et Firefox ne livrent pas encore l'API, donc le bouton est masqué dans ces navigateurs et le carré SL + curseur de teinte restent le sélecteur principal.

4. 4

   Vérifiez le gamut chromatique et le contraste d'un coup d'œil

   Trois badges de gamut chromatique (**sRGB**, **Display P3**, **Rec2020**) indiquent si la couleur actuelle entre dans la plage reproductible de chaque espace — utile lorsque vous travaillez en OKLCH et voulez savoir quels écrans la restitueront fidèlement. La ligne de contraste indique le ratio WCAG 2.1 contre le blanc et le noir, plus le score APCA Lc (métrique tournée vers WCAG 3). Des badges réussite / échec (AA, AAA) apparaissent en ligne. Si une couleur est hors gamut sRGB, un bouton **Snap to sRGB** réduit le chroma jusqu'à ce qu'elle tienne.

5. 5

   Copiez dans la syntaxe native de votre plateforme

   Chacun des 9 champs de format possède son propre bouton **Copier** — un clic, la valeur arrive dans votre presse-papiers, le label bascule brièvement sur « Copié ! » pour vous le signaler. Sous le sélecteur, la section **Copier comme code** génère des extraits prêts à coller pour cinq plateformes : propriété personnalisée CSS, jeton `@theme` Tailwind v4, littéral SwiftUI `Color(red:green:blue:)`, constante Jetpack Compose `Color(0xFF...)` et Flutter `Color(0xFF...)`. Le hash d'URL (`#hex=...` ou `#oklch=...`) se met également à jour pour que vous puissiez partager un lien en direct vers la couleur exacte.

Erreurs courantes de conversion de couleurs

Supposer qu'une palette HSL est perceptuellement uniforme :
hsl(220 50% 30%) → hsl(220 50% 60%) → hsl(220 50% 90%)
À l'écran, ces paliers paraissent inégalement espacés.

Utiliser OKLCH pour des rampes perceptuellement uniformes :
oklch(0.30 0.10 220) → oklch(0.60 0.10 220) → oklch(0.90 0.10 220)
À l'écran, ces paliers paraissent régulièrement espacés.

Envoyer notre sortie CMYK directement à une presse :
hex #FF6347 → cmyk(0%, 61%, 72%, 0%)
Le résultat imprimé peut paraître boueux ou sursaturé.

Envoyer le hex original au prestataire d'impression :
hex #FF6347 → laissez l'imprimeur convertir via ICC contre sa presse
Le résultat imprimé correspond bien plus étroitement à la couleur écran.

Prétendre que Lc 60 = WCAG 4,5:1 :
APCA Lc 60 → « cela passe AA »
Le ratio WCAG 2 pour la même paire pourrait être 3,8:1 (échoue AA).

Vérifier les deux métriques indépendamment :
ratio WCAG 2 ≥ 4,5:1 pour la conformité AA texte courant, ET
APCA |Lc| ≥ 75 pour la lisibilité réelle.
Les deux doivent passer, l'une ne se substituant pas à l'autre.

Faire varier L en HSL pour des teintes foncées :
hsl(220 50% 30%) / hsl(220 50% 60%) / hsl(220 50% 90%)
90 % paraît délavé ; 30 % paraît bien plus foncé que l'écart à 60 %.

Faire varier L en OKLCH pour des teintes foncées :
oklch(0.30 0.10 220) / oklch(0.60 0.10 220) / oklch(0.90 0.10 220)
Chaque pas paraît être le même écart visuel.

Copier le hex à 8 chiffres dans un parseur hérité :
#FF573380 → le parseur tronque → #FF5733 (sans alpha)
La transparence à 50 % est silencieusement perdue.

Vérifier que la cible prend en charge le hex à 8 chiffres, ou utiliser rgba() :
pour CSS moderne : #FF573380 (hex à 8 chiffres)
pour la prise en charge héritée : rgba(255, 87, 51, 0.5) (toujours prise en charge)
Une syntaxe alpha explicite évite la troncature silencieuse.

Ramener chaque couleur OKLCH à sRGB par défaut :
oklch(0.7 0.25 30) → ramener → oklch(0.7 0.18 30)
Les écrans P3 perdent 30 %+ de saturation sans raison.

Vérifier d'abord le badge Display P3 :
si tient-dans-P3 : garder la valeur gamut chromatique large, ajouter un repli sRGB via @supports
si dépasse P3 : alors ramener à sRGB
Laisser le matériel gamut chromatique large faire son travail.

Qui utilise cet outil

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

Tailwind v4 a standardisé sur OKLCH pour sa palette par défaut en 2024. Migrer un ancien système de design basé sur HSL ou hex signifie convertir des centaines de couleurs de marque vers OKLCH. Collez chaque hex, copiez la sortie OKLCH, déposez dans le bloc `@theme`. Les badges de gamut chromatique en direct signalent les couleurs qui dépassent sRGB pour vous laisser décider s'il faut garder la valeur gamut chromatique plus large pour les écrans Display P3.

Designers traduisant les couleurs Figma vers iOS / Android

Figma exporte du hex par défaut, mais iOS attend des littéraux SwiftUI `Color(red:green:blue:)` et Android attend des constantes Jetpack Compose `Color(0xFF...)`. Collez le hex Figma une fois, copiez l'extrait SwiftUI pour l'ingénieur iOS et l'extrait Compose pour l'ingénieur Android — déjà dans la syntaxe exacte qu'attend chaque plateforme, avec le hex d'origine préservé en commentaire pour la traçabilité.

Designers préparant des épreuves d'impression (approximation CMYK)

Quand une couleur de marque doit apparaître sur une carte de visite imprimée, l'approximation CMYK donne une estimation rapide à partager avec l'imprimeur avant la conversion ICC proprement dite. Collez le hex de marque, copiez les pourcentages CMYK, envoyez à l'imprimeur pour un devis rapide — puis remettez-vous-en à la conversion ICC consciente du profil de l'imprimeur pour la correspondance finale contre la presse précise.

Ingénieurs d'accessibilité vérifiant WCAG et APCA

WCAG 2.1 est la norme réglementaire (ADA, EAA, Section 508) aujourd'hui ; APCA Lc est le successeur proposé pour WCAG 3. Les deux métriques affichées côte à côte signifient qu'un designer peut vérifier qu'une couleur de texte courant atteint le 4,5:1 WCAG contre le blanc, puis vérifier la cohérence avec APCA Lc 75 également, sur un seul écran — sans rebondir entre deux calculatrices séparées.

Enseignants enseignant les concepts d'espace colorimétrique

La vue simultanée à neuf champs rend visibles les relations entre espaces colorimétriques. Saisissez une valeur OKLCH, regardez HSL dériver parce que L signifie des choses différentes dans chaque espace. Faites glisser le curseur de teinte et regardez hex, RGB et CMYK se mettre tous à jour. Montrez les badges de gamut chromatique passer au rouge quand vous poussez le chroma au-delà de sRGB. L'outil est sa propre démo de classe pour un cours de niveau universitaire en graphique ou IHM.

Responsables de marque trouvant le nom CSS le plus proche

Quand le texte marketing dit « un accent couleur tomate » mais que le hex de marque réel est `#FF6347`, le champ Named renvoie `tomato (exact)` parce que c'est littéralement ce que `tomato` résout dans la spec CSS. Pour les hex quasi-équivalents, le champ renvoie le nom le plus proche avec la distance ΔE en OKLAB — utile pour la documentation, la prose et la nomenclature de couleur informelle.

Développeurs web convertissant les palettes HEX héritées vers OKLCH

Un site plus ancien peut avoir une palette de marque de 50 couleurs définie en propriétés personnalisées CSS sous forme de codes hex. Moderniser vers OKLCH permet à l'équipe de marque d'exprimer les mêmes rampes dans un espace perceptuellement uniforme. Collez chaque hex, copiez la sortie OKLCH, échangez dans les définitions de variables. Le panneau Teintes claires/Teintes foncées en dessous vérifie que la rampe résultante est visuellement régulière avant la livraison.

Mainteneurs open source documentant les jetons de design

La documentation des jetons de design doit généralement afficher la même couleur dans plusieurs syntaxes — hex pour le bloc de code CSS, OKLCH pour la table de spec, le nom de couleur pour les mentions en prose. La vue à champs simultanés permet à un mainteneur de copier chacune en un passage plutôt que de relancer trois conversions séparées. Le hash d'URL partageable permet aussi aux contributeurs de pointer vers la couleur exacte en discussion dans un ticket GitHub.

Mathématiques et algorithmes de conversion de couleurs

OKLCH comme source de vérité interne

L'outil conserve la valeur de couleur canonique sous forme de triplet OKLCH en interne. Chaque champ modifiable tire sa valeur affichée de ce triplet à chaque frappe ; chaque édition utilisateur met d'abord à jour le triplet, puis déclenche un nouveau rendu des huit autres champs. Cela élimine la dérive en virgule flottante à chaque étape qui afflige les convertisseurs qui pivotent via HSL ou sRGB. Le choix d'OKLCH plutôt qu'OKLAB est délibéré — la forme polaire préserve la teinte comme axe stable, donc faire glisser le curseur de teinte ne traverse pas accidentellement le gris. Selon l'article de Björn Ottosson de 2020, l'uniformité perceptuelle d'OKLAB est l'argument le plus fort pour le traiter comme la lingua franca des mathématiques de couleur modernes.

Sources des matrices (W3C CSS Color 4 + Ottosson 2020)

Chaque matrice de conversion dans le code source est citée à sa source primaire. La fonction gamma par morceaux sRGB ↔ linear-sRGB est W3C CSS Color 4 §11.2 (`v <= 0.04045 ? v/12.92 : ((v+0.055)/1.055)^2.4`). La matrice 3×3 linear-sRGB ↔ CIE XYZ D65 est CSS Color 4 §15.1. La matrice XYZ D65 ↔ LMS et l'étape racine cubique d'OKLAB proviennent de l'implémentation de référence d'Ottosson sur `https://bottosson.github.io/posts/oklab/`, exactement comme publiée. Aucune matrice n'est recalculée ni redérivée — les copier verbatim garde la sortie identique aux vecteurs de référence de la spec.

Formule CMYK naïve et la mise en garde ICC

Notre sortie CMYK utilise la formule manuelle standard : `K = 1 - max(R, G, B); C = (1-R-K)/(1-K); M = (1-G-K)/(1-K); Y = (1-B-K)/(1-K)` opérant sur des valeurs sRGB normalisées. C'est une approximation délibérée. La vraie exactitude d'impression exige une conversion par profil ICC contre la presse, l'encre (par ex. US Web Coated SWOP v2, Fogra39, Japan Color 2011) et le papier précis, ce qui peut décaler les canaux de 5 à 15 %. Nous affichons le champ CMYK avec un avertissement visible pour que les utilisateurs n'envoient pas nos valeurs directement à une presse. Traitez la sortie comme un contrôle de cohérence pour un devis, pas comme un livrable.

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

Une couleur est considérée comme in-gamut pour un espace cible (sRGB, Display P3, Rec2020) si chaque canal entre dans `[-ε, 1 + ε]` après conversion vers les primaires de cet espace, où `ε = 1e-7` absorbe le bruit de précision en virgule flottante autour des frontières. Le badge de gamut chromatique de chaque espace passe au rouge quand un canal dépasse la plage. Cela attrape le cas courant — une couleur OKLCH gamut chromatique large comme `oklch(0.7 0.4 30)` signale hors-sRGB mais in-P3, vous indiquant quels écrans la restitueront fidèlement. La vérification s'exécute à chaque frappe.

Algorithme de snap par réduction de chroma

Snap to sRGB utilise une recherche binaire sur l'axe Chroma : gardez L et H fixes aux valeurs actuelles, recherchez C ∈ [0, currentC] pour le plus grand C dont la conversion sRGB reste in-gamut. La recherche s'exécute sur au plus 30 itérations (précision ~10⁻⁹), bien plus qu'il n'en faut pour la précision visuelle. Cela correspond à l'algorithme informatif de gamut-mapping décrit dans CSS Color 4 §13 — préserver la clarté perceptuelle et la teinte tout en ne réduisant que le chroma garde la couleur ramenée comme reconnaissablement de la même famille de teinte. Nous ne tronquons pas les canaux RGB directement parce que cela distord la teinte de façon perceptible (surtout dans les bleus).

Matrices CVD Brettel + Machado

La simulation du daltonisme utilise deux familles de matrices publiées. Les trois dichromacies — protanopie, deutéranopie, tritanopie — utilisent les matrices Brettel-Viénot-Mollon 1997 opérant en linear-RGB (décodage gamma d'abord, application de la matrice, encodage gamma retour). Les trois trichromacies anomales — protanomalie, deutéranomalie, tritanomalie — utilisent les matrices Machado-Oliveira-Fernandes 2009 à sévérité 0,66, ce qui correspond à un patient trichromatique anomal typique. Achromatopsie et achromatomalie partielle utilisent les poids de luminance rec601 (`0.299R + 0.587G + 0.114B`) pour une projection en niveaux de gris. Les huit simulations rendent à chaque changement de couleur.

WCAG 2 vs APCA : laquelle utiliser et quand

WCAG 2.x (norme actuelle) calcule un ratio de contraste symétrique à partir de la luminance relative : `(L1 + 0.05) / (L2 + 0.05)`, cible 4,5:1 pour un texte courant normal et 7:1 pour AAA. C'est le plancher légal de conformité pour les audits d'accessibilité en 2026. APCA (Accessible Perceptual Contrast Algorithm) est le successeur proposé pour WCAG 3 — sensible à la polarité (clair-sur-foncé est noté différemment de foncé-sur-clair), mieux corrélé à la lisibilité perçue par l'humain, cible `|Lc| ≥ 75` pour le texte courant. Les deux métriques affichées sur une seule ligne laissent un designer satisfaire WCAG 2 pour la conformité et APCA pour la lisibilité réelle sans rebondir entre deux calculatrices séparées.

Bonnes pratiques pour la conversion de couleurs

Préférez OKLCH pour les jetons de système de design ; HEX pour l'héritage

Pour tout nouveau système de design livré en 2025 ou au-delà, 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 le hex ne peut encoder. Gardez un repli hex pour les navigateurs plus anciens via `@supports not (color: oklch(0 0 0))` ou PostCSS au build, mais faites d'OKLCH la valeur canonique dans votre magasin de jetons. Les systèmes hérités avec des milliers de variables hex existantes peuvent rester en hex jusqu'à une migration planifiée — ne brassez pas pour le plaisir.

Traitez la sortie CMYK comme une approximation, confirmez avec l'imprimeur

Les chiffres CMYK que cet outil affiche sont une formule naïve basée sur sRGB, pas une conversion par profil ICC. Utilisez-les pour des devis approximatifs et des comparatifs internes. Avant tout vrai tirage, envoyez le hex original (pas l'approximation CMYK) au prestataire d'impression et laissez-le faire sa propre conversion ICC contre la presse, l'encre et le papier précis. Le décalage de 5 à 15 % par canal d'une conversion correcte peut facilement transformer un rouge net en orange boueux si l'approximation est livrée directement.

Utilisez APCA Lc pour une accessibilité tournée vers l'avenir

WCAG 2.x continuera d'être le plancher réglementaire pendant plusieurs années encore, mais APCA est la direction que prend la norme. Pour les nouveaux designs, atteignez `|Lc| ≥ 75` pour le texte courant et `|Lc| ≥ 60` pour le grand texte aux côtés des planchers WCAG 2.1. APCA attrape les problèmes de lisibilité que le ratio symétrique de WCAG 2 manque — particulièrement le texte à traits fins sur fond lumineux, où le ratio WCAG paraît bon mais où le texte disparaît effectivement à distance de lecture normale.

Passez les couleurs gamut chromatique large par la vérification Display P3

Si vous ciblez du matériel Apple moderne (iPhone, iPad, MacBook depuis 2017) ou livrez du contenu HDR-aware, définissez les couleurs de marque en OKLCH et utilisez le badge Display P3 pour vérifier qu'elles tiennent dans P3 même si elles dépassent sRGB. Les couleurs gamut chromatique plus large paraissent nettement plus saturées sur les écrans P3 et se dégradent gracieusement via la compression de chroma appliquée par le navigateur sur les écrans sRGB-only. Ne ramenez pas pré-emptivement à sRGB sauf si vous savez que tout votre public est sur du matériel hérité.

Choisissez des teintes foncées perceptuellement uniformes via les tons OKLCH

Quand vous générez une rampe 50/100/200/.../900 pour une couleur de marque, utilisez le panneau Tons : il fait varier L par incréments égaux tout en gardant C et H fixes. Le résultat est une rampe perceptuellement régulière où l'écart visuel entre 400 et 500 paraît identique à l'écart entre 500 et 600. Régler à la main des rampes HSL pour la même régularité est un exercice de plusieurs heures par couleur ; OKLCH le donne gratuitement.

Utilisez la pipette avec parcimonie pour faire correspondre des couleurs entre onglets

L'API EyeDropper (Chromium-only en 2026) vous laisse cliquer n'importe où à l'écran — même hors du navigateur — pour échantillonner la couleur de ce pixel. Utile pour faire correspondre une couleur depuis une capture d'écran, une image vidéo ou l'UI d'une autre application. Traitez le résultat comme un point de départ, pas comme la valeur finale — le rendu écran applique une gestion des couleurs qui peut différer du fichier source. Pour les couleurs de marque canoniques, récupérez toujours le hex depuis la source de design (Figma, Sketch, le PDF des chartes de marque) plutôt que d'utiliser la pipette sur une capture d'écran.

Mettez en signet les URL avec `#hex=...` pour des décisions de palette partageables

La couleur actuelle s'encode automatiquement dans le hash d'URL sous la forme `#hex=...` ou `#oklch=...`. Copiez l'URL, collez-la dans un fil Slack ou un ticket GitHub, et quiconque l'ouvre atterrit sur la couleur exacte. Utile pour les fils de revue de design où « le bleu de marque » doit signifier un triplet OKLCH spécifique. Le hash se met à jour à chaque changement, donc l'URL dans votre barre d'adresse est toujours la couleur actuelle en direct — mettez-la en signet pour revenir à une palette spécifique plus tard.

Questions fréquemment posées