Aller au contenu principal
ToolsByUs

HEX vs RGB vs HSL

HEX, RGB et HSL sont trois notations pour les mêmes couleurs dans le même gamut, sRGB. HEX emballe les canaux rouge, vert et bleu en hexadécimal compact ; RGB énonce directement ces quantités additives ; HSL les réécrit en teinte, saturation et luminosité, à la façon dont les humains raisonnent. La couleur ne change jamais, seule change l’édition la plus facile.

100 % local

HEX vs RGB vs HSL en clair

Chaque couleur d’une page web finit son voyage en trois nombres : quelle quantité de lumière rouge, verte et bleue émettre. Les formats ne diffèrent que par la façon d’écrire et de grouper ces nombres. #FF6600, rgb(255, 102, 0) et hsl(24, 100%, 50%) sont le même orange, convertibles sans perte dans les deux sens, car ils s’adressent tous aux mêmes canaux sRGB.

HEX a gagné la culture du copier-coller : les outils de design, les sites de palettes et les guides de style se passent de main en main des chaînes de six caractères qui identifient une couleur comme un numéro de série. RGB est la langue natale des écrans et des données d’image. HSL est le plus récent des trois en CSS et le plus bavard sur la raison pour laquelle vous cherchez une couleur — tourner une teinte, adoucir une saturation, construire une échelle. Aucun n’est plus correct ; chacun rend une édition différente bon marché.

Ce guide parcourt chaque notation, les variantes alpha, la fonction CSS color() moderne et le contrôle d’accessibilité qui passe devant tout choix esthétique. Chaque outil relié en chemin s’exécute entièrement dans votre navigateur.

Le moyen le plus rapide de vous convaincre que les trois notations ne font qu’une est de voir une valeur basculer de l’une à l’autre : collez une couleur dans le convertisseur de couleurs et chaque format se met à jour d’un coup — HEX, RGB, HSL et les options perceptuelles comprises.

Après toute décision de palette, passez la paire premier plan et arrière-plan dans le vérificateur de contraste qui indique le ratio WCAG exact et s’il passe à chaque niveau — avant que des utilisateurs équipés d’écrans moins bons ne le découvrent à votre place.

Un gamut, trois notations

sRGB est l’espace de couleur par défaut du web : le spectre qu’affiche un écran typique, défini pour que chaque navigateur, du téléphone au moniteur de studio calibré, désigne la même couleur avec les mêmes nombres. Chaque canal va de 0 à 255, et voilà pourquoi on citait 16,777,216 couleurs (256 au cube) comme la taille de la palette du web. Une notation n’est qu’une interface utilisateur pour ces trois nombres — et pour l’alpha, un quatrième nombre qui contrôle l’opacité.

Comme les trois notations se résolvent dans les mêmes canaux, la conversion entre elles est une arithmétique exacte, jamais une approximation. Un outil qui rapporte #FF6600 comme hsl(24, 100%, 50%) ne donne pas un avis ; il fait la même algèbre que définit la spécification CSS. C’est aussi pourquoi le format que vous écrivez n’a aucun effet sur le rendu — tout cela ne concerne que l’humain qui édite la ligne.

FormatÉcritureVariante alphaLe plus pratique pour
HEX#FF6600 ou #F60#FF6600AA (8 chiffres)Copier une valeur telle quelle entre outils
RGBrgb(255, 102, 0)rgba(255, 102, 0, 0.67)Penser en quantités de lumière par canal
HSLhsl(24, 100%, 50%)hsl(24 100% 50% / 0.67)Tourner la teinte ou construire des teintes et des ombres
color()color(srgb 1 0.4 0)color(srgb 1 0.4 0 / 0.67)Nommer explicitement un espace, au-delà de sRGB

HEX : compact, portable, opaque

Un code HEX à six chiffres est trois octets en hexadécimal : FF vaut 255, 66 vaut 102, 00 vaut zéro. Cette forme date des tout premiers HTML et survit parce qu’elle est imbattable comme identifiant — courte, sans ambiguïté, sans guillemets. Si les deux chiffres de chaque canal sont identiques (FF, 66, 00), CSS accepte aussi trois chiffres : #F60. Depuis CSS Color 4, l’ajout de deux chiffres supplémentaires apporte l’alpha : #FF6600AA est le même orange à environ 67% d’opacité.

