Couleurs HTML, HEX, RGB et RVB : le mémo complet du Web

Une même couleur, plusieurs écritures

Une couleur numérique peut être décrite de plusieurs façons sans changer son apparence. Le doré du site DECOENLIGNE.ORG, par exemple, peut être écrit #D4AF37 en hexadécimal ou rgb(212, 175, 55) en RGB. Ces notations ne sont pas des nuanciers de peinture : elles donnent des instructions à un écran.

Dans le langage courant français, on parle de RVB pour rouge, vert, bleu. En développement Web, l’acronyme anglais RGB est utilisé dans le code. Les deux désignent le même modèle additif : plus on ajoute de lumière, plus on se rapproche du blanc. Cette logique diffère de celle des pigments, des encres et des peintures.

Le code HEX expliqué simplement

Un code hexadécimal commence par le signe #, suivi de six caractères : #RRGGBB. Les deux premiers décrivent le rouge, les deux suivants le vert et les deux derniers le bleu. Chaque paire varie de 00, absence de composante, à FF, intensité maximale.

• #FF0000 : rouge maximal, sans vert ni bleu.
• #00FF00 : vert maximal.
• #0000FF : bleu maximal.
• #000000 : noir, toutes les composantes sont nulles.
• #FFFFFF : blanc, toutes les composantes sont maximales.
• #808080 : gris moyen, avec trois composantes égales.

Le système utilise seize symboles : les chiffres de 0 à 9 puis les lettres A à F. Ainsi, AF correspond à 175 en décimal. La casse n’a pas d’effet : #d4af37 et #D4AF37 sont équivalents.

Les formes courtes et la transparence

Lorsque chaque paire contient deux caractères identiques, le code peut être raccourci : #FFFFFF devient #FFF et #336699 devient #369. La forme à huit caractères #RRGGBBAA ajoute un canal alpha. Par exemple, #00000080 correspond à un noir approximativement semi-transparent.

Pour un thème WordPress ou une charte graphique, la forme complète à six caractères reste souvent plus lisible. Elle évite également de confondre une couleur à trois caractères avec une faute de saisie.

RGB ou RVB : lire les trois composantes

La fonction CSS rgb() indique directement la quantité de rouge, de vert et de bleu. Dans la notation classique, chaque canal va de 0 à 255. Ainsi, rgb(212, 175, 55) décrit exactement la même couleur que #D4AF37.

.bouton {
  background-color: rgb(212, 175, 55);
  color: rgb(17, 17, 17);
}

La syntaxe CSS moderne autorise aussi un canal alpha séparé par une barre oblique : rgb(17 17 17 / 80%). Cela signifie que le noir est affiché avec une opacité de 80 %. La couleur perçue dépend alors du fond placé derrière elle.

Convertir une valeur HEX en RGB

Séparez le code en trois paires, puis convertissez chacune de la base 16 vers la base 10. Avec #D4AF37, on obtient D4 = 212, AF = 175 et 37 = 55. Le résultat est donc rgb(212, 175, 55).

La conversion inverse consiste à transformer chaque nombre décimal en une paire hexadécimale. Les outils de développement des navigateurs et les sélecteurs de couleurs le font automatiquement, mais comprendre le principe aide à repérer une valeur incohérente.

HSL : un format pratique pour créer des variantes

HSL signifie teinte, saturation et luminosité. La teinte se place sur un cercle de 0 à 360 degrés : le rouge se situe autour de 0°, le vert autour de 120° et le bleu autour de 240°. La saturation va d’un gris à une couleur intense, tandis que la luminosité va du noir au blanc.

:root {
  --or-principal: hsl(46 64% 52%);
  --or-clair: hsl(46 64% 68%);
  --or-fonce: hsl(46 64% 38%);
}

HSL est très utile pour fabriquer une famille cohérente : on conserve la teinte et on modifie la saturation ou la luminosité. Il faut cependant contrôler le résultat à l’écran, car deux valeurs ayant la même luminosité HSL ne possèdent pas nécessairement le même contraste visuel.

Mémo des couleurs HTML et CSS courantes

Les noms anglais comme black, navy ou coral sont des mots-clés CSS standardisés. Ils sont pratiques pour les essais et quelques couleurs simples. Pour une identité visuelle précise, préférez toutefois une valeur HEX ou RGB : un nom tel que « beige » ne peut pas décrire toutes les nuances utilisées en décoration.

Cette sélection privilégie les couleurs mémorisables et utiles. La liste CSS complète contient environ 150 noms, dont plusieurs alias comme gray/grey, aqua/cyan ou fuchsia/magenta. La référence des couleurs nommées de MDN permet de consulter l’ensemble des mots-clés standardisés.

Passer d’une palette de décoration à une palette Web

Une photo de peinture, de tissu ou de pierre ne fournit pas une correspondance colorimétrique absolue. L’éclairage, la balance des blancs, l’appareil photo et l’écran modifient la couleur. Une valeur HEX extraite d’une image doit donc être considérée comme une traduction visuelle, pas comme la référence d’un fabricant.

1. Choisissez d’abord la matière ou la peinture dans des conditions réelles.
2. Photographiez l’échantillon sous une lumière neutre, sans reflet.
3. Prélevez plusieurs points et comparez les valeurs obtenues.
4. Créez une couleur Web représentative plutôt que de rechercher une identité impossible.
5. Testez la palette sur plusieurs écrans et avec les vrais textes du site.

