RGB, HEX ou HSL : quelle notation choisir ?

Sur le Web, une même couleur peut être écrite de plusieurs façons. Un bleu peut apparaître sous la forme #2563eb, rgb(37 99 235) ou encore hsl(221 83% 53%). À l’écran, ces notations peuvent produire exactement le même résultat, mais elles ne racontent pas la couleur de la même manière.

Cette différence devient importante dès que l’on construit une interface, une palette, un thème clair ou sombre, un système de design, ou que l’on extrait des couleurs depuis une image. HEX, RGB et HSL ne sont pas trois niveaux de qualité : ce sont trois manières de décrire ou d’exprimer une couleur pour des usages différents.

Pour comprendre d’où viennent les composantes rouge, verte et bleue, commencez si besoin par Comment une image numérique est-elle construite ?. Nous allons ici nous concentrer sur leur utilisation dans le Web et le CSS.

RGB, HEX et HSL : la différence en une phrase

On peut résumer ainsi :

• RGB décrit une couleur à partir de ses composantes rouge, verte et bleue ;
• HEX encode généralement ces mêmes composantes RGB sous une écriture hexadécimale compacte ;
• HSL décrit la couleur à partir de sa teinte, de sa saturation et de sa luminosité.

Autrement dit, HEX et RGB sont souvent deux écritures très proches d’une même information, tandis que HSL propose une manière différente de raisonner sur la couleur.

Le convertisseur de couleurs permet de passer de l’une à l’autre sans faire les calculs à la main.

Pourquoi le Web utilise-t-il autant RGB ?

Un écran produit ses couleurs en combinant de la lumière rouge, verte et bleue. C’est un système additif : lorsque les trois composantes sont faibles, on se rapproche du noir ; lorsqu’elles sont fortes, on se rapproche du blanc.

Dans la notation CSS RGB classique sur 8 bits par canal, chaque composante peut être représentée par une valeur de 0 à 255.

Par exemple :

color: rgb(255 0 0);

correspond à un rouge maximal, tandis que :

color: rgb(0 0 0);

correspond au noir.

Le blanc s’écrit :

color: rgb(255 255 255);

Et un gris moyen peut s’obtenir lorsque les trois composantes ont une valeur identique :

color: rgb(128 128 128);

Cette représentation correspond directement à la logique des canaux décrite dans l’anatomie d’une image numérique.

Pourquoi les valeurs vont-elles de 0 à 255 ?

Dans une représentation courante sur 8 bits, chaque canal dispose de :

2⁸ = 256 valeurs possibles.

Comme on commence à zéro, ces valeurs vont de 0 à 255.

Trois canaux de 256 valeurs donnent :

256 × 256 × 256 = 16 777 216 combinaisons.

C’est la raison pour laquelle on parle souvent d’environ 16,7 millions de couleurs pour une représentation RGB 24 bits.

Cette logique permet aussi de comprendre immédiatement le format HEX.

HEX : une écriture compacte des composantes RGB

La notation hexadécimale utilise seize symboles :

0 1 2 3 4 5 6 7 8 9 A B C D E F

Chaque paire de caractères peut représenter une valeur comprise entre 00 et FF, c’est-à-dire entre 0 et 255 en décimal.

Une couleur HEX classique possède six caractères :

#RRGGBB

Les deux premiers représentent le rouge, les deux suivants le vert, et les deux derniers le bleu.

Par exemple :

#FF0000

signifie :

• rouge : FF = 255 ;
• vert : 00 = 0 ;
• bleu : 00 = 0.

C’est donc exactement l’équivalent de :

rgb(255 0 0)

De même :

#2563EB

correspond à :

rgb(37 99 235)

Le convertisseur de couleurs permet de vérifier instantanément ces équivalences.

Comment convertir une valeur décimale en hexadécimal ?

Prenons la valeur rouge 37.

On divise par 16 :

37 = 2 × 16 + 5

La représentation hexadécimale est donc 25.

Pour 99 :

99 = 6 × 16 + 3

on obtient 63.

Pour 235 :

235 = 14 × 16 + 11

14 correspond à E et 11 à B, donc on obtient EB.

Ainsi :

RGB(37, 99, 235)

devient :

#2563EB

Dans la pratique, il n’est évidemment pas nécessaire d’effectuer ces conversions à la main. Mais comprendre la relation permet de voir que HEX n’est pas un mystérieux autre modèle de couleur : dans ce cas, c’est principalement une écriture hexadécimale de valeurs RGB.