La faiblesse de HEX, c’est la composition. Regardez #FF6600 et demandez-vous ce qu’il donnera 15% plus sombre, ou quel est son complémentaire : la réponse exige de décoder l’hexadécimal de tête. Assombrir #FF6600 à l’œil a produit une génération d’approximations en #E65C00. HEX est le format pour stocker une couleur, pas le format pour raisonner sur une couleur — et c’est exactement le vide que HSL a été inventé pour combler.

RGB : le modèle additif, énoncé sans détour

Les écrans ne réfléchissent pas de la peinture ; ils émettent de la lumière, et RGB est additif : le noir, c’est tous les canaux éteints, le blanc, tous allumés, et chaque couleur est un mélange. rgb(255, 102, 0) le dit sans détour — rouge à fond, un peu de vert, pas de bleu. C’est la notation qui colle à la physique, ce qui en fait le choix naturel quand vous déboguez une valeur rendue, lisez des données d’image ou mélangez la lumière elle-même (additionnez deux couleurs RGB et vous obtenez un résultat plus lumineux, l’inverse du mélange de peinture).

Sa forme alpha, rgba(), est antérieure à la variante HEX à 8 chiffres. CSS Color 4 a aussi modernisé la syntaxe : rgb(255 102 0 / 0.67) — espaces et barre oblique au lieu de virgules — est équivalent, et le a est devenu facultatif puisque rgb() accepte quatre valeurs. Les navigateurs prennent en charge les deux écritures depuis environ 2023.

HSL : la roue lisible par l’humain

HSL réécrit les mêmes canaux en teinte (un angle sur la roue des couleurs, de 0 à 360 : rouge à 0, vert à 120, bleu à 240), saturation (0% est gris, 100% est pleinement vif) et luminosité (0% noir, 100% blanc). Son superpouvoir, ce sont les relations lisibles. Besoin d’un état de survol 10% plus clair ? hsl(24, 100%, 50%) devient hsl(24, 100%, 60%) — un seul nombre bougé, l’intention visible dans le diff. Besoin d’une échelle de marque en cinq paliers ? Gardez teinte et saturation, faites varier la luminosité. En HEX, chacune de ces éditions est un recalcul.

L’avertissement honnête : la luminosité de HSL n’est pas perceptuelle. hsl(60, 100%, 50%) (jaune) et hsl(240, 100%, 50%) (bleu) revendiquent tous deux 50% de luminosité, pourtant le jaune flambe tandis que le bleu frôle le noir. Les échelles construites sur la luminosité HSL paraissent donc inégales à l’œil. CSS Color 4 a ajouté oklch() pour corriger exactement cela — une notation cylindrique dont la luminosité suit la perception humaine, si bien que des paliers égaux paraissent égaux. Pour des échelles régulières, oklch est la réponse moderne ; les outils de couleur de ce site calculent les rampes en OKLab, l’espace perceptuel qui se cache derrière.

TeinteAngleAssociations courantes
Rouge0°Alertes, erreurs, appétit
Jaune60°Avertissements, énergie
Vert120°Succès, sécurité, croissance
Cyan180°Information, calme
Bleu240°Confiance, liens, concentration
Magenta300°Accents, créativité

Alpha et la fonction color() moderne

Chaque notation ci-dessus porte l’alpha de la même façon : comme une fraction d’opacité allant de 0 à 1. Les écritures diffèrent — #RRGGBBAA le met en hexadécimal (AA vaut 170, environ deux tiers d’opacité), rgba() et hsla() prennent une fraction séparée par des virgules, et la syntaxe moderne séparée par des espaces l’écrit après une barre oblique. Toutes produisent des résultats identiques ; la forme HEX à 8 chiffres est simplement la plus compacte et celle que les outils de design exportent le plus.

color() est le basculement le plus important. Il nomme explicitement l’espace de couleur — color(srgb r g b) est le gamut familier épelé, tandis que color(display-p3 ...) vise le gamut plus large des écrans modernes, et color(oklch ...) expose le modèle perceptuel. sRGB reste le choix sûr par défaut — le contenu créé dedans s’affiche de façon prévisible partout — tandis que les couleurs display-p3 n’arrivent que là où la syntaxe est prise en charge, soit pratiquement tous les navigateurs evergreen depuis 2023.

  • #RRGGBBAA — alpha en hexa, AA = 170 ≈ 67% d’opacité.
  • rgba(255, 102, 0, 0.67) — syntaxe à virgules historique, encore universelle.
  • rgb(255 102 0 / 0.67) — syntaxe de CSS Color 4 ; le a est désormais facultatif.
  • color(display-p3 1 0.4 0 / 0.67) — couleur à gamut plus large, espace nommé d’entrée de jeu.

