Formats de couleur expliqués : HEX, RGB et HSL
Réponse rapide
HEX (#RRGGBB) et RGB (0 à 55 par canal) codent directement les intensités rouge, verte et bleue. HSL (teinte 0—60°, saturation/luminosité 0—00 %) encode la couleur d'une manière qui correspond à la perception humaine, facilitant ainsi la création de palettes et de nuances. Convertissez entre les trois avec notre convertisseur de couleurs.
Introduction
Les couleurs Web sont spécifiées dans trois formats dominants : HEX (base 16 rouge, vert, bleu), RGB (décimal 0 à 55 par canal) et HSL (teinte, saturation, luminosité). Tous les trois décrivent le même espace colorimétrique sRVB mais exposent des axes différents : HEX et RGB sont orientés matériel (valeurs de canal directes), tandis que HSL est orienté humain (teinte intuitive, saturation et luminosité). Modern CSS prend également en charge l'alpha via HEX8, rgba() et hsla().
Pas à pas
-
Comprendre la notation HEX
HEX écrit chaque canal sous la forme d'un numéro en base 16 à deux chiffres : #RRGGBB. 00 est éteint, FF (255) est à pleine intensité. #FF0000 est rouge pur, #00FF00 vert pur, #0000FF bleu pur, #FFFFFF blanc, #000000 noir. Un raccourci à 4 chiffres #RGB se développe en #RRGGBB et #RRGGBBAA ajoute de l'alpha (par exemple, #FF573380 correspond à 50 % d'alpha).
-
Comprendre la notation RGB
RGB utilise le nombre décimal 0 à 55 par canal : rgb(255, 87, 51) est le même que #FF5733. La fonction rgba() ajoute un 0— alpha : rgba(255, 87, 51, 0.5) est opaque à 50 %. RGB est équivalent à HEX — c'est juste un nombre décimal au lieu de base 16.
-
Comprendre la notation HSL
HSL utilise la teinte (0 à 60° sur la roue chromatique : 0=rouge, 120=vert, 240=bleu), la saturation (0 % = gris, 100 % = couleur) et la luminosité (0 % = noir, 50 % = normal, 100 % = blanc). hsl(11, 100%, 60%) est un orange vif. HSL rend trivial la création de teintes (augmenter la luminosité) et de nuances (diminuer la luminosité) de la même teinte.
-
Convertir entre les formats
HEX→RGB : analysez chaque paire en base 16. RGB→HEX : convertissez chaque canal en base 16 à 2 chiffres. RGB→HSL : calcule le max/min des canaux normalisés, luminosité = (max+min)/2, la saturation dépend de la luminosité, la teinte est l'angle du canal dominant. Utilisez notre convertisseur de couleurs pour faire tout cela instantanément.
-
Choisissez le bon format pour la tâche
Utilisez HEX pour plus de compacité dans la conception des jetons et des actifs. Utilisez RGB/rgba() lorsque vous devez interpoler ou animer des canaux. Utilisez HSL/HSLA lors de la génération de palettes, de nuances ou de variations de thème : ajuster la luminosité de 10 % est bien plus facile que de raisonner sur les deltas RGB.
Exemples
Du rouge pur dans les trois formats
Saisir: #FF0000
Sortir: rgb(255, 0, 0) = hsl(0, 100%, 50%)
Un orange vif
Saisir: #FF5733
Sortir: rgb(255, 87, 51) = hsl(11, 100%, 60%)
Blanc et noir
Saisir: #FFFFFF et #000000
Sortir: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
Construire une teinte en 5 étapes à partir d'une teinte HSL
Saisir: hsl(210, 70%, 50%) — varier la légèreté 30/40/50/60/70%
Sortir: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8 — une palette bleue cohérente
Problèmes courants
- Mélange de HEX à 3 et 6 chiffres : #F00 et #FF0000 sont de la même couleur, mais certains analyseurs n'acceptent qu'une seule forme. Normalisez à 6 chiffres dans le code pour éviter les surprises.
- Oublier que HSL luminosité 50 % n'est pas une « demi-luminosité » : à 100 % de saturation, 50 % de luminosité est la teinte pure ; au-dessus de 50 %, il vire au blanc, en dessous de 50 %, il vire au noir. « 50 % de gris » est hsl (0, 0 %, 50 %).
- Confusion du canal alpha : #RRGGBBAA (HEX8) est pris en charge dans les navigateurs modernes mais pas dans les plus anciens ; rgba()/hsla() a un support plus large. Testez toujours l’environnement cible.
- Incompatibilité d'espace colorimétrique : HEX, RGB et HSL décrivent tous sRGB. Si vous effectuez une conversion vers/depuis P3 ou Lab/OKLCH (utilisés par les écrans modernes), une copie de canal naïve produit de mauvaises couleurs : utilisez une bibliothèque de couleurs appropriée.
Conseils
- Utilisez HSL lors de la conception d'une palette : choisissez une teinte, puis faites varier la luminosité (par exemple 30/50/70 %) et la saturation (par exemple 60/80/100 %) pour générer des nuances et des teintes cohérentes.
- Pour des raisons d'accessibilité, vérifiez le rapport de contraste par rapport à l'arrière-plan : WCAG AA nécessite 4,5 : 1 pour un texte normal, AAA 7 : 1. Utilisez notre convertisseur de couleurs pour calculer la luminance et le contraste relatifs.
- Préférez les modernes CSS color-mix() ou oklch() pour une interpolation perceptuellement uniforme —RGB l'interpolation peut traverser des gris boueux lors du mélange de couleurs complémentaires.
- Lors de la génération de dégradés, convertissez d'abord les points finaux dans le même format : mélanger HEX et HSL dans une seule déclaration de dégradé peut produire des points médians inattendus.