La notation HEX courte

Lorsque chaque paire contient deux caractères identiques, CSS autorise une écriture abrégée.

Par exemple :

#ffffff

peut devenir :

#fff

et :

#336699

peut devenir :

#369

Chaque caractère est alors dupliqué :

#369 → #336699

En revanche :

#2563eb

ne peut pas être réduit à trois caractères, car les paires ne sont pas composées de valeurs identiques.

HEX peut aussi représenter la transparence

On associe souvent HEX à six caractères, mais CSS permet également une notation à huit caractères :

#RRGGBBAA

Les deux derniers représentent l’alpha.

Par exemple :

#2563eb80

décrit la couleur #2563eb avec une transparence intermédiaire.

Il existe également une forme courte #RGBA lorsque les paires peuvent être abrégées.

Cette possibilité rapproche encore davantage HEX de la représentation RGBA décrite dans Comment une image numérique est-elle construite ?.

RGB moderne : pourcentages, nombres et alpha

CSS moderne accepte plusieurs syntaxes RGB.

On peut utiliser des nombres :

color: rgb(37 99 235);

ou des pourcentages :

color: rgb(14.5% 38.8% 92.2%);

Pour ajouter de la transparence, la syntaxe moderne utilise une barre oblique :

color: rgb(37 99 235 / 50%);

On rencontre encore très souvent l’ancienne écriture avec virgules :

color: rgba(37, 99, 235, 0.5);

Elle reste familière dans de nombreuses bases de code. Mais dans du CSS moderne, rgb() peut directement intégrer l’alpha.

L’essentiel est de comprendre que l’opacité ne modifie pas la couleur source elle-même : elle modifie la manière dont cette couleur se compose avec ce qui se trouve derrière elle.

HSL : penser en teinte, saturation et luminosité

HSL signifie :

• Hue : teinte ;
• Saturation : saturation ;
• Lightness : luminosité.

Une couleur peut s’écrire :

hsl(221 83% 53%)

Cette notation cherche à rendre certaines manipulations plus intuitives pour un humain.

Au lieu de se demander « combien de rouge, de vert et de bleu dois-je modifier ? », on peut se demander :

• veux-je changer de famille de couleur ?
• veux-je rendre la couleur plus ou moins intense ?
• veux-je l’éclaircir ou l’assombrir ?

C’est particulièrement pratique lorsqu’on construit des variantes d’une même couleur.

La teinte : un angle sur le cercle chromatique

Dans HSL, la teinte est généralement exprimée comme un angle.

Quelques repères simplifiés :

• 0deg → rouge ;
• 60deg → jaune ;
• 120deg → vert ;
• 180deg → cyan ;
• 240deg → bleu ;
• 300deg → magenta ;
• 360deg → retour au rouge.

Ainsi, modifier uniquement la teinte permet de parcourir le cercle chromatique sans toucher directement aux deux autres paramètres.

Exemple :

hsl(0 80% 50%)
hsl(120 80% 50%)
hsl(240 80% 50%)

produit trois couleurs situées dans des familles très différentes tout en conservant les mêmes valeurs de saturation et de luminosité.

La saturation : de la couleur au gris

La saturation représente, de manière simplifiée, l’intensité colorée.

À 0%, la teinte n’a plus d’effet visible : on obtient une nuance de gris déterminée par la luminosité.

À 100%, la couleur est fortement saturée dans le modèle HSL.

Par exemple :

hsl(220 0% 50%)

donne un gris, quelle que soit la valeur de teinte.

Tandis que :

hsl(220 100% 50%)

donne un bleu très saturé.

Cela rend HSL pratique pour créer des états désaturés ou des familles visuelles cohérentes.

La luminosité HSL : attention au sens du mot

À 0% de luminosité HSL, la couleur est noire.

À 100%, elle est blanche.

Autour de 50%, elle peut être très vive selon la teinte et la saturation.

Mais il faut éviter une confusion importante : la lightness HSL n’est pas la luminance relative utilisée pour calculer le contraste WCAG.

Deux couleurs ayant la même valeur L en HSL peuvent avoir des luminosités perceptuelles très différentes.

Par exemple, un jaune et un bleu avec une lightness identique ne semblent pas nécessairement aussi lumineux à l’œil.

