HEX to RGB Color Converter
Convertissez les codes couleur HEX en valeurs RGB instantanément. Parfait pour le développement web, CSS et design numérique. Convertisseur en ligne gratuit avec résultats précis.
<section class="content-section">
<h2>Qu'est-ce qu'un code couleur HEX ?</h2>
<p>Un code couleur HEX est une chaîne alphanumérique de six caractères utilisée dans le design web et les graphiques numériques pour représenter une couleur spécifique. Le format suit le modèle <strong>#RRGGBB</strong>, où chaque paire de deux caractères encode l'intensité de l'une des trois couleurs primaires additives — rouge (RR), vert (GG) et bleu (BB) — en utilisant la notation hexadécimale (base 16). Chaque paire varie de <code>00</code> (intensité zéro) à <code>FF</code> (intensité maximale, équivalente à 255 en décimal).</p>
<p>Les codes HEX sont nés du besoin de définir des couleurs en HTML et CSS sans se fier aux mots-clés de couleurs nommées. Bien que CSS prenne désormais en charge plusieurs formats de couleurs, y compris <code>rgb()</code>, <code>hsl()</code> et <code>oklch()</code>, HEX reste la notation la plus largement utilisée dans le développement front-end, les transferts de conception et les lignes directrices de marque. Pratiquement tous les sélecteurs de couleurs dans des outils comme Figma, Sketch, Adobe Photoshop et Canva affichent une valeur HEX par défaut.</p>
<p>Le nombre total de couleurs uniques représentables avec des codes HEX à six chiffres est de 16 777 216 (256 × 256 × 256). Cela est souvent appelé "True Color" ou "couleur 24 bits", ce qui correspond à la profondeur de couleur de la plupart des écrans modernes. Chaque canal obtient 8 bits (un octet), et trois canaux ensemble produisent 24 bits de données de couleur.</p>
<p>Les codes HEX ne sont pas sensibles à la casse, donc <code>#ff8000</code> et <code>#FF8000</code> se réfèrent à la même couleur. Certains guides de style préfèrent les majuscules pour la lisibilité, tandis que les minificateurs CSS produisent souvent des minuscules pour économiser des octets — bien qu'en pratique, la différence soit négligeable.</p>
</section>
<section class="content-section">
<h2>Comment convertir HEX en RGB étape par étape</h2>
<p>Convertir un code couleur HEX en son équivalent RGB est simple. Le processus consiste à diviser la chaîne de six caractères en trois paires et à convertir chaque paire de l'hexadécimal (base 16) au décimal (base 10). Voici la méthode étape par étape :</p>
<ol>
<li><strong>Retirez le symbole dièse.</strong> Si le code HEX commence par <code>#</code>, supprimez-le. Par exemple, <code>#1A2B3C</code> devient <code>1A2B3C</code>.</li>
<li><strong>Divisez en trois paires.</strong> Divisez la chaîne restante en trois groupes de deux caractères : <code>1A</code>, <code>2B</code>, <code>3C</code>.</li>
<li><strong>Convertissez chaque paire en décimal.</strong> Utilisez le système de valeur positionnelle hexadécimale où le premier chiffre est multiplié par 16 et le second chiffre est ajouté :
<ul>
<li>Rouge : <code>1A</code> → (1 × 16) + 10 = <strong>26</strong></li>
<li>Vert : <code>2B</code> → (2 × 16) + 11 = <strong>43</strong></li>
<li>Bleu : <code>3C</code> → (3 × 16) + 12 = <strong>60</strong></li>
</ul>
</li>
<li><strong>Écrivez la valeur RGB.</strong> Combinez les trois valeurs décimales : <code>rgb(26, 43, 60)</code>.</li>
</ol>
<p>Les chiffres hexadécimaux et leurs équivalents décimaux sont : 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15. Mémoriser de A à F est la seule partie qui diffère de l'arithmétique décimale standard.</p>
<p>Pour la conversion programmatique, la plupart des langages proposent des fonctions intégrées. En JavaScript, <code>parseInt("1A", 16)</code> renvoie <code>26</code>. En Python, <code>int("1A", 16)</code> fait de même. CSS gère nativement les deux formats, donc la conversion est principalement utile lorsque vous devez manipuler des canaux de couleur individuels dans le code — par exemple, ajuster la luminosité, créer des dégradés de manière programmatique ou mélanger deux couleurs.</p>
</section>
<section class="content-section">
<h2>Codes HEX à 3 chiffres vs 6 chiffres</h2>
<p>CSS prend en charge un format abrégé HEX à 3 chiffres (<code>#RGB</code>) pour plus de commodité lorsque chacune des trois paires se compose de chiffres identiques. Dans cet abrégé, chaque chiffre unique est étendu en le doublant. Par exemple :</p>
<ul>
<li><code>#F80</code> s'étend à <code>#FF8800</code> → rgb(255, 136, 0)</li>
<li><code>#FFF</code> s'étend à <code>#FFFFFF</code> → rgb(255, 255, 255)</li>
<li><code>#000</code> s'étend à <code>#000000</code> → rgb(0, 0, 0)</li>
<li><code>#09C</code> s'étend à <code>#0099CC</code> → rgb(0, 153, 204)</li>
<li><code>#A3F</code> s'étend à <code>#AA33FF</code> → rgb(170, 51, 255)</li>
</ul>
<p>La notation à 3 chiffres réduit le nombre de couleurs disponibles de 16,7 millions à seulement 4 096 (16 × 16 × 16), donc elle ne peut pas représenter toutes les couleurs. Elle est le plus souvent utilisée pour des couleurs simples ou bien connues dans les fichiers CSS où la brièveté est valorisée.</p>
<p>CSS prend également en charge les codes HEX à 4 chiffres (<code>#RGBA</code>) et à 8 chiffres (<code>#RRGGBBAA</code>) qui incluent un canal alpha (transparence). La valeur alpha suit la même logique hexadécimale : <code>FF</code> est complètement opaque et <code>00</code> est complètement transparent. Par exemple, <code>#FF880080</code> représente la couleur <code>rgb(255, 136, 0)</code> à 50% d'opacité. Notre convertisseur se concentre sur les formats standards à 3 et 6 chiffres ; si vous entrez un code avec un canal alpha, il traitera uniquement la partie RGB.</p>
</section>
<section class="content-section">
<h2>Table de référence HEX vers RGB</h2>
<p>Voici une table de référence des couleurs HEX courantes et de leurs équivalents RGB. Cette table couvre les couleurs les plus fréquemment utilisées dans le design web, les couleurs nommées CSS et les choix de palettes de marques populaires.</p>
<div style="overflow-x:auto">
<table>
<thead>
<tr><th>Nom de la couleur</th><th>HEX</th><th>R</th><th>G</th><th>B</th><th>Utilisation CSS</th></tr>
</thead>
<tbody>
<tr><td>Noir</td><td>#000000</td><td>0</td><td>0</td><td>0</td><td>Texte, bordures</td></tr>
<tr><td>Blanc</td><td>#FFFFFF</td><td>255</td><td>255</td><td>255</td><td>Fonds</td></tr>
<tr><td>Rouge</td><td>#FF0000</td><td>255</td><td>0</td><td>0</td><td>Erreurs, alertes</td></tr>
<tr><td>Vert</td><td>#00FF00</td><td>0</td><td>255</td><td>0</td><td>États de succès</td></tr>
<tr><td>Bleu</td><td>#0000FF</td><td>0</td><td>0</td><td>255</td><td>Liens, primaire</td></tr>
<tr><td>Jaune</td><td>#FFFF00</td><td>255</td><td>255</td><td>0</td><td>Avertissements</td></tr>
<tr><td>Cyan</td><td>#00FFFF</td><td>0</td><td>255</td><td>255</td><td>Accent, info</td></tr>
<tr><td>Magenta</td><td>#FF00FF</td><td>255</td><td>0</td><td>255</td><td>Créatif, audacieux</td></tr>
<tr><td>Gris</td><td>#808080</td><td>128</td><td>128</td><td>128</td><td>Texte atténué</td></tr>
<tr><td>Argent</td><td>#C0C0C0</td><td>192</td><td>192</td><td>192</td><td>Bordures, subtil</td></tr>
<tr><td>Marron</td><td>#800000</td><td>128</td><td>0</td><td>0</td><td>Accents foncés</td></tr>
<tr><td>Marine</td><td>#000080</td><td>0</td><td>0</td><td>128</td><td>En-têtes, nav</td></tr>
<tr><td>Sarcelle</td><td>#008080</td><td>0</td><td>128</td><td>128</td><td>Accent</td></tr>
<tr><td>Olive</td><td>#808000</td><td>128</td><td>128</td><td>0</td><td>Palettes terreuses</td></tr>
<tr><td>Orange</td><td>#FFA500</td><td>255</td><td>165</td><td>0</td><td>CTA, boutons</td></tr>
<tr><td>Corail</td><td>#FF7F50</td><td>255</td><td>127</td><td>80</td><td>Accents chauds</td></tr>
<tr><td>Tomate</td><td>#FF6347</td><td>255</td><td>99</td><td>71</td><td>Alertes, badges</td></tr>
<tr><td>Or</td><td>#FFD700</td><td>255</td><td>215</td><td>0</td><td>Mises en évidence</td></tr>
<tr><td>Bleu ciel</td><td>#87CEEB</td><td>135</td><td>206</td><td>235</td><td>Fonds</td></tr>
<tr><td>Gris ardoise</td><td>#708090</td><td>112</td><td>128</td><td>144</td><td>UI sombre</td></tr>
</tbody>
</table>
</div>
<p>CSS définit un total de 147 couleurs nommées, chacune avec une valeur HEX correspondante. Bien que les couleurs nommées soient pratiques pour le prototypage, les projets professionnels s'appuient généralement sur les valeurs HEX ou RGB pour la précision et la cohérence entre les navigateurs et les outils de conception.</p>
</section>
<section class="content-section">
<h2>Couleurs de marques populaires – Valeurs HEX et RGB</h2>
<p>Les développeurs et les designers ont souvent besoin des valeurs HEX et RGB exactes des couleurs de marques populaires pour les maquettes, les intégrations et les guides de style. Voici une référence rapide pour certaines des couleurs de marque les plus couramment demandées :</p>
<div style="overflow-x:auto">
<table>
<thead>
<tr><th>Marque</th><th>HEX</th><th>RGB</th></tr>
</thead>
<tbody>
<tr><td>Bleu Facebook</td><td>#1877F2</td><td>rgb(24, 119, 242)</td></tr>
<tr><td>Twitter / X Noir</td><td>#000000</td><td>rgb(0, 0, 0)</td></tr>
<tr><td>Rouge YouTube</td><td>#FF0000</td><td>rgb(255, 0, 0)</td></tr>
<tr><td>Vert Spotify</td><td>#1DB954</td><td>rgb(29, 185, 84)</td></tr>
<tr><td>Dégradé Instagram Début</td><td>#F58529</td><td>rgb(245, 133, 41)</td></tr>
<tr><td>Bleu LinkedIn</td><td>#0A66C2</td><td>rgb(10, 102, 194)</td></tr>
<tr><td>Violet Slack</td><td>#4A154B</td><td>rgb(74, 21, 75)</td></tr>
<tr><td>Vert WhatsApp</td><td>#25D366</td><td>rgb(37, 211, 102)</td></tr>
<tr><td>Aqua TikTok</td><td>#69C9D0</td><td>rgb(105, 201, 208)</td></tr>
<tr><td>Rouge Pinterest</td><td>#E60023</td><td>rgb(230, 0, 35)</td></tr>
</tbody>
</table>
</div>
<p>Les directives de marque spécifient souvent les couleurs dans plusieurs formats (HEX, RGB, CMYK, Pantone). Lors de l'implémentation des couleurs de marque en CSS, vérifiez toujours les valeurs par rapport à la page de ressources officielle de la marque pour garantir l'exactitude. Les couleurs peuvent légèrement varier entre les écrans, donc la cohérence dans le code est essentielle.</p>
</section>
<section class="content-section">
<h2>Modèles de couleurs comparés : HEX, RGB, HSL et CMYK</h2>
<p>Comprendre quand utiliser chaque modèle de couleur vous aide à travailler plus efficacement à travers différents outils et médias :</p>
<div style="overflow-x:auto">
<table>
<thead>
<tr><th>Modèle</th><th>Format</th><th>Plage</th><th>Meilleur pour</th></tr>
</thead>
<tbody>
<tr><td>HEX</td><td>#RRGGBB</td><td>00–FF par canal</td><td>CSS abrégé, spécifications de conception</td></tr>
<tr><td>RGB</td><td>rgb(R, G, B)</td><td>0–255 par canal</td><td>Manipulation programmatique, canvas JS</td></tr>
<tr><td>HSL</td><td>hsl(H, S%, L%)</td><td>H : 0–360, S/L : 0–100%</td><td>Création de palettes harmonieuses, thématisation</td></tr>
<tr><td>CMYK</td><td>C, M, Y, K pourcentages</td><td>0–100% par canal</td><td>Conception d'impression, impression offset</td></tr>
<tr><td>OKLCH</td><td>oklch(L C H)</td><td>L : 0–1, C : 0–0.4, H : 0–360</td><td>Couleur uniformément perceptuelle, CSS moderne</td></tr>
</tbody>
</table>
</div>
<p><strong>HEX et RGB sont mathématiquement identiques</strong> — ils représentent le même espace de couleur en utilisant une notation différente. La conversion entre eux est une simple traduction de base-16 à base-10 sans perte de précision ou de différences de gamme. HSL, en revanche, est une transformation de RGB en un système de coordonnées cylindriques qui facilite la compréhension de la teinte, de la saturation et de la luminosité indépendamment. CMYK est un modèle de couleur soustractif utilisé dans l'impression et ne peut pas représenter toutes les couleurs RGB (et vice versa), donc les conversions entre RGB et CMYK sont approximatives.</p>
<p>Dans le CSS moderne (Niveau 4), la fonction <code>color()</code> et les nouveaux espaces de couleur comme <code>oklch()</code> et <code>display-p3</code> gagnent en adoption, surtout pour les écrans à large gamme. Cependant, HEX et RGB restent la base pour la compatibilité web et sont pris en charge par tous les navigateurs en usage aujourd'hui.</p>
</section>
<section class="content-section">
<h2>Utilisation de HEX et RGB en CSS et JavaScript</h2>
<p>Les valeurs HEX et RGB sont toutes deux valides en CSS et produisent des résultats identiques. Voici des exemples pratiques de l'utilisation de chaque format :</p>
<p><strong>Déclarations CSS :</strong></p>
/* Notation HEX */
body { background-color: #1A2B3C; }
/* Notation RGB */
body { background-color: rgb(26, 43, 60); }
/* RGB avec alpha (transparence) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }
/* CSS moderne — syntaxe séparée par des espaces */
.card { color: rgb(26 43 60 / 80%); }
<p><strong>Fonctions de conversion JavaScript :</strong></p>
// HEX vers RGB
function hexToRgb(hex) {
const h = hex.replace('#', '');
return {
r: parseInt(h.substring(0, 2), 16),
g: parseInt(h.substring(2, 4), 16),
b: parseInt(h.substring(4, 6), 16)
};
}
// RGB vers HEX
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => v.toString(16).padStart(2, '0'))
.join('').toUpperCase();
}
<p>Lorsque vous travaillez avec l'API Canvas HTML, les couleurs doivent souvent être définies sous forme de chaînes. Les deux <code>"#FF8000"</code> et <code>"rgb(255, 128, 0)"</code> fonctionnent pour <code>fillStyle</code> et <code>strokeStyle</code>. Cependant, la méthode <code>getImageData()</code> renvoie les données des pixels sous forme de tableau d'entiers 0–255 (RGBA), ce qui rend le format RGB naturel pour la manipulation au niveau des pixels.</p>
<p>Dans les propriétés personnalisées CSS (variables), les valeurs HEX sont couramment stockées pour leur simplicité :</p>
:root {
--primary: #4A90E2;
--primary-rgb: 74, 144, 226; /* pour utilisation avec rgba() */
}
.element {
background: rgba(var(--primary-rgb), 0.3);
}
<p>Ce modèle de stockage des valeurs brutes des canaux RGB comme variable CSS est une technique populaire qui vous permet d'appliquer l'opacité de manière dynamique sans convertir entre les formats à l'exécution.</p>
</section>
<section class="content-section">
<h2>Accessibilité et contraste des couleurs</h2>
<p>Convertir HEX en RGB est souvent la première étape pour calculer les ratios de contraste des couleurs pour la conformité à l'accessibilité. Les directives pour l'accessibilité du contenu Web (WCAG) exigent un ratio de contraste minimum de <strong>4.5:1</strong> pour le texte normal et de <strong>3:1</strong> pour le texte large (18px+ en gras ou 24px+ en régulier).</p>
<p>La formule du ratio de contraste nécessite la <em>luminance relative</em> de chaque couleur, qui est calculée à partir des valeurs RGB linéaires. Les étapes sont :</p>
<ol>
<li>Convertissez HEX en RGB (0–255 par canal).</li>
<li>Normalisez chaque canal de 0 à 1 en divisant par 255.</li>
<li>Appliquez la formule de linéarisation sRGB : si la valeur est ≤ 0.04045, divisez par 12.92 ; sinon, calculez ((valeur + 0.055) / 1.055) ^ 2.4.</li>
<li>Calculez la luminance : L = 0.2126 × R + 0.7152 × G + 0.0722 × B.</li>
<li>Calculez le ratio de contraste entre deux couleurs : (L1 + 0.05) / (L2 + 0.05), où L1 est la couleur la plus claire.</li>
</ol>
<p>Comme vous pouvez le voir, les valeurs RGB sont l'entrée essentielle à chaque calcul de contraste d'accessibilité. Des outils comme le WebAIM Contrast Checker, le sélecteur de couleurs de Chrome DevTools et le scanner d'accessibilité axe effectuent tous cette conversion en interne.</p>
<p>Pour les designers, une règle empirique rapide : un texte sombre sur un fond clair (ou vice versa) avec une différence de luminance d'au moins 125 et une différence de couleur d'au moins 500 (en utilisant la somme des différences absolues sur les canaux R, G, B) passera généralement les normes WCAG AA.</p>
</section>
<section class="content-section faq-section">
<h2>Questions fréquemment posées</h2>
<details>
<summary>Comment convertir HEX en RGB ?</summary>
<p>Divisez le code HEX à 6 chiffres en trois paires (RR, GG, BB) et convertissez chaque paire de la base 16 à la base 10. Par exemple, <code>#1A2B3C</code> devient R = 26, G = 43, B = 60, ce qui s'écrit <code>rgb(26, 43, 60)</code>. Chaque chiffre hexadécimal A–F représente des valeurs de 10 à 15.</p>
</details>
<details>
<summary>Qu'est-ce que #FF5733 en RGB ?</summary>
<p><code>#FF5733</code> se convertit en <code>rgb(255, 87, 51)</code>. C'est une couleur rouge-orange vive couramment utilisée pour les boutons d'appel à l'action et les éléments d'avertissement dans le design web.</p>
</details>
<details>
<summary>Qu'est-ce qu'un code couleur HEX valide ?</summary>
<p>Un code couleur HEX valide se compose d'un symbole <code>#</code> suivi exactement de 6 caractères hexadécimaux (chiffres 0–9 et lettres A–F). Les codes abrégés à 3 chiffres comme <code>#FFF</code> sont également valides. CSS prend également en charge les codes HEX à 4 chiffres et à 8 chiffres qui incluent un canal alpha (transparence).</p>
</details>
<details>
<summary>Quelle est la différence entre HEX et RGB ?</summary>
<p>HEX et RGB représentent le même espace de couleur — ce sont des notations différentes pour les mêmes données. HEX utilise l'encodage en base 16 (<code>#4A90E2</code>) tandis que RGB utilise des valeurs décimales (<code>rgb(74, 144, 226)</code>). La conversion entre eux n'entraîne aucune perte de qualité ou d'information sur la couleur ; c'est purement un changement de notation.</p>
</details>
<details>
<summary>Puis-je utiliser des codes HEX avec transparence ?</summary>
<p>Oui. CSS prend en charge les codes HEX à 8 chiffres où les deux derniers chiffres représentent le canal alpha. Par exemple, <code>#FF880080</code> est orange à 50% d'opacité. Vous pouvez également utiliser <code>rgba()</code> pour la transparence : <code>rgba(255, 136, 0, 0.5)</code>. Le format HEX à 8 chiffres est pris en charge dans tous les navigateurs modernes.</p>
</details>
<details>
<summary>Comment convertir un code HEX à 3 chiffres ?</summary>
<p>Étendez chaque chiffre en le doublant. <code>#F80</code> devient <code>#FF8800</code>, qui se convertit ensuite en <code>rgb(255, 136, 0)</code>. L'abrégé ne fonctionne que lorsque chaque paire dans le code complet se compose de deux caractères identiques.</p>
</details>
<details>
<summary>Qu'est-ce que #000000 en RGB ?</summary>
<p><code>#000000</code> se convertit en <code>rgb(0, 0, 0)</code>, qui est un noir pur. Les trois canaux de couleur sont à intensité zéro, ce qui signifie qu'aucune lumière n'est émise. En CSS, cela équivaut à la couleur nommée <code>black</code>.</p>
</details>
<details>
<summary>Qu'est-ce que #FFFFFF en RGB ?</summary>
<p><code>#FFFFFF</code> se convertit en <code>rgb(255, 255, 255)</code>, qui est un blanc pur. Les trois canaux de couleur sont à intensité maximale. En CSS, cela équivaut à la couleur nommée <code>white</code>.</p>
</details>
<details>
<summary>Pourquoi les designers utilisent-ils HEX au lieu de RGB ?</summary>
<p>Les codes HEX sont plus compacts (7 caractères, y compris le dièse, contre jusqu'à 16 caractères pour une déclaration RGB), ce qui les rend pratiques pour les spécifications de conception, les guides de style et les flux de travail de copie rapide. Ils sont également le format de sortie par défaut dans la plupart des outils de conception comme Figma, Sketch et Photoshop. RGB est préféré lorsque vous devez manipuler des canaux individuels de manière programmatique.</p>
</details>
<details>
<summary>Comment vérifier le contraste des couleurs pour l'accessibilité ?</summary>
<p>Commencez par convertir votre couleur de texte et votre couleur de fond de HEX en RGB. Ensuite, calculez la luminance relative de chaque couleur en utilisant la formule WCAG, et calculez le ratio de contraste. WCAG AA exige au moins 4.5:1 pour le texte normal et 3:1 pour le texte large. Des outils comme le WebAIM Contrast Checker automatisent ce processus.</p>
</details>
</section>
<section class="related-section">
<h2>Convertisseurs connexes</h2>
<ul class="related-grid">
<li><a href="/km-to-miles-converter/">Convertisseur Km en Miles</a></li>
<li><a href="/kg-to-lbs-converter/">Convertisseur Kg en Lbs</a></li>
<li><a href="/celsius-to-fahrenheit-converter/">Convertisseur Celsius en Fahrenheit</a></li>
<li><a href="/cm-to-inches-converter/">Convertisseur CM en Pouces</a></li>
<li><a href="/liters-to-gallons-converter/">Convertisseur Litres en Gallons</a></li>
</ul>
</section>
<script> document.getElementById('calcBtn').addEventListener('click', () => {
try {
const hex = document.getElementById('hex').value;
if (!hex) {
const el = document.getElementById('result');
el.innerHTML = 'Please fill in all fields with valid numbers.';
el.style.display = 'block';
return;
}
const result = (() => { let h=hex.replace('#','').trim(); if(h.length===3) h=h.split('').map(c=>c+c).join(''); if(!/^[0-9A-Fa-f]{6}$/.test(h)) return 'Enter a valid 6-digit HEX code'; const rv=parseInt(h.slice(0,2),16),gv=parseInt(h.slice(2,4),16),bv=parseInt(h.slice(4,6),16); return `#${h.toUpperCase()} = rgb(${rv}, ${gv}, ${bv})`; })();
const el = document.getElementById('result');
el.innerHTML = result;
el.style.display = 'block';
el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
} catch(e) {
document.getElementById('result').innerHTML = 'Please fill in all fields with valid numbers.';
document.getElementById('result').style.display = 'block';
}
});
// Enter key triggers calc
document.getElementById('calcForm').addEventListener('keydown', (e) => {
if (e.key === 'Enter') { e.preventDefault(); document.getElementById('calcBtn').click(); }
});
// Live calculation on input change
function _dbCalc(fn, ms) { let t; return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); }; }
document.querySelectorAll('#calcForm input, #calcForm select').forEach(el => {
el.addEventListener('input', _dbCalc(() => document.getElementById('calcBtn').click(), 150));
});</script>