Skip to main content

Convertisseur de couleurs

Français

Convertissez entre les formats de couleur HEX, RGB et HSL.

hex
#3b82f6
rgb
rgb(59, 130, 246)
hsl
hsl(217, 91%, 60%)
Tous les calculs sont effectués localement dans votre navigateur. Aucune donnée n'est envoyée au serveur.

Les résultats sont fournis à titre informatif. Vérifiez-les auprès d'autres sources.

HEX, RGB et HSL — la même couleur, trois écritures

Ces trois notations décrivent des couleurs identiques ; elles diffèrent par ce qu'elles rendent facile. HEX et RGB adressent directement les canaux rouge, vert et bleu. HSL sépare la teinte de la saturation et de la luminosité, d'où son intérêt pour construire une palette.

Comment ça marche

  • HEX, c'est deux chiffres hexadécimaux par canal : #RRGGBB, chaque paire allant de 00 à FF (0–255).
  • RGB reprend les mêmes trois nombres en décimal, parfois avec un canal alpha via rgba().
  • HSL donne la teinte en degrés sur une roue chromatique (0–360), plus la saturation et la luminosité en pourcentages.
HEX → RGB :  découper en paires, lire chacune en base 16
  #3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246)

RGB → HSL :  normaliser sur 0–1, puis
  L = (max + min) / 2
  S = (max − min) / (1 − |2L − 1|)
  H = l'angle dépendant du canal dominant

Exemple chiffré

Conversion de #3B82F6 — un bleu d'interface courant — dans les trois notations.

  1. 3B = 3×16 + 11 = 59, 82 = 8×16 + 2 = 130, F6 = 15×16 + 6 = 246
  2. rgb(59, 130, 246)
  3. normalisation : r=0,231, v=0,510, b=0,965 → max=0,965 (bleu), min=0,231
  4. L = (0,965 + 0,231) / 2 = 0,598 → 60%
  5. S = (0,965 − 0,231) / (1 − |2(0,598) − 1|) = 0,734 / 0,804 = 0,913 → 91%
  6. le bleu est le canal dominant, d'où H ≈ 217°

hsl(217, 91%, 60%). Pour en tirer une palette, gardez la teinte à 217 et faites varier la luminosité — précisément le geste que HSL rend trivial et que HEX rend pénible.

Lire le résultat

  • Une luminosité égale en HSL ne signifie pas une clarté perçue égale. Le jaune à 50% paraît bien plus lumineux que le bleu à 50%, car HSL n'est qu'une transformation mathématique de RGB et ignore tout de la vision humaine. Pour un contraste accessible, calculez le ratio de contraste WCAG au lieu de comparer des luminosités.
  • Le HEX à trois chiffres est un raccourci où chaque chiffre est doublé : #3BF vaut #33BBFF, pas #03B0F0.
  • Les arrondis s'accumulent. Un aller-retour HEX → HSL → HEX peut décaler un canal d'une unité : gardez une notation de référence dans vos jetons de design.
  • Les espaces colorimétriques CSS plus récents — oklch en particulier — corrigent le défaut perceptuel de HSL et méritent d'être employés là où le support navigateur le permet.

Questions fréquentes

Quelle notation utiliser en CSS ?
HSL ou oklch pour tout ce que vous générez systématiquement, comme les nuances d'une couleur de marque, car changer un nombre ne change qu'une chose. HEX convient très bien aux valeurs fixes fournies par un designer.
Pourquoi ma couleur diffère-t-elle dans une autre application ?
Presque toujours une question de profil colorimétrique. Le même triplet RGB s'affiche différemment en sRGB et en Display P3, d'où des captures de la même page qui ne concordent pas d'un appareil à l'autre.

Sources