Convertisseur de couleur

C'est quoi un convertisseur de couleurs ?

Un convertisseur de couleurs prend une couleur dans n'importe quel format courant — HEX, RGB, HSL, OKLCH — et vous montre tous les autres formats qui désignent exactement la même couleur. C'est l'outil du quotidien pour les designers et les développeurs : caler une couleur de marque, déboguer des variables CSS, comparer les palettes des modes clair et sombre, ou contrôler le contraste pour l'accessibilité.

Le CSS prend en charge plusieurs modèles de couleur, chacun avec ses points forts. HEX et RGB décrivent les couleurs via les composantes rouge, vert et bleu. HSL est plus intuitif (teinte, saturation, luminosité). OKLCH est un modèle perceptuel : à variation numérique égale correspond une variation visuelle perçue à peu près égale — pratique pour générer des teintes, des nuances et des palettes accessibles.

L'accessibilité repose sur le contraste, pas seulement sur la couleur. Le WCAG définit un ratio de contraste entre le texte et le fond — au minimum 4,5:1 pour le corps de texte courant, 3:1 pour les gros titres. Un bon outil affiche les deux ratios à côté de votre couleur, histoire de ne pas livrer une UI inaccessible par mégarde.

Ce que vous allez apprendre en convertissant des couleurs

• HEX n'est qu'une notation abrégée du RGB — #ff8800 est strictement la même couleur que rgb(255, 136, 0).
• HSL sépare la *teinte* (quelle couleur), la *saturation* (à quel point elle est vive) et la *luminosité* (à quel point elle est claire). Modifier l'une sans toucher aux autres est bien plus naturel que de bricoler R/V/B.
• OKLCH est perceptuellement uniforme : augmenter L de 10 % en OKLCH produit à peu près la même variation de luminosité quelle que soit la teinte. HSL ne se comporte pas comme ça.

Convertir et vérifier une couleur, étape par étape

1. 1

   Saisissez une couleur

   Collez une valeur HEX, RGB, HSL ou OKLCH, ou choisissez une couleur via la pipette / le sélecteur natif.

2. 2

   Lisez tous les formats d'un seul coup d'œil

   Le convertisseur affiche la même couleur exprimée dans chaque format pris en charge. Cliquez sur n'importe quelle valeur pour la copier dans le presse-papiers.

3. 3

   Ajustez avec les curseurs HSL ou OKLCH

   Faites glisser le curseur de luminosité pour obtenir des teintes (plus claires) ou des nuances (plus sombres). Préférez la luminosité OKLCH pour des paliers visuellement réguliers.

4. 4

   Vérifiez le contraste avec les couleurs de texte

   Le panneau de contraste affiche le ratio WCAG sur fond blanc et sur fond noir. Visez ≥ 4,5 pour le corps de texte et ≥ 3 pour les gros titres.

5. 5

   Copiez la valeur dans votre CSS

   Choisissez le format qui colle à votre code — HEX pour des design tokens, OKLCH pour des palettes modernes, HSL quand vous voulez bricoler avec calc().

Aide-mémoire des formats de couleur CSS

Les cinq formats que vous croisez au quotidien, illustrés sur la même couleur. Référence complète sur la page <color> de MDN.

Exemples de conversions à essayer

color: #6c8cff;color: rgb(108 140 255);color: hsl(228 100% 71%);color: oklch(67% 0.16 268);

--brand:        oklch(67% 0.16 268);--brand-light:  oklch(78% 0.12 268);--brand-lighter:oklch(88% 0.08 268);--brand-dark:   oklch(55% 0.18 268);--brand-darker: oklch(40% 0.16 268);

background: rgb(108 140 255 / 0.5);background: #6c8cff80;

Erreurs fréquentes lors des conversions de couleurs

• Comparer la luminosité HSL d'une teinte à l'autre. hsl(60 100% 50%) (jaune) et hsl(240 100% 50%) (bleu) ont le même L mais une luminosité perçue très différente — utilisez OKLCH pour les comparaisons visuelles.
• Oublier que le HEX à 3 chiffres (#abc) est juste l'abréviation du HEX à 6 chiffres (#aabbcc).
• Utiliser rgba(...) au lieu de la syntaxe moderne rgb(... / alpha) — les deux fonctionnent, mais la forme avec slash est celle de la spec actuelle et se lit mieux dans les outils.

FAQ — Convertisseur de couleurs