La couleur à l’écran
La plupart des écrans construisent les couleurs en mélangeant lumière rouge, verte et bleue. Dans le modèle courant à 8 bits par canal, chaque canal va de 0 à 255, soit 256³ ≈ 16,7 millions de couleurs possibles. Deux orthographes populaires du même triplet dominent le web : notation fonctionnelle RGB et codes hexadécimaux.
Convertissez une valeur hex en canaux décimaux avec l’outil hex vers RGB.
Triples RGB
En CSS, rgb(34, 139, 34) signifie rouge=34, vert=139, bleu=34—un vert forêt. Le CSS moderne autorise aussi rgb(34 139 34 / 0.8) avec une composante alpha (opacité). L’alpha ne fait pas partie du hex classique à six chiffres sans extension ; voir le hex à huit chiffres ci-dessous.
Les valeurs RGB en CSS quotidien sont référencées appareil : elles décrivent des signaux envoyés au pipeline d’affichage, pas une correspondance impression garantie. Pour l’impression critique de marque, les designers utilisent des profils ICC et d’autres flux gérés en couleur.
Encodage hex
Une couleur hex écrit chaque canal en deux chiffres hexadécimaux. Les chiffres hex vont de 0–9 puis A–F (insensible à la casse), pour 0–15. Deux chiffres représentent 0–255 car 16×16 = 256.
Exemple : #228B22
22hex → 2×16 + 2 = 34 décimal (rouge)8Bhex → 8×16 + 11 = 139 décimal (vert)22hex → 34 décimal (bleu)
Donc #228B22 égale rgb(34, 139, 34).
Le # initial est conventionnel en HTML/CSS. Certains systèmes l’omettent ; d’autres l’exigent.
Forme hex courte
CSS autorise le hex à trois chiffres #rgb en abrégé où chaque chiffre est dupliqué : #2A8 s’étend en #22AA88. Pratique pour couleurs grossières et design tokens, mais n’exprime pas tout triplet 8 bits—seulement les canaux multiples de 17 (0x00, 0x11, …, 0xFF).
Alpha en hex
Le hex à huit chiffres #RRGGBBAA ajoute un canal alpha. #228B2280 vaut environ 50 % d’opacité selon l’interprétation de l’échelle (0x80 / 255 ≈ 0,502). Le support est solide dans les navigateurs modernes ; pour les environnements anciens, préférez rgba() / rgb() moderne avec alpha.
Le hex court à quatre chiffres #rgba s’étend de même par duplication de chiffres.
Convertir hex → RGB à la main
- Retirer le
#. - Si longueur 3 ou 4, étendre les chiffres.
- Couper en paires.
- Parser chaque paire en base 16.
- Optionnellement convertir la paire alpha en float 0–1 en divisant par 255.
Convertir RGB → hex
- Borner les canaux à des entiers 0–255.
- Convertir chacun en deux chiffres hex (remplir d’un zéro initial si besoin).
- Concaténer après
#.
L’arrondi apparaît lors de conversions depuis des formats à gamut plus large ou canaux décimaux—choisissez arrondi ou troncature et restez cohérent.
HSL et autres modèles
Les designers pensent souvent en HSL (teinte, saturation, luminosité) car ajuster la teinte paraît naturel. Les ordinateurs rasterisent encore vers RGB pour les écrans typiques. La conversion HSL↔RGB est sans perte pour le gamut CSS si elle est soignée, mais l’arrondi intermédiaire peut dériver après de nombreux allers-retours.
D’autres modèles (CIELAB, OKLCH, Display P3) apparaissent en CSS moderne pour l’uniformité perceptuelle ou des gamuts plus larges. Hex et sRGB restent la lingua franca des design tokens et des anciennes specs.
Accessibilité : le contraste compte plus que les codes
Que vous écriviez #333333 ou rgb(51,51,51), la lisibilité est le contraste avec le fond. Les ratios WCAG comparent des luminances relatives. Choisir de jolis codes hex sans vérifier le contraste rend le texte difficile à lire. Associez les outils couleur à un vérificateur de contraste pour le corps de texte et le chrome d’UI.
Design systems et tokens
Les équipes stockent les couleurs de marque comme tokens nommés (--color-brand-600: #228B22) pour que les composants ne durcissent pas des hex aléatoires. Documentez hex et RGB si les plateformes ont des API différentes (le mobile natif veut souvent des canaux float 0–1).
Gardez une source unique de vérité ; générez les autres formats. Des listes parallèles maintenues à la main dérivent.
Erreurs courantes
- Confondre les règles d’expansion
#RGB. - Oublier que
100%en RGB CSS moderne n’est pas la même syntaxe que des entiers 0–255. - Supposer que le hex à l’écran colle au pantone imprimé sans gestion de la couleur.
- Utiliser
#000000pur sur#111111pour un texte « subtil »—le contraste peut échouer en petite taille. - Parser hex avec une regex qui autorise des longueurs impaires sans validation.
Conseils programmatiques
- Normalisez hex en majuscules ou minuscules dans le code pour la stabilité des diffs.
- Validez avec un motif strict :
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$(adaptez si les formes courtes sont interdites). - Pour interpoler des animations, convertissez en espace linéaire ou utilisez l’interpolation couleur CSS moderne plutôt que de lerper naïvement des chaînes hex comme texte.
Flux avec convertisseurs
Quand un outil de design exporte hex et qu’une API graphique veut des octets :
- Collez hex dans un convertisseur.
- Confirmez les canaux.
- Fournissez des entiers ou des floats normalisés à l’API.
- Vérifiez visuellement quelques couleurs de marque.
L’outil from-hex-to-rgb est fait pour cette boucle de confirmation rapide.
Résumé
Les couleurs hex sont des orthographes en base 16 des octets de canaux RGB. Le hex à six chiffres mappe directement trois composantes 0–255 ; les formes courte et à huit chiffres étendent l’idée pour brièveté et alpha. Apprenez une fois la conversion par paires, gardez des tokens cohérents et vérifiez le contraste—car le format choisi compte moins que la lisibilité de l’interface.