HEX, RGB et HSL : ce qui change et ce qui ne change pas

Une couleur, trois notations utiles

Aurora Indigo peut s’écrire #4F46E5, rgb(79 70 229) ou, approximativement, hsl(243 75% 59%). Le navigateur résout chaque déclaration en une couleur sRGB. Avec les valeurs HSL arrondies affichées ici, le résultat peut différer d’une unité sur un canal après un aller-retour ; conserver davantage de précision élimine l’essentiel de cette dérive de conversion.

.sample {
  color: #4F46E5;
  color: rgb(79 70 229);
  color: hsl(243.4 75.4% 58.6%);
}

Correspondance entre le HEX à six chiffres et RGB

Une valeur HEX à six chiffres se compose de trois nombres hexadécimaux à deux chiffres dans l’ordre #RRGGBB. Chaque paire va de 00 à FF, soit de 0 à 255 en décimal. Pour #4F46E5, 4F devient 79 en rouge, 46 devient 70 en vert et E5 devient 229 en bleu.

• RR contrôle le canal rouge sRGB.
• GG contrôle le canal vert sRGB.
• BB contrôle le canal bleu sRGB.
• Une quatrième paire facultative dans #RRGGBBAA contrôle le canal alpha.

Le HEX à trois chiffres n’est un raccourci que lorsque chaque paire complète répète le même chiffre : #4AE se développe en #44AAEE. Il ne peut pas représenter toutes les couleurs à six chiffres ; #4F46E5 n’a donc pas de raccourci exact à trois chiffres.

Quand RGB est le choix le plus clair

La syntaxe moderne rgb() expose directement les mêmes canaux rouge, vert et bleu. Les canaux entiers emploient couramment des valeurs de 0 à 255, tandis que les canaux en pourcentage vont de 0 % à 100 %. Une barre oblique introduit l’alpha sans passer à une fonction rgba() distincte.

.solid {
  background: rgb(79 70 229);
}

.translucent {
  background: rgb(79 70 229 / 60%);
}

• Utilisez RGB lorsque les valeurs des canaux proviennent d’une image, d’une API ou d’un outil fondé sur les octets.
• Utilisez la syntaxe avec barre oblique lorsque l’opacité appartient à la couleur plutôt qu’à l’élément entier.
• Conservez une convention numérique unique dans un composant afin d’en faciliter la révision.

Ce que HSL facilite, et ce qu’il ne fait pas

HSL sépare l’angle de teinte, la saturation et la luminosité. Faire tourner la teinte est pratique pour créer des relations déterministes, tandis qu’il est plus facile de raisonner sur une modification de la saturation ou de la luminosité que sur le réglage séparé de trois canaux RGB.

• La teinte 0° est le rouge, 120° le vert sRGB et 240° le bleu sRGB.
• Une saturation de 0 % produit un gris achromatique ; 100 % utilise la saturation HSL maximale pour cette teinte et cette luminosité.
• Une luminosité de 0 % est le noir, 50 % le milieu du modèle HSL et 100 % le blanc.

Pourquoi les valeurs converties diffèrent parfois

La conversion de RGB vers HSL produit généralement des valeurs fractionnaires. Si un outil arrondit la teinte, la saturation et la luminosité pour l’affichage, reconvertir ces nombres arrondis en RGB peut décaler légèrement un ou plusieurs canaux. Il s’agit d’un problème de précision, et non de la preuve qu’une notation possède une plage plus étendue.

• Conservez la valeur HEX ou RGB d’origine comme source canonique lorsque les octets sRGB exacts sont importants.
• Gardez les décimales HSL pendant les calculs et n’arrondissez que pour l’affichage.
• Pour tester l’égalité, comparez les valeurs de canaux résolues plutôt que les chaînes visibles.
• Évitez de convertir puis d’écraser sans cesse la valeur source dans une chaîne d’édition.

Quel format faut-il utiliser ?

Il n’existe pas de notation universellement meilleure. Choisissez selon la manière dont la valeur est produite et maintenue. Le navigateur sait afficher les trois ; la différence utile tient à la clarté avec laquelle le code source exprime la tâche.

• Choisissez HEX pour des jetons sRGB compacts et stables et pour les valeurs copiées depuis les outils de conception courants.
• Choisissez RGB pour des canaux explicites, des calculs et des valeurs alpha lisibles.
• Choisissez HSL pour une rotation manuelle de la teinte ou des réglages simples de saturation et de luminosité.
• Choisissez OKLCH plutôt que HSL pour construire des palettes aux étapes perceptuellement régulières.
• Employez des propriétés personnalisées CSS afin que les composants consomment des jetons sémantiques au lieu de répéter des valeurs brutes.

:root {
  --color-brand: #4F46E5;
  --color-brand-muted: rgb(79 70 229 / 60%);
}

.button {
  color: white;
  background: var(--color-brand);
}

Liste de contrôle pour une conversion

• Vérifiez que la source et la destination sont toutes deux censées décrire sRGB.
• Préservez l’alpha séparément et vérifiez s’il est exprimé en pourcentage ou par un nombre de 0 à 1.
• Conservez assez de décimales pour les allers-retours.
• Testez le contraste du texte après avoir choisi le fond final ; la notation seule ne renseigne pas sur l’accessibilité.
• Stockez une valeur canonique et dérivez-en les formats de présentation.

Color Atlas applique cette dernière règle : PostgreSQL stocke la valeur HEX canonique révisée, tandis que la page SSR calcule de manière déterministe RGB, HSL, HWB, la luminance, le contraste et les couleurs associées.