Code couleur HTML, HEX, valeurs RGB et HSL - Palettes de couleurs

En pratique, on écrit ses couleurs en hexadécimal et on bascule en HSL pour construire une gamme : décliner un bouton en version survolée puis désactivée revient alors à ne bouger que la luminosité, sans toucher à la teinte.

Comment lire un code hexadécimal

Un code #RRGGBB est la juxtaposition de trois octets : deux chiffres pour le rouge, deux pour le vert, deux pour le bleu. Chaque paire s'écrit en base 16, où les chiffres vont de 0 à 9 puis se poursuivent par les lettres A à F valant 10 à 15. Une paire couvre donc les valeurs 00 à FF, soit 0 à 255 en décimal.

La lecture se fait chiffre par chiffre : dans la paire 1E, le 1 pèse seize fois et le E vaut 14, d'où 1 × 16 + 14 = 30 ; le maximum FF vaut 15 × 16 + 15 = 255. Trois paires à 00 donnent du noir, trois paires à FF du blanc, et trois paires identiques un gris neutre, les trois lumières étant émises en quantité égale.

La forme courte à trois chiffres double simplement chaque chiffre pour reconstituer la forme longue : #F0A équivaut à #FF00AA, et #FFF à #FFFFFF. Elle n'atteint que 4 096 couleurs sur les 16 777 216 disponibles.

Rien de tout cela n'est propre aux couleurs : un code couleur est de l'hexadécimal ordinaire, celui-là même qui sert à écrire un code ascii en hexadécimal ou un point de code Unicode. La base 16 s'impose partout pour la même raison : un chiffre hexadécimal vaut exactement quatre bits, donc un octet s'écrit toujours avec deux chiffres.

Convertir entre les trois notations

De HEX vers RGB, découpez le code en trois paires et convertissez chacune en décimal. Pour #1E90FF : 1E donne 30, 90 donne 9 × 16 + 0 = 144, FF donne 255, soit rgb(30, 144, 255).

De RGB vers HEX, le trajet inverse se fait canal par canal : on divise par 16, le quotient donne le premier chiffre, le reste le second, et l'on complète par un zéro à gauche sous 16. Pour rgb(237, 0, 140) : 237 = 14 × 16 + 13, soit ED ; 0 s'écrit 00 ; 140 = 8 × 16 + 12, soit 8C. Le code est #ED008C. Nos convertisseurs décimal et hexadécimal font ce calcul dans les deux sens.

De RGB vers HSL, le principe se comprend sans dérouler la formule. On ramène les trois canaux entre 0 et 1, puis on ne retient que le plus fort et le plus faible. La luminosité est leur moyenne. La saturation se déduit de leur écart : plus les canaux sont proches, plus la couleur tire vers le gris. La teinte dépend du canal dominant, chacun occupant une portion du cercle chromatique — le rouge vers 0°, le vert vers 120°, le bleu vers 240°.

Sur rgb(30, 144, 255) : le maximum vaut 255 ÷ 255 = 1, le minimum 30 ÷ 255 ≈ 0,118, et leur moyenne donne une luminosité de 55,9 %, arrondie à 56 %. La saturation vaut 100 %, ce qui est toujours le cas lorsque le canal dominant est poussé à son maximum, ici le bleu à 255 ; la teinte se situe donc du côté de 240°, et le calcul la ramène à 209,6°, soit 210°. On retrouve bien hsl(210, 100%, 56%). Ces arrondis expliquent qu'un aller-retour ne redonne pas toujours l'octet de départ : gardez l'hexadécimal comme référence.

Les couleurs nommées du HTML

Le CSS accepte aussi des mots-clés : écrire color: tomato revient exactement à écrire color: #FF6347. La liste historique compte 147 noms, hérités du format SVG, auxquels s'est ajouté rebeccapurple (#663399), ce qui porte le total à 148. Neuf de ces noms sont de simples synonymes — aqua et cyan, fuchsia et magenta, ainsi que sept variantes en gray/grey — si bien que les 148 mots-clés ne désignent en réalité que 139 couleurs distinctes.