C’est pourquoi on ne peut pas garantir l’accessibilité d’une palette en se disant simplement : « mon texte a L: 20% et mon fond L: 90%, donc le contraste est suffisant ».

Pour vérifier réellement une combinaison, utilisez le vérificateur de contraste et consultez Contraste WCAG : comment rendre les couleurs accessibles ?.

HSL est-il un espace colorimétrique plus moderne que RGB ?

Pas vraiment dans le sens où on l’entend parfois.

HSL est une représentation construite à partir de RGB pour rendre certaines manipulations plus compréhensibles. Il ne faut pas le confondre avec un espace colorimétrique perceptuellement uniforme.

C’est une nuance importante.

HSL est très agréable pour :

• faire varier une teinte ;
• générer rapidement des variantes ;
• comprendre visuellement saturation et clarté ;
• écrire certaines couleurs à la main.

Mais une variation numérique régulière en HSL ne garantit pas une variation perceptuelle régulière.

Autrement dit, ajouter 10% de lightness à plusieurs couleurs ne produit pas nécessairement une impression d’éclaircissement identique.

Alors pourquoi HSL est-il si utile ?

Parce qu’il correspond bien à de nombreuses intentions de design.

Supposons une couleur principale :

--primary: hsl(221 83% 53%);

On peut expérimenter avec :

--primary-light: hsl(221 83% 65%);
--primary-dark: hsl(221 83% 40%);
--primary-muted: hsl(221 35% 60%);

La relation entre les variantes est immédiatement visible dans le code.

Avec RGB, il faudrait modifier simultanément plusieurs composantes et il serait moins évident de comprendre l’intention sans outil.

Cela ne signifie pas que ces variantes sont automatiquement bonnes. Elles doivent encore être vérifiées visuellement et, lorsqu’elles portent du texte ou des éléments interactifs, testées pour le contraste.

HEX ou RGB : lequel est le plus précis ?

À valeurs équivalentes, aucun n’est plus précis.

Par exemple :

#2563eb

et :

rgb(37 99 235)

décrivent la même couleur dans le contexte RGB correspondant.

HEX n’améliore pas la qualité. RGB ne contient pas davantage de détails simplement parce que les nombres sont écrits en décimal.

Le choix est essentiellement une question :

• de lisibilité ;
• d’habitude ;
• de manipulation ;
• de convention de projet.

Pourquoi HEX reste-t-il si populaire ?

HEX est compact :

#2563eb

Il est facile à copier depuis un outil de design, un sélecteur de couleurs ou une charte graphique.

De nombreux systèmes de design utilisent encore des palettes définies comme :

--blue-500: #3b82f6;
--blue-600: #2563eb;
--blue-700: #1d4ed8;

Cette écriture est concise et immédiatement reconnue par la plupart des développeurs.

Elle est particulièrement adaptée lorsqu’une couleur est considérée comme une valeur fixe.

Quand RGB est-il préférable ?

RGB devient très naturel lorsqu’on travaille directement avec les canaux ou avec des données issues d’une image.

Un algorithme d’analyse de pixels récupère typiquement des composantes rouge, verte et bleue. L’extracteur de couleurs d’image peut ensuite présenter les couleurs détectées sous une forme exploitable.

RGB est également pratique lorsque l’on souhaite raisonner sur l’alpha :

rgb(37 99 235 / 20%)

ou lorsque des calculs JavaScript manipulent directement les composantes.

Si votre source de données est déjà RGB, convertir systématiquement en HEX avant chaque traitement n’apporte pas nécessairement de bénéfice.

Quand HSL est-il préférable ?

HSL est particulièrement agréable lorsqu’un humain doit faire varier une couleur.

Exemples :

• changer la teinte tout en conservant une saturation proche ;
• créer une version plus claire ;
• produire une version moins saturée ;
• expérimenter avec une palette ;
• comprendre rapidement l’intention d’une valeur.

Pour construire une palette à partir d’une photographie, vous pouvez d’abord utiliser l’extracteur de couleurs, puis étudier la méthode dans Comment créer une palette de couleurs à partir d’une image ?.

Le générateur de palette permet également d’explorer des associations de couleurs.

Une couleur extraite d’une image est-elle déjà en HEX ?

Pas intrinsèquement.

Dans une image raster décodée, la couleur est généralement accessible sous forme de valeurs de canaux. Un outil peut ensuite présenter cette couleur en HEX, RGB, HSL ou dans plusieurs formats.

