Comment convertir un code HEX en RGB ?

On sépare le code hexadécimal en trois paires de deux chiffres (rouge, vert, bleu) et on les convertit chacune en base 10. Exemple : #FF0000 → FF=255 (rouge), 00=0 (vert), 00=0 (bleu), soit rgb(255, 0, 0).

Qu'est-ce que la teinte, la saturation et la luminosité (HSL) ?

La teinte (H) est la couleur pure sur un cercle chromatique de 0 à 360°, la saturation (S) son intensité de 0 % (gris) à 100 % (couleur vive), et la luminosité (L) sa clarté de 0 % (noir) à 100 % (blanc), avec 50 % la couleur pure.

Quelle est la différence entre les formats HEX, RGB et HSL ?

Les trois décrivent exactement la même couleur, sous des formes différentes : HEX est compact (#RRGGBB), pratique à copier-coller ; RGB exprime directement les trois canaux de lumière (0-255) ; HSL est souvent plus intuitif pour ajuster une teinte ou l'éclaircir/assombrir sans changer sa nature.

Convertisseur de couleurs : HEX, RGB, HSL

Une même couleur, trois écritures. Exemple : #FF0000 = rgb(255, 0, 0) = hsl(0°, 100%, 50%) — le rouge pur.

Trois façons de décrire la même couleur

Le format HEX (#RRGGBB) encode chaque canal rouge, vert et bleu sur deux chiffres hexadécimaux (00 à FF, soit 0 à 255 en base 10) — c'est le format le plus utilisé en CSS et en design pour sa compacité. Le format RGB exprime directement ces trois mêmes valeurs en base 10. Le format HSL (teinte, saturation, luminosité) décrit la couleur autrement : une position sur le cercle chromatique (teinte), une intensité (saturation) et une clarté (luminosité) — souvent plus intuitif pour éclaircir, assombrir ou désaturer une couleur sans changer sa teinte de base.

Comment utiliser le convertisseur ?

Saisissez un code hexadécimal, avec ou sans le symbole #, en 6 ou 3 chiffres (#3B82F6 ou #36F).
Visualisez l'aperçu de la couleur.
Lisez les équivalents RGB et HSL, prêts à copier dans votre code.

Quelques couleurs de référence

HEX	RGB	HSL
#FF0000	rgb(255, 0, 0)	hsl(0°, 100%, 50%)
#00FF00	rgb(0, 255, 0)	hsl(120°, 100%, 50%)
#0000FF	rgb(0, 0, 255)	hsl(240°, 100%, 50%)
#FFFFFF	rgb(255, 255, 255)	hsl(0°, 0%, 100%)
#000000	rgb(0, 0, 0)	hsl(0°, 0%, 0%)

Cas d'usage

Développement web : convertir une couleur de maquette en code CSS exploitable.
Retouche de charte graphique : ajuster la luminosité d'une couleur en HSL sans en changer la teinte.
Vérifier une couleur extraite d'une image ou d'un logo.

Erreurs fréquentes

Oublier que HSL et HSB/HSV sont différents : ce sont deux modèles proches mais non identiques, avec des formules de conversion distinctes.
Confondre la teinte (0-360°) avec un pourcentage : seules la saturation et la luminosité s'expriment en pourcentage.
Saisir un code à 8 chiffres (avec transparence alpha) sans que l'outil le prenne en compte : ce convertisseur traite les couleurs opaques à 6 chiffres.

Compatibilité

Fonctionne sur mobile, tablette et ordinateur, sans inscription. Pour du texte à encoder, voyez l'encodeur Base64.

Outil de conversion exact, basé sur les formules standard de l'espace colorimétrique CSS. Ne gère pas le canal de transparence (alpha).

Convertisseur de couleurs