Convertir des codes couleurs CSS entre hexadécimal et décimal
Les codes couleurs CSS hexadécimaux (#FF5733, #0011FF) cachent en réalité trois valeurs décimales — rouge, vert, bleu — encodées chacune sur deux chiffres hexadécimaux. Comprendre et maîtriser cette conversion est essentiel pour tout développeur front-end, designer ou créateur de contenu qui travaille avec des palettes de couleurs. Le Convertisseur de Bases de WikiPlus permet de décomposer et manipuler ces valeurs directement.
Anatomie d'un code couleur CSS hexadécimal
Un code couleur CSS comme #FF5733 est composé de trois paires de chiffres hexadécimaux : FF (rouge), 57 (vert), 33 (bleu). Chaque paire représente une valeur entre 00 (0 décimal) et FF (255 décimal), soit 256 niveaux d'intensité par canal. La couleur noire est #000000 (0, 0, 0) et le blanc est #FFFFFF (255, 255, 255). La version courte #RGB comme #F53 est un raccourci où chaque chiffre est doublé : #FF5533. Pour convertir FF en décimal : F vaut 15, donc FF = 15×16 + 15 = 255. Pour convertir 57 en décimal : 5 vaut 5, 7 vaut 7, donc 57 = 5×16 + 7 = 80 + 7 = 87. Résultat : #FF5733 = rgb(255, 87, 51) — un rouge-orangé vif. Ces conversions sont immédiates avec le Convertisseur de Bases.
Arithmétique des couleurs : mélanger et interpoler des teintes
Une fois les composantes RGB converties en décimal, il devient possible d'effectuer des opérations arithmétiques sur les couleurs. Pour éclaircir une couleur, augmentez chaque composante proportionnellement vers 255. Pour foncer, réduisez vers 0. Pour interpoler entre deux couleurs (dégradé linéaire), calculez la moyenne pondérée de chaque composante. Par exemple, entre #FF0000 (rouge pur : 255, 0, 0) et #0000FF (bleu pur : 0, 0, 255), la mi-teinte est (127, 0, 127) = #7F007F, un violet. Les outils de design comme Figma et Sketch affichent les valeurs en hexadécimal et RGB en parallèle, mais quand vous êtes en ligne de commande ou dans un script, la conversion manuelle via le Convertisseur de Bases de WikiPlus est la solution la plus rapide.
Couleurs CSS avancées : canaux alpha et notation RGBA
CSS supporte la transparence via le canal alpha dans les notations rgba() et les codes couleurs à 8 chiffres (#RRGGBBAA). Le canal alpha varie de 0 (totalement transparent) à 255 (opaque), encodé sur deux chiffres hex supplémentaires. #FF573380 ajoute 80 hex (128 décimal) comme canal alpha, soit 50 % de transparence (128/255 ≈ 0,5). En CSS moderne, la notation rgba(255, 87, 51, 0.5) est équivalente. Les nouvelles notations CSS color level 4 permettent aussi hsl(), oklch() et color(display-p3). Pour convertir des composantes entre ces espaces, la conversion hex-decimal est souvent la première étape. Le Convertisseur de Bases de WikiPlus gère les entiers de 0 à 255 avec précision, ce qui couvre tous les besoins de conversion de composantes de couleurs.
Scripts de traitement d'images et de palettes de couleurs
Dans les scripts de traitement d'images (Python PIL/Pillow, Node.js Sharp, ImageMagick), les couleurs sont souvent manipulées sous forme de tuples RGB décimaux ou de valeurs hexadécimales. Pour remplacer automatiquement une couleur dans un lot d'images, ou pour générer une palette de teintes à partir d'une couleur de base, la conversion hexa-décimal est une étape fondamentale. En Python : `int('FF', 16)` donne 255. `hex(255)` donne '0xff'. `'{:02X}'.format(255)` formate en FF. En JavaScript : `parseInt('FF', 16)` donne 255. `(255).toString(16)` donne 'ff'. Ces opérations sont triviales mais leur mémorisation n'est pas toujours nécessaire quand le Convertisseur de Bases est disponible comme vérification rapide.
Questions fréquemment posées
- Comment convertir #FF5733 en RGB ?
- Décomposez : FF=255, 57=87, 33=51. Résultat : rgb(255, 87, 51). Pour vérifier : FF hex = 15×16+15 = 255. 57 hex = 5×16+7 = 87. 33 hex = 3×16+3 = 51. Ou utilisez directement le Convertisseur de Bases en entrant chaque paire séparément.
- Quelle est la différence entre #RGB et #RRGGBB en CSS ?
- #RGB est une notation courte où chaque chiffre est doublé. #F53 est identique à #FF5533. Utilisez la forme courte quand les deux chiffres de chaque composante sont identiques pour économiser des caractères. Pour toutes les autres couleurs, la forme longue #RRGGBB est nécessaire.
- Comment obtenir le négatif d'une couleur hexadécimale ?
- Le négatif d'une couleur RGB est obtenu en soustrayant chaque composante de 255. Pour #FF5733 : négatif = rgb(255-255, 255-87, 255-51) = rgb(0, 168, 204) = #00A8CC. En hexadécimal, soustrayez chaque paire de FF : FF-FF=00, FF-57=A8, FF-33=CC.