Prenons un pixel contenant :

R = 37
G = 99
B = 235

L’outil peut afficher :

rgb(37 99 235)
#2563eb
hsl(...)

Ce sont différentes représentations d’une couleur correspondant à ces valeurs dans le contexte utilisé.

Cela explique pourquoi il est facile de proposer plusieurs formats de copie dans un outil d’extraction.

Comment passer d’une image à une palette CSS ?

Une démarche simple peut être :

1. sélectionner l’image ;
2. extraire plusieurs couleurs représentatives avec l’extracteur de couleurs ;
3. réduire les doublons ou nuances trop proches ;
4. attribuer un rôle aux couleurs : principale, secondaire, fond, accent ;
5. convertir les valeurs si nécessaire avec le convertisseur de couleurs ;
6. tester les combinaisons de texte et de fond avec le vérificateur de contraste.

L’article Comment créer une palette de couleurs à partir d’une image ? approfondit précisément cette étape de sélection.

Les codes HEX sont-ils sensibles aux majuscules ?

Non.

Ces deux valeurs sont équivalentes :

#2563EB
#2563eb

Le choix entre majuscules et minuscules relève du style du projet.

Beaucoup de bases de code utilisent les minuscules pour rester cohérentes avec d’autres conventions CSS, mais cela n’a aucun effet sur la couleur affichée.

Les espaces et virgules en RGB ont-ils une importance ?

CSS a évolué.

On rencontre encore :

rgb(37, 99, 235)
rgba(37, 99, 235, 0.5)

La syntaxe moderne permet notamment :

rgb(37 99 235)
rgb(37 99 235 / 50%)

Dans un nouveau code, la syntaxe moderne est souvent plus cohérente avec les autres fonctions de couleur CSS. Mais un projet existant peut parfaitement conserver une convention plus ancienne si elle est déjà utilisée partout et compatible avec ses contraintes.

La priorité reste la cohérence.

Comment représenter une couleur transparente ?

Il faut distinguer couleur et opacité.

En RGB moderne :

rgb(37 99 235 / 50%)

En HEX huit caractères :

#2563eb80

En HSL :

hsl(221 83% 53% / 50%)

Ces syntaxes permettent d’ajouter un alpha.

Mais une couleur semi-transparente n’a pas une apparence absolue : son résultat dépend de l’arrière-plan sur lequel elle est composée.

Un bleu à 50 % d’opacité sur du blanc n’aura pas le même rendu que le même bleu sur du noir.

C’est pourquoi copier uniquement le résultat visuel d’une couleur transparente peut être trompeur si le contexte change.

transparent est-il simplement du blanc invisible ?

Non.

En CSS, transparent représente une transparence totale. Conceptuellement, il ne faut pas le traiter comme un blanc opaque.

La différence devient évidente lorsque l’élément se trouve sur un fond coloré.

Cette notion rejoint le canal alpha des images PNG, WebP ou AVIF, expliqué dans l’anatomie d’une image numérique et comparé dans PNG, JPEG, WebP ou AVIF : quel format choisir ?.

Peut-on créer une palette uniquement en modifiant HSL ?

Oui, mais avec prudence.

Par exemple, on peut partir d’une teinte et créer plusieurs niveaux :

--brand-100: hsl(221 80% 95%);
--brand-300: hsl(221 80% 80%);
--brand-500: hsl(221 80% 55%);
--brand-700: hsl(221 80% 35%);
--brand-900: hsl(221 80% 15%);

Cela donne rapidement une famille cohérente sur le plan mathématique.

Mais elle n’est pas automatiquement cohérente sur le plan perceptuel, et encore moins automatiquement accessible.

Chaque niveau destiné à recevoir du texte ou à signaler un état doit être vérifié.

Le vérificateur de contraste est beaucoup plus fiable qu’une estimation basée uniquement sur la valeur L.

Pourquoi le jaune pose-t-il souvent problème dans les palettes ?

Notre perception des différentes teintes n’est pas uniforme.

Un jaune très saturé peut sembler extrêmement lumineux alors qu’un bleu avec des paramètres HSL apparemment comparables paraît beaucoup plus sombre.

C’est un excellent exemple des limites d’une lecture naïve de HSL.

Si vous créez des badges, boutons ou textes à partir d’une palette multicolore, ne supposez pas qu’une même lightness garantit un même contraste.