Contraste : le contrôle qui passe devant le goût

Aucun choix de notation n’a d’importance si les utilisateurs ne peuvent pas lire le texte. Le contraste WCAG exige un ratio d’au moins 4.5:1 entre le texte et son arrière-plan pour du texte normal au niveau AA, 3:1 pour du texte large (environ 24 px en graisse normale ou 19 px en gras et au-delà), et 7:1 pour le niveau AAA, plus strict. Le ratio se calcule à partir de la luminance relative, qui est une propriété de la couleur elle-même — la notation dans laquelle vous l’avez écrite est sans importance, ce qui est une façon de plus de dire que tous ces formats décrivent la même couleur.

Le flux de travail pratique est mécanique : choisissez vos couleurs comme vous voulez, puis vérifiez les paires avant la mise en production. Corps de texte sur son arrière-plan, texte d’espace réservé sur les champs, texte blanc sur la couleur de marque — chaque paire exige son chiffre. Un vérificateur de contraste le rapporte instantanément — moins cher que de reprendre une palette inaccessible dans l’urgence.

Questions fréquentes

Les outils de couleur de ce site envoient-ils ce que je colle ?

Non. Conversion, sélection et contrôles de contraste s’exécutent tous en JavaScript dans l’onglet de votre navigateur — il n’y a aucune étape d’envoi. Vérifiez dans DevTools : ouvrez le panneau Network, convertissez quelque chose, et regardez la liste des requêtes rester vide. La Content-Security-Policy du site interdit aussi aux scripts de la page d’établir des connexions sortantes.

HEX et RGB produisent-ils parfois des couleurs différentes ?

Jamais, quand tous deux décrivent sRGB. #FF6600 et rgb(255, 102, 0) sont octet pour octet les mêmes trois valeurs de canaux, et la conversion entre les notations est une arithmétique définie. Des différences n’apparaissent que lorsqu’un espace de couleur est nommé explicitement — color(display-p3 ...) peut atteindre des couleurs que sRGB ne sait pas représenter, ce qui est une propriété de l’espace, pas de la notation.

Quel format utiliser dans mon CSS ?

Utilisez HEX pour les valeurs stockées et copiées comme identifiants — jetons de marque, variables de design system. Utilisez HSL quand la valeur sera dérivée : états de survol, teintes, ombres, thèmes qui font tourner la teinte. RGB convient au travail proche de l’image et partout où les quantités de canaux sont le modèle mental. La cohérence au sein d’une base de code vaut mieux que n’importe quelle réponse unique.

Qu’est-ce que #RRGGBBAA et quand l’utiliser ?

Un code HEX à huit chiffres dont les deux derniers chiffres sont l’alpha : 00 entièrement transparent, FF entièrement opaque, AA environ 67%. C’est l’équivalent compact de rgba(255, 102, 0, 0.67) et il est pris en charge partout où l’ancien rgba() l’est. Y recourir quand un outil de design vous donne huit chiffres.

La luminosité HSL correspond-elle à l’éclat apparent d’une couleur ?

Non, et c’est le piège qui mord les bâtisseurs de palettes. La luminosité HSL est un remappage mathématique des canaux RGB, pas perceptuel : jaune et bleu à la même luminosité de 50% paraissent radicalement différents en éclat. Pour des échelles d’aspect régulier, utilisez oklch() de CSS Color 4, dont la luminosité suit la perception humaine — ou un outil dont les rampes sont calculées dans un espace perceptuel, comme le sont celles de ce site.

Quel ratio de contraste me faut-il pour l’accessibilité ?

WCAG AA exige 4.5:1 pour du texte normal et 3:1 pour du texte large (environ 24 px en graisse normale ou 19 px en gras et au-delà) ; AAA monte ces seuils à 7:1 et 4.5:1. Le ratio vient de la luminance relative, donc la notation est sans importance. Vérifiez chaque paire texte-arrière-plan, espaces réservés et états désactivés compris.

Où puis-je lire les normes citées ici ?

Équipe ToolsByUs · Comment nous vérifions nos outils