Ces noms rendent service pour une maquette rapide ou un exemple de cours, parce qu'ils se retiennent et se relisent. Ils atteignent leur limite dès qu'un projet a une charte : un nom ne s'ajuste pas, alors qu'un code hexadécimal se règle au canal près.

Trois pièges méritent d'être connus. Les graphies gray et grey sont toutes deux valides et interchangeables, mais seulement pour les sept noms concernés. Certains noms trompent : green ne vaut pas #00FF00 mais #008000, un vert sombre, le vert pur s'appelant lime. Et darkgray (#A9A9A9) est en réalité plus clair que gray (#808080), séquelle de la fusion de deux listes bâties séparément.

Transparence : RGBA, HSLA et le hexadécimal à 8 chiffres

Une quatrième valeur, l'alpha, indique le degré d'opacité : 0 rend la couleur totalement transparente, 1 totalement opaque. Elle s'écrit historiquement avec les fonctions rgba() et hsla(), par exemple rgba(237, 0, 140, 0.5). Le CSS moderne l'accepte aussi dans rgb() et hsl(), derrière une barre oblique : rgb(237 0 140 / 50%).

L'hexadécimal a suivi avec une forme à huit chiffres, #RRGGBBAA, où les deux derniers caractères codent l'alpha comme un canal ordinaire, de 00 à FF : #ED008C80 est le rose précédent à moitié transparent. Une forme abrégée à quatre chiffres, #RGBA, existe sur le même principe de doublement.

La dernière colonne signale un décalage : l'alpha hexadécimal ne dispose que de 256 marches, si bien que le « 50 % » usuel s'écrit 80 et vaut en réalité 128 ÷ 255, soit 50,2 %. L'écart est invisible à l'œil, mais il explique qu'une conversion renvoie parfois 0.502 plutôt que 0.5. Les formes à quatre et huit chiffres sont reconnues par tous les navigateurs actuels ; rgba() et hsla() restent la valeur sûre pour les environnements anciens. À ne pas confondre, enfin, avec la propriété opacity : l'alpha ne rend translucide que la couleur concernée, tandis qu'opacity agit sur l'élément entier, texte et bordures compris.

Contraste et lisibilité

Choisir deux couleurs qui vont bien ensemble ne suffit pas : encore faut-il que le texte reste lisible par-dessus le fond. Une couleur claire sur un fond clair peut être parfaitement harmonieuse et malgré tout illisible, sur un écran de téléphone en plein soleil comme pour une personne dont la vision des contrastes est réduite.

Cette lisibilité se mesure. Le ratio de contraste des règles d'accessibilité WCAG compare la luminance relative des deux couleurs et produit un nombre allant de 1:1, deux couleurs identiques, à 21:1, du noir pur sur du blanc pur. Les seuils à retenir : 4,5:1 au minimum pour le texte courant et 3:1 pour le texte large, c'est-à-dire à partir d'environ 24 px, ou 19 px en gras. Ce même 3:1 vaut pour les éléments d'interface qu'il faut pouvoir distinguer, comme la bordure d'un champ.

Deux enseignements se dégagent de ces chiffres. Le gris clair des maquettes échoue presque toujours : sur fond blanc, #767676 est la teinte neutre la plus claire à atteindre encore 4,5:1. Et le ratio ne suit pas l'intuition colorée — l'orange et le jaune, pourtant vifs, sont catastrophiques sur blanc, parce que le calcul repose sur la luminance et non sur la saturation.

Deux réflexes limitent les erreurs. Ne jamais faire porter une information par la seule couleur : un message d'erreur en rouge doit aussi comporter un mot ou une icône. Et vérifier chaque couple texte / fond avant de le valider, les outils de développement des navigateurs affichant le ratio directement dans leur sélecteur de couleur.