Testez les couples réellement utilisés avec les règles décrites dans Contraste WCAG : comment rendre les couleurs accessibles ?.

HSL permet-il de calculer le contraste WCAG ?

Pas directement à partir de la valeur L.

Pour calculer le contraste selon les règles concernées, les couleurs doivent être interprétées puis converties selon les formules de luminance relative appropriées.

La lightness HSL n’est donc pas un raccourci fiable.

Deux couleurs hsl(... ... 50%) peuvent avoir des luminances relatives très différentes.

Pour éviter les erreurs de calcul manuel, utilisez le vérificateur de contraste.

HEX est-il meilleur pour les performances CSS ?

Dans un site moderne, choisir #2563eb plutôt que rgb(37 99 235) n’est pas une stratégie significative d’optimisation des performances.

Les différences de quelques caractères dans le code source sont généralement négligeables face aux véritables enjeux :

• images ;
• JavaScript ;
• polices ;
• cache ;
• compression HTTP ;
• architecture CSS.

Choisissez donc la notation qui rend le code plus clair et maintenable.

Pour les images, où les gains peuvent être beaucoup plus importants, consultez Quelle résolution choisir pour une image ? et Comment compresser une image sans perdre en qualité ?.

Faut-il stocker les couleurs en HEX dans une base de données ?

Pas nécessairement.

Le meilleur format de stockage dépend de ce que l’application doit faire.

Si l’objectif est seulement de conserver une couleur choisie par l’utilisateur et de la réafficher, une chaîne HEX normalisée peut être simple.

Si l’application effectue des calculs fréquents sur les canaux, une structure RGB peut être plus pratique.

Si elle manipule plusieurs espaces colorimétriques, il peut être utile de stocker explicitement le type de représentation avec les valeurs.

Le principe important est d’éviter de confondre format de stockage et modèle conceptuel.

Les variables CSS changent la manière de choisir la notation

Les propriétés personnalisées CSS permettent de donner un rôle aux couleurs :

:root {
  --color-primary: #2563eb;
  --color-surface: #ffffff;
  --color-text: #0f172a;
}

À partir de là, la question « HEX ou HSL ? » devient moins importante que la sémantique des variables.

Il vaut souvent mieux écrire :

color: var(--color-text);

que répéter la même valeur partout.

Une palette bien structurée sépare :

• les valeurs brutes ;
• les rôles sémantiques ;
• les composants qui les utilisent.

Cela facilite aussi les thèmes.

Thème sombre : HSL est-il la solution magique ?

Non.

On pourrait imaginer inverser simplement la lightness HSL de toutes les couleurs. Mais un bon thème sombre ne consiste pas à retourner mécaniquement les valeurs.

Il faut considérer :

• le contraste ;
• la hiérarchie visuelle ;
• les surfaces ;
• les états interactifs ;
• la saturation ;
• le confort visuel.

Une couleur d’accent très vive sur fond clair peut devenir agressive sur fond sombre.

HSL facilite certains ajustements, mais ne remplace pas une vraie conception de palette.

Comment choisir les couleurs d’un thème à partir d’une image ?

Une image de référence peut fournir une identité visuelle intéressante.

Vous pouvez :

1. analyser l’image avec l’extracteur de couleurs ;
2. sélectionner quelques couleurs réellement distinctes ;
3. utiliser le générateur de palette pour explorer les combinaisons ;
4. convertir les valeurs en HEX, RGB ou HSL avec le convertisseur ;
5. définir les rôles sémantiques ;
6. vérifier systématiquement les couples texte/fond avec le vérificateur de contraste.

L’article Créer une palette de couleurs à partir d’une image détaille les choix éditoriaux et visuels derrière cette méthode.

Que se passe-t-il lorsqu’on convertit RGB vers HSL puis vers RGB ?

Dans un calcul suffisamment précis, on peut retrouver la couleur initiale.

Cependant, des arrondis peuvent apparaître si les valeurs sont réduites à peu de décimales.

Par exemple, un outil peut afficher une saturation ou une lightness arrondie à l’unité. Reconvertir cette valeur arrondie peut produire des composantes RGB légèrement différentes.

Cela ne signifie pas que le modèle est mauvais : c’est une conséquence de la précision utilisée pour afficher ou stocker les nombres.

Pour une utilisation CSS classique, ces petites différences sont souvent imperceptibles, mais elles peuvent compter dans des traitements automatisés exigeant une correspondance exacte.

