Convertisseur de couleurs — HEX, RGB et HSL

Convertissez les couleurs entre les trois formats que tout designer et développeur rencontre : HEX (#3B82F6), RGB (rgb(59, 130, 246)) et HSL (hsl(217, 91%, 60%)). Collez un code hex pour voir ses équivalents RGB et HSL, ou changez de mode pour construire un code hex à partir de valeurs RGB.

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

Comment fonctionne ce calcul

Une couleur HEX regroupe trois canaux — rouge, vert, bleu — dans une chaîne hexadécimale (base 16) à 6 chiffres, deux chiffres par canal, chacun allant de 00 à FF (0 à 255 en décimal). Une forme abrégée à 3 chiffres comme #FFF double chaque chiffre, donc #FFF équivaut à #FFFFFF.

Le RGB écrit les trois mêmes canaux en nombres décimaux simples de 0 à 255, c'est pourquoi rgb(59, 130, 246) et #3B82F6 décrivent exactement la même couleur — 59 = 0x3B, 130 = 0x82, 246 = 0xF6.

Le HSL décrit la même couleur différemment : la teinte (Hue) est la position sur une roue chromatique de 0 à 360° (0 = rouge, 120 = vert, 240 = bleu), la saturation indique à quel point la couleur est vive (0 % = gris, 100 % = pleinement saturée), et la luminosité (Lightness) indique la proximité avec le noir ou le blanc (0 % = noir, 100 % = blanc). Elle est calculée à partir des valeurs RGB en trouvant le canal maximal et minimal ainsi que leur écart.

Exemple chiffré

Le « blue-500 » par défaut de Tailwind CSS est #3B82F6. En le convertissant, on obtient rgb(59, 130, 246) et hsl(217, 91%, 60%) — le même bleu, écrit de trois façons différentes en CSS.

HEX vs RGB vs HSL — quand utiliser chacun

Format	Exemple	Idéal pour
HEX	#3B82F6	Outils de design, chartes de couleurs de marque, copier-coller rapide dans le CSS
RGB	rgb(59, 130, 246)	Quand des valeurs de canal explicites ou l'opacité rgba() sont nécessaires
HSL	hsl(217, 91%, 60%)	Création de palettes — ajuster luminosité/saturation en gardant la teinte

Comment les chiffres hex correspondent aux canaux

#RRGGBB — RR est le rouge (00–FF), GG est le vert (00–FF), BB est le bleu (00–FF)
Chaque paire est un nombre en base 16 : FF = 15×16 + 15 = 255, 80 = 8×16 + 0 = 128, 00 = 0
#000000 est noir, #FFFFFF est blanc, #FF0000 est rouge pur
La forme abrégée à 3 chiffres double chaque chiffre : #ABC → #AABBCC

Lire une valeur HSL d'un coup d'œil

hsl(217, 91%, 60%) donne instantanément trois informations : 217° est une teinte bleue (les bleus se situent autour de 210–250°), une saturation de 91 % signifie que la couleur est vive plutôt que terne, et une luminosité de 60 % signifie qu'elle se situe confortablement entre le noir et le blanc — un bleu vif et clair.

Cela rend le HSL pratique pour générer des palettes cohérentes : garder la teinte fixe à 217 et faire varier la luminosité de 20 % (un bleu marine presque noir) à 90 % (un bleu ciel pâle) pour obtenir une gamme de teintes assorties dans la même famille de couleurs.

Couleurs de référence courantes

Nom	HEX	RGB
Noir	#000000	rgb(0, 0, 0)
Blanc	#FFFFFF	rgb(255, 255, 255)
Rouge	#FF0000	rgb(255, 0, 0)
Vert	#00FF00	rgb(0, 255, 0)
Bleu	#0000FF	rgb(0, 0, 255)

Questions fréquentes

Quel format de couleur dois-je utiliser en CSS ?

Les trois s'affichent de façon identique dans tous les navigateurs modernes, c'est donc une question de flux de travail. HEX est compact et courant dans les outils de design ; RGB explicite les valeurs des canaux et prend en charge rgba() pour l'opacité ; HSL est le plus facile à ajuster manuellement, car on peut modifier la luminosité ou la saturation sans recalculer les trois canaux.

Est-ce que cet outil stocke ou envoie mes couleurs ?

Non. Chaque conversion s'exécute dans votre navigateur avec de simples calculs — rien n'est envoyé à un serveur ni sauvegardé.

Quelle est la différence entre #FFF et #FFFFFF ?

Aucune — #FFF est une notation CSS abrégée où chaque chiffre est doublé, donc #FFF, #ffFFFF et #FFFFFF représentent tous un blanc pur. Cet outil accepte les codes hex à 3 comme à 6 chiffres.

Comment ajouter de la transparence (alpha) ?

Ajoutez un 4e canal : rgba(59, 130, 246, 0.5) ou hsla(217, 91%, 60%, 0.5) pour une opacité de 50 %, ou un code hex à 8 chiffres comme #3B82F680 (les deux chiffres hex supplémentaires forment le canal alpha, 00–FF). Ce convertisseur se concentre sur le trio opaque RGB/HEX/HSL ; ajoutez l'alpha manuellement si nécessaire.

Pourquoi RGB et HSL donnent-ils des nombres si différents pour la même couleur ?

Ce sont deux systèmes de coordonnées pour un même point dans l'espace colorimétrique. RGB repose sur des canaux de lumière additive ; HSL réorganise cela en teinte/saturation/luminosité, ce qui est souvent plus intuitif pour choisir ou ajuster une nuance — par exemple garder la teinte et la saturation fixes et n'augmenter que la luminosité pour obtenir une teinte plus claire.

Faut-il écrire le code hex en majuscules ou en minuscules ?

Les deux fonctionnent partout — le hex ne fait pas la distinction entre majuscules et minuscules. Cet outil affiche le résultat en majuscules (#3B82F6) pour plus de lisibilité, mais #3b82f6 est exactement la même couleur.

Que se passe-t-il si j'entre un code hex invalide ?

Les champs RGB et HSL restent simplement vides tant que vous n'avez pas saisi une valeur hex valide à 3 ou 6 chiffres (lettres A–F/a–f et chiffres 0–9 uniquement, avec ou sans le # initial).

Cet outil est fourni à titre d'information générale. Vérifiez les valeurs importantes par vous-même. · Dernière révision: 25 août 2026