Comment convertir des couleurs entre HEX, RGB et HSL

HEX, RGB et HSL sont les trois formats de couleur utilisés sur le web. HEX (ex. #2563EB) est compact et dominant en CSS, RGB décrit une couleur par ses composantes rouge/vert/bleu, et HSL la décrit par teinte, saturation et luminosité. Pour convertir instantanément une couleur entre ces trois formats, utilisez le Convertisseur de Couleur de NeatForge.

Les trois formats de couleur expliqués

HEX

HEX est une notation hexadécimale sur 6 chiffres (#RRGGBB), où chaque paire représente une composante de 0 à 255. Le format court #fff est automatiquement étendu en #FFFFFF. C’est le format le plus courant en CSS.

RGB

RGB décrit une couleur par trois entiers de 0 à 255 : rgb(37, 99, 235). La variante rgba() ajoute un canal alpha (opacité) entre 0 et 1.

HSL

HSL décrit une couleur par :

• Teinte (Hue) : angle de 0 à 360 sur le cercle chromatique (0 = rouge, 120 = vert, 240 = bleu).
• Saturation : pourcentage de 0 % (gris) à 100 % (couleur pure).
• Luminosité : pourcentage de 0 % (noir) à 100 % (blanc), 50 % étant la couleur pure.

Exemple : hsl(217, 83%, 53%).

Quand utiliser chaque format ?

• HEX : à privilégier en CSS pour sa compacité et sa lisibilité. Idéal pour les couleurs unies sans transparence.
• RGB / rgba() : nécessaire pour ajouter un canal alpha avant CSS Color 4 (rgba(37, 99, 235, 0.5)).
• HSL / hsla() : plus intuitif pour construire des palettes. Modifier la luminosité de 10 % garde la même teinte et saturation.

Quelle différence entre RGB et HSL ?

RGB modélise la lumière additive : chaque composante contribue à la couleur finale. C’est précis mais peu intuitif — passer du rouge au vert demande de recalculer trois valeurs.

HSL modélise la perception : teinte, saturation et luminosité sont indépendantes. Pour assombrir une couleur, il suffit de baisser la luminosité sans toucher à la teinte. C’est pourquoi les designers préfèrent HSL pour construire des palettes et des thèmes.

Comment convertir une couleur

1. Ouvrez le Convertisseur de Couleur.
2. Saisissez une valeur HEX, ajustez les curseurs RGB ou HSL, ou cliquez sur un préréglage Tailwind.
3. Vérifiez l’aperçu en direct en haut de la page.
4. Cliquez sur Copier à côté de HEX, RGB ou HSL pour obtenir une valeur prête pour CSS.

Les trois formats se mettent à jour simultanément, ce qui permet de comparer et de copier celui dont vous avez besoin sans changer d’outil.

Astuces CSS : color-mix et notations modernes

CSS Color 4 et 5 introduisent plusieurs nouveautés utiles :

• Notation hex à 8 chiffres : #2563EB80 inclut un canal alpha (50 %).
• color-mix() : mélange deux couleurs dans un espace colorimétrique donné.

  background: color-mix(in srgb, #2563EB 40%, white);

• Relative colors : dérive une couleur d’une autre sans variable intermédiaire.

  color: hsl(from #2563EB h s calc(l + 10%));

HSL reste le plus simple pour ce genre d’ajustement manuel.

Foire aux questions

Q : Le format HEX à 3 chiffres est-il pris en charge ? R : Oui. #fff est automatiquement étendu en #FFFFFF. La sortie utilise toujours la forme à 6 chiffres pour la compatibilité maximale.

Q : Quelle est la différence entre RGB et rgba() ? R : RGB est sans transparence. rgba() ajoute un canal alpha entre 0 (transparent) et 1 (opaque).

Q : Comment vérifier le contraste de mes couleurs ? R : Convertissez vos couleurs ici, puis utilisez un vérificateur de contraste WCAG pour confirmer l’accessibilité.

→ Convertir une couleur entre HEX, RGB et HSL