Pourquoi mon logiciel de design et mon navigateur n’affichent-ils pas exactement la même couleur ?

Plusieurs causes sont possibles :

• profils colorimétriques ;
• espaces de couleur différents ;
• gestion des couleurs par le logiciel ;
• caractéristiques de l’écran ;
• luminosité et réglages du moniteur ;
• transparence et arrière-plan ;
• conversions ou arrondis.

Un code HEX n’est pas une promesse que tous les écrans physiques émettront exactement la même lumière.

Il fournit une valeur numérique que la chaîne d’affichage doit ensuite interpréter.

Cette distinction entre valeurs et rendu réel est déjà présente dans Comment une image numérique est-elle construite ?.

Les couleurs d’une photographie sont-elles limitées aux couleurs CSS ?

Non.

Une photographie peut contenir un très grand nombre de valeurs de pixels et être associée à un profil colorimétrique. CSS permet lui aussi aujourd’hui des expressions plus avancées que les seuls HEX/RGB/HSL traditionnels.

Mais lorsqu’un outil extrait une couleur pour l’utiliser dans une interface Web, HEX, RGB et HSL restent des formats très pratiques et largement compris.

L’objectif de cet article n’est donc pas de prétendre qu’ils couvrent toute la science des couleurs, mais de clarifier les trois notations que l’on rencontre constamment dans les workflows Web.

Et les espaces de couleur modernes comme OKLCH ?

CSS moderne ne s’arrête plus à HEX, RGB et HSL. On rencontre également des fonctions et espaces comme lab(), lch(), oklab() ou oklch().

Ils répondent notamment à certaines limites perceptuelles des modèles plus anciens.

OKLCH est particulièrement intéressant pour construire des variations dont l’évolution de clarté ou de chroma est plus proche de la perception humaine.

Cela ne rend pas HSL inutile. HSL reste extrêmement lisible et pratique pour de nombreuses tâches simples. Mais pour un système de design avancé, des espaces perceptuels modernes peuvent offrir un meilleur contrôle.

Le point essentiel est de ne pas présenter HSL comme la représentation « humaine parfaite » de la couleur. C’est une interface pratique, avec des limites connues.

Faut-il abandonner HEX au profit d’OKLCH ?

Non.

Un projet peut très bien utiliser :

• HEX pour des valeurs fixes simples ;
• RGB pour des données ou traitements de pixels ;
• HSL pour des ajustements intuitifs ;
• OKLCH pour certaines palettes ou transformations perceptuelles.

Ces notations peuvent coexister.

La bonne question n’est pas « laquelle va remplacer toutes les autres ? », mais « laquelle rend cette tâche plus claire et plus fiable ? ».

Comment choisir une notation dans un projet réel ?

Voici une règle pragmatique.

Choisissez HEX lorsque…

• la couleur est fixe ;
• vous copiez une valeur depuis une charte ;
• votre équipe utilise déjà cette convention ;
• vous souhaitez une écriture compacte.

Exemple :

--brand-primary: #2563eb;

Choisissez RGB lorsque…

• vous manipulez des canaux ;
• les données viennent d’une image ;
• vous faites des calculs en JavaScript ;
• vous voulez exprimer clairement un alpha avec une représentation RGB.

Exemple :

background: rgb(37 99 235 / 20%);

Choisissez HSL lorsque…

• vous ajustez fréquemment teinte, saturation ou lightness ;
• vous explorez des variantes ;
• la lisibilité de ces paramètres aide le travail de design.

Exemple :

--brand-primary: hsl(221 83% 53%);

Envisagez OKLCH lorsque…

• vous construisez un système colorimétrique avancé ;
• vous souhaitez des variations plus cohérentes perceptuellement ;
• votre environnement cible et votre stratégie de compatibilité le permettent.

Exemple concret : créer un bouton à partir d’une couleur extraite

Supposons que l’extracteur de couleurs trouve :

#2563eb

Vous pouvez la conserver telle quelle :

.button {
  background: #2563eb;
}

Puis convertir la valeur avec le convertisseur de couleurs si HSL facilite vos variantes.

Mais avant de décider que le texte sera blanc, vérifiez réellement :

#2563eb sur #ffffff

avec le vérificateur de contraste.

La notation de la couleur ne garantit jamais son accessibilité.

Exemple concret : créer une série de badges

