Convertisseur de couleurs

Convertissez entre HEX, RGB et HSL en temps réel.

#21409a

rgb(72, 0, 178)

HEX

#21409a

RGB

rgb(72, 0, 178)

HSL

hsl(262, 100%, 35%)

CSS Variable

--color: #21409a;

Entrer un code HEX manuellement

HEX, RGB, HSL : quelles différences ?

Ces trois notations décrivent exactement les mêmes couleurs, mais sous des angles différents. Le HEX (#21409a) est la forme compacte historique du web : deux chiffres hexadécimaux par canal rouge, vert, bleu. Le RGB exprime les mêmes canaux en décimal (0-255), plus lisible pour manipuler une couleur en JavaScript. Le HSL (teinte, saturation, luminosité) est le plus intuitif pour un humain : la teinte est un angle sur la roue chromatique (0° rouge, 120° vert, 240° bleu), et il suffit de faire varier la luminosité pour éclaircir ou assombrir une couleur sans en changer la nature.

Quel format choisir en CSS ?

HEX : parfait pour les couleurs fixes d'une charte graphique — compact et universel.
HSL : idéal pour décliner une palette (survol plus clair, bordure plus foncée) en ne touchant qu'à la luminosité.
RGB/RGBA : pratique quand la couleur est calculée dynamiquement ou qu'il faut de la transparence.

FAQ

Comment ajouter de la transparence ?

Ajoutez un canal alpha : #21409a80 en HEX 8 chiffres, rgba(33, 64, 154, 0.5) ou hsl(223 65% 42% / 0.5) en notation moderne.

Pourquoi l'hexadécimal pour les couleurs ?

Parce qu'un octet (0-255) s'écrit exactement avec deux chiffres hexadécimaux : la notation #RRGGBB encode 3 octets en 6 caractères. Voir aussi notre convertisseur de bases.

Comment vérifier qu'un texte reste lisible sur ma couleur ?

Visez un rapport de contraste d'au moins 4,5:1 entre texte et fond (norme WCAG AA). En HSL, écarter les luminosités des deux couleurs est le moyen le plus direct d'y parvenir.