Pour construire une ambiance cohérente, complétez ce mémo par le guide sur la roue des couleurs, puis découvrez comment associer les couleurs en décoration intérieure.

Contraste et accessibilité : une belle couleur doit rester lisible

Une palette réussie n’est pas seulement harmonieuse. Le texte doit conserver un contraste suffisant avec son fond. Les recommandations WCAG retiennent notamment un rapport minimal de 4,5:1 pour le texte courant et de 3:1 pour le grand texte. Le ratio peut aller de 1:1, couleurs identiques, à 21:1, noir sur blanc.

Ne transmettez jamais une information uniquement par la couleur. Un message d’erreur doit comporter un texte ou une icône explicite ; un lien doit rester identifiable autrement que par une légère différence de teinte. Vérifiez aussi les états de survol, de focus, les boutons désactivés et les textes posés sur des photographies.

Les rapports et les méthodes de calcul sont détaillés dans la documentation du W3C sur le contraste minimum. Un contrôleur automatique aide, mais une vérification visuelle et une navigation au clavier restent indispensables.

Organiser une palette avec des variables CSS

Évitez de répéter les codes un peu partout dans une feuille de style. Les variables CSS centralisent les couleurs et rendent les corrections plus fiables. Nommez-les d’après leur fonction plutôt que leur apparence : --texte-principal restera compréhensible même si le noir devient un brun profond.

:root {
  --fond-page: #FFFFFF;
  --fond-sombre: #111111;
  --texte-principal: #171717;
  --texte-inverse: #FFFFFF;
  --accent-or: #D4AF37;
  --bordure-discrete: #D8D3C8;
  --succes: #287A45;
  --erreur: #B42318;
}

Prévoyez les usages essentiels : fond, surface secondaire, texte principal, texte atténué, accent, bordure, focus, succès, avertissement et erreur. Une palette courte, testée dans des composants réels, est plus robuste qu’une collection de dizaines de nuances presque identiques.

Pourquoi la couleur imprimée diffère-t-elle de l’écran ?

Un écran produit de la lumière avec le modèle additif RGB. L’impression dépose des encres qui absorbent une partie de la lumière, généralement selon le modèle CMJN. Certaines couleurs lumineuses visibles à l’écran sont impossibles à reproduire exactement sur papier. À cela s’ajoutent le profil colorimétrique, le papier, l’encre et les réglages de l’imprimante.

Pour une identité de marque, ne convertissez pas mécaniquement une valeur HEX en valeur de peinture ou d’impression. Définissez séparément les références écran, impression et matières, puis réalisez des épreuves. Un écran calibré améliore la cohérence, sans supprimer les différences de support.

Les erreurs fréquentes avec les couleurs Web

• Confondre RGB/RVB, destiné à l’écran, avec le CMJN de l’impression.
• Considérer un code HEX comme une référence universelle de peinture.
• Choisir une couleur uniquement sur un écran non calibré.
• Multiplier les nuances sans leur attribuer de fonction précise.
• Utiliser du gris clair pour du texte important sur fond blanc.
• Oublier que la transparence mélange la couleur avec son arrière-plan.
• Coder directement les couleurs partout au lieu d’utiliser des variables.
• Se fier au nom français d’une nuance pour deviner un mot-clé CSS.
• Valider une palette sans tester le contraste, le survol et le focus.

Questions fréquentes sur HEX, RGB et les couleurs HTML

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

Oui, lorsqu’ils décrivent les mêmes composantes dans l’espace sRGB. #D4AF37 et rgb(212, 175, 55) sont deux écritures de la même valeur.

Quelle notation choisir dans une feuille CSS ?

HEX est compact et très répandu. RGB est pratique lorsque vous travaillez avec les composantes ou la transparence. HSL facilite la création de variantes. La cohérence du projet compte davantage que le choix d’un format unique.

Peut-on utiliser directement un nom de couleur en français ?

Non. Les mots-clés CSS sont en anglais et forment une liste précise. color: bleu; n’est pas valide, tandis que color: blue; l’est.

Comment obtenir une couleur depuis une photo ?

Utilisez une pipette dans un logiciel d’image ou dans les outils du navigateur, puis prélevez plusieurs points. Une photo contient des ombres, des reflets et des variations ; il faut choisir une valeur représentative et la tester dans son contexte.

Pourquoi une couleur change-t-elle selon les écrans ?

La luminosité, le contraste, la technologie de dalle, le profil colorimétrique et les réglages varient. Deux écrans non calibrés ne restituent donc pas nécessairement la même impression visuelle.

Utiliser la couleur comme un véritable outil de projet

Un code est utile seulement lorsqu’il sert une intention : hiérarchiser une page, faciliter la lecture, créer une ambiance ou prolonger une identité décorative. Pour approfondir cette dimension sensible, consultez l’article sur l’influence des couleurs sur le bien-être et le guide consacré à l’harmonie des couleurs en décoration.

Conservez enfin une fiche de référence comprenant les valeurs HEX, RGB, HSL, les usages, les contrastes validés et les équivalents destinés à l’impression. Ce petit système transforme une suite de jolies teintes en palette cohérente, réutilisable et accessible.