Imaginons plusieurs catégories : bleu, vert, orange et violet.

Si chaque badge possède un fond coloré et du texte, appliquer une lightness HSL identique à toutes les teintes peut produire des contrastes très différents.

Une meilleure démarche est :

1. choisir les couleurs ;
2. déterminer la couleur de texte prévue ;
3. tester chaque couple ;
4. ajuster individuellement les valeurs ;
5. conserver les variantes validées dans les tokens du design system.

Cette méthode est moins « mathématiquement élégante », mais plus fiable pour l’utilisateur.

Exemple concret : générer un overlay

Vous avez une couleur de marque :

#0f172a

et souhaitez l’utiliser comme voile semi-transparent.

Vous pouvez écrire :

background: rgb(15 23 42 / 70%);

Cette syntaxe rend l’intention d’opacité très lisible.

On pourrait également utiliser une valeur HEX avec alpha, mais pour un développeur qui ajuste fréquemment l’opacité, la syntaxe RGB peut être plus facile à relire.

Le choix dépend donc parfois simplement de ce que vous voulez rendre évident dans le code.

Les erreurs fréquentes

Croire que HEX est un autre espace de couleur

Dans l’usage CSS classique #RRGGBB, HEX encode les composantes RGB en base 16.

Croire que HSL garantit des palettes perceptuellement régulières

HSL facilite la manipulation, mais sa lightness n’est pas perceptuellement uniforme.

Utiliser la lightness HSL pour valider l’accessibilité

Le contraste WCAG ne se déduit pas directement de cette valeur. Utilisez le vérificateur de contraste.

Ajouter de la transparence sans penser au fond

Une couleur avec alpha change de rendu selon l’arrière-plan.

Convertir et reconvertir des valeurs fortement arrondies

Des écarts peuvent apparaître à cause de la perte de précision.

Choisir une notation pour gagner quelques octets

La maintenabilité du CSS compte bien davantage que la différence entre une écriture HEX et RGB.

Copier une palette d’image directement dans l’interface

Les couleurs dominantes d’une photographie ne constituent pas automatiquement une bonne palette UI. Il faut leur attribuer des rôles et vérifier leur contraste.

Une méthode simple pour travailler avec les couleurs Web

1. Identifiez la source

La couleur vient-elle d’une charte, d’une image, d’un composant ou d’un calcul ?

2. Utilisez la représentation la plus naturelle

HEX pour une valeur fixe, RGB pour les canaux, HSL pour certaines manipulations.

3. Normalisez les valeurs

Évitez d’avoir la même couleur écrite sous cinq formes différentes sans raison dans le projet.

4. Donnez un rôle aux couleurs

Préférez des tokens comme --color-text, --color-surface ou --color-primary aux valeurs dispersées.

5. Vérifiez les états

Hover, focus, disabled, alertes et thèmes peuvent modifier le contexte.

6. Testez le contraste

Utilisez le vérificateur de contraste, notamment pour le texte et les éléments interactifs.

7. Conservez la cohérence

La meilleure notation est souvent celle que votre équipe peut comprendre et maintenir sans ambiguïté.

Tableau comparatif

Notation	Exemple	Point fort	Limite principale
HEX	#2563eb	Compact, très courant	Peu intuitif pour modifier les composantes
RGB	rgb(37 99 235)	Proche des canaux de l’image	Variantes manuelles moins intuitives
HSL	hsl(221 83% 53%)	Teinte/saturation/lightness faciles à lire	Pas perceptuellement uniforme
HEX + alpha	#2563eb80	Compact	Alpha moins lisible à l’œil
RGB + alpha	rgb(37 99 235 / 50%)	Opacité très explicite	Plus long
HSL + alpha	hsl(221 83% 53% / 50%)	Manipulation + alpha lisibles	Même limite perceptuelle que HSL
OKLCH	oklch(...)	Variations perceptuelles plus cohérentes	Moins familier pour certaines équipes

Quel choix pour Bethemesh ou un autre outil Web ?

Pour un outil de conversion, le meilleur choix est souvent de ne pas imposer une seule représentation.

Une couleur peut être utile à différents utilisateurs sous plusieurs formes :

• un designer peut vouloir HEX ;
• un développeur JavaScript peut préférer RGB ;
• un intégrateur CSS peut vouloir HSL ;
• un design system moderne peut exploiter OKLCH.

C’est précisément l’intérêt du convertisseur de couleurs : partir d’une représentation et obtenir les autres sans faire les calculs manuellement.

De même, l’extracteur de couleurs d’image transforme les pixels d’une image en couleurs réutilisables dans un workflow Web.

Ce qu’il faut retenir

HEX, RGB et HSL ne sont pas en compétition pour déterminer « la meilleure couleur ».

Ils répondent à des manières différentes de travailler :

• RGB correspond directement aux composantes rouge, verte et bleue ;
• HEX fournit une écriture compacte de valeurs RGB dans son usage classique ;
• HSL facilite certaines manipulations grâce à la teinte, la saturation et la lightness.

Pour une valeur fixe, HEX est souvent excellent.

Pour manipuler des pixels ou des canaux, RGB est naturel.

Pour ajuster visuellement une teinte ou créer rapidement des variantes, HSL est très pratique.

Mais aucune notation ne garantit à elle seule :

• une palette harmonieuse ;
• une perception uniforme ;
• un contraste suffisant ;
• une interface accessible.

Après avoir compris comment écrire une couleur, l’étape logique consiste donc à apprendre à sélectionner plusieurs couleurs cohérentes. C’est précisément le sujet de Comment créer une palette de couleurs à partir d’une image ?.

Questions fréquentes

HEX et RGB donnent-ils exactement la même couleur ?

Oui lorsqu’ils représentent les mêmes composantes dans le même contexte. #2563eb et rgb(37 99 235) sont deux écritures équivalentes.

HEX est-il meilleur que RGB pour le Web ?

Non. HEX est plus compact et très courant ; RGB est souvent plus explicite lorsque l’on manipule les canaux ou l’alpha. Le choix dépend du contexte et des conventions du projet.

HSL est-il plus précis que HEX ?

Non. HSL propose une autre manière de représenter et manipuler une couleur. Il n’apporte pas automatiquement davantage de précision visuelle.

Pourquoi HSL est-il plus facile à modifier ?

Parce que la teinte, la saturation et la lightness correspondent à des intentions plus faciles à isoler qu’une modification simultanée des composantes rouge, verte et bleue.

#fff et #ffffff sont-ils identiques ?

Oui. La notation courte duplique chaque caractère : #fff devient #ffffff.

Peut-on ajouter de la transparence à une couleur HEX ?

Oui. CSS accepte notamment la forme #RRGGBBAA, ainsi qu’une forme courte #RGBA.

Quelle syntaxe utiliser pour un RGB transparent ?

La syntaxe CSS moderne peut s’écrire rgb(37 99 235 / 50%).

La valeur L de HSL permet-elle de connaître le contraste ?

Non. La lightness HSL n’est pas la luminance relative utilisée pour les calculs de contraste WCAG. Testez les couleurs avec le vérificateur de contraste.

Comment convertir HEX en RGB ?

Chaque paire hexadécimale correspond à une valeur de 0 à 255. Le plus simple est d’utiliser le convertisseur de couleurs.

Comment récupérer le code HEX d’une couleur présente dans une image ?

Utilisez l’extracteur de couleurs d’image. Une fois les pixels analysés, les couleurs peuvent être présentées sous forme HEX ou dans d’autres notations.

Quelle notation choisir pour des variables CSS ?

Toutes peuvent convenir. Pour des valeurs fixes, HEX reste très lisible. HSL peut faciliter les variations. Le plus important est de définir des tokens sémantiques et de rester cohérent dans le projet.

HSL est-il suffisant pour créer un design system moderne ?

Il peut suffire à de nombreux projets, mais des espaces perceptuels comme OKLCH peuvent être intéressants pour générer des échelles plus cohérentes. Cela ne rend pas HSL obsolète.

Pourquoi deux couleurs avec la même lightness HSL semblent-elles différentes en luminosité ?

Parce que HSL n’est pas perceptuellement uniforme. Notre perception dépend fortement de la teinte et d’autres caractéristiques de la couleur.

Dois-je convertir toutes mes couleurs HEX en HSL ?

Non. Convertissez uniquement lorsque cela facilite réellement votre travail. Une conversion systématique sans besoin fonctionnel n’apporte aucun avantage.

Quelle est l’étape suivante après avoir choisi les notations ?

Construire une palette cohérente, lui attribuer des rôles et vérifier son accessibilité. Consultez Créer une palette de couleurs à partir d’une image puis Contraste WCAG.