��<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Unit Converter - Multi-Category Unit Conversion Calculator | Free Online Tool</title> <meta name="description" content="Free online unit converter for length, weight, temperature, volume, area, speed, energy, power, and more. Convert between metric, imperial, and other measurement systems instantly."> <meta name="keywords" content="unit converter, measurement converter, metric converter, imperial converter, length converter, weight converter, temperature converter, volume converter"> <meta name="author" content="Calculator Tools"> <meta name="robots" content="index, follow"> <link rel="canonical" href="https://calculatortools.com/unit-converter.html"> <!-- Open Graph Tags --> <meta property="og:title" content="Unit Converter - Multi-Category Unit Conversion Calculator"> <meta property="og:description" content="Free online unit converter for length, weight, temperature, volume, area, speed, energy, power, and more. Convert between metric and imperial systems."> <meta property="og:type" content="website"> <meta property="og:url" content="https://calculatortools.com/unit-converter.html"> <meta property="og:image" content="https://calculatortools.com/images/unit-converter.jpg"> <meta property="og:site_name" content="Calculator Tools"> <!-- Twitter Card Tags --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Unit Converter - Multi-Category Unit Conversion Calculator"> <meta name="twitter:description" content="Free online unit converter for length, weight, temperature, volume, area, speed, energy, power, and more."> <meta name="twitter:image" content="https://calculatortools.com/images/unit-converter.jpg"> <!-- Schema Markup --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "Unit Converter", "description": "Multi-category unit conversion calculator for various measurement systems", "url": "https://calculatortools.com/unit-converter.html", "applicationCategory": "UtilityApplication", "operatingSystem": "Web Browser", "permissions": "browser", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }, "creator": { "@type": "Organization", "name": "Calculator Tools" } } </script> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <style> .converter-container { max-width: 900px; margin: 20px auto; padding: 20px; background: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .category-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; border-bottom: 2px solid #f0f0f0; } .tab-btn { padding: 12px 20px; background: #f8f9fa; border: none; border-radius: 5px 5px 0 0; cursor: pointer; font-size: 14px; transition: all 0.3s; } .tab-btn.active { background: #007bff; color: white; } .tab-btn:hover { background: #e9ecef; } .tab-btn.active:hover { background: #0056b3; } .converter-section { display: none; } .converter-section.active { display: block; } .input-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: end; margin-bottom: 20px; } .input-group { display: flex; flex-direction: column; } .input-group label { margin-bottom: 8px; font-weight: bold; color: #333; } .input-group input { padding: 12px; border: 2px solid #ddd; border-radius: 5px; font-size: 16px; } .input-group select { padding: 12px; border: 2px solid #ddd; border-radius: 5px; font-size: 16px; background: white; } .swap-btn { background: #28a745; color: white; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 18px; cursor: pointer; transition: all 0.3s; } .swap-btn:hover { background: #1e7e34; transform: rotate(180deg); } .result-display { background: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 4px solid #007bff; margin-top: 20px; } .result-value { font-size: 24px; font-weight: bold; color: #007bff; margin-bottom: 10px; } .conversion-formula { color: #666; font-size: 14px; } .quick-conversions { margin-top: 20px; padding: 15px; background: #e9ecef; border-radius: 8px; } .quick-conversion-item { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #ddd; } .quick-conversion-item:last-child { border-bottom: none; } @media (max-width: 768px) { .converter-container { margin: 10px; padding: 15px; } .input-row { grid-template-columns: 1fr; gap: 15px; } .category-tabs { justify-content: center; } .tab-btn { font-size: 12px; padding: 10px 15px; } } </style> </head> <body> <header class="header"> <div class="container"> <div class="logo"> <i class="fas fa-calculator"></i> <span>Calculator Tools</span> </div> <nav class="nav-menu"> <a href="index.html" class="nav-link">Home</a> <a href="#financial" class="nav-link">Financial</a> <a href="#health" class="nav-link">Health & Fitness</a> <a href="#math" class="nav-link">Math</a> <a href="#time" class="nav-link">Time & Date</a> <a href="#other" class="nav-link active">Other Tools</a> </nav> <div class="mobile-menu-toggle"> <i class="fas fa-bars"></i> </div> </div> </header> <div class="container"> <header> <h1>Unit Converter</h1> <p>Convert between different units of measurement including length, weight, temperature, volume, area, speed, energy, and more.</p> </header> <div class="converter-container"> <div class="category-tabs"> <button class="tab-btn active" onclick="showCategory('length')">Length</button> <button class="tab-btn" onclick="showCategory('weight')">Weight</button> <button class="tab-btn" onclick="showCategory('temperature')">Temperature</button> <button class="tab-btn" onclick="showCategory('volume')">Volume</button> <button class="tab-btn" onclick="showCategory('area')">Area</button> <button class="tab-btn" onclick="showCategory('speed')">Speed</button> <button class="tab-btn" onclick="showCategory('energy')">Energy</button> <button class="tab-btn" onclick="showCategory('power')">Power</button> </div> <!-- Length Converter --> <div id="length" class="converter-section active"> <h3>Length Converter</h3> <div class="input-row"> <div class="input-group"> <label for="length-from-value">From:</label> <input type="number" id="length-from-value" placeholder="Enter value" oninput="convertLength('from')"> <select id="length-from-unit" onchange="convertLength('from')"> <option value="mm">Millimeter (mm)</option> <option value="cm">Centimeter (cm)</option> <option value="m" selected>Meter (m)</option> <option value="km">Kilometer (km)</option> <option value="in">Inch (in)</option> <option value="ft">Foot (ft)</option> <option value="yd">Yard (yd)</option> <option value="mi">Mile (mi)</option> </select> </div> <button class="swap-btn" onclick="swapUnits('length')" title="Swap units">�!</button> <div class="input-group"> <label for="length-to-value">To:</label> <input type="number" id="length-to-value" placeholder="Result" oninput="convertLength('to')"> <select id="length-to-unit" onchange="convertLength('from')"> <option value="mm">Millimeter (mm)</option> <option value="cm">Centimeter (cm)</option> <option value="m">Meter (m)</option> <option value="km" selected>Kilometer (km)</option> <option value="in">Inch (in)</option> <option value="ft">Foot (ft)</option> <option value="yd">Yard (yd)</option> <option value="mi">Mile (mi)</option> </select> </div> </div> </div> <!-- Weight Converter --> <div id="weight" class="converter-section"> <h3>Weight Converter</h3> <div class="input-row"> <div class="input-group"> <label for="weight-from-value">From:</label> <input type="number" id="weight-from-value" placeholder="Enter value" oninput="convertWeight('from')"> <select id="weight-from-unit" onchange="convertWeight('from')"> <option value="mg">Milligram (mg)</option> <option value="g">Gram (g)</option> <option value="kg" selected>Kilogram (kg)</option> <option value="t">Metric Ton (t)</option> <option value="oz">Ounce (oz)</option> <option value="lb">Pound (lb)</option> <option value="st">Stone (st)</option> </select> </div> <button class="swap-btn" onclick="swapUnits('weight')" title="Swap units">�!</button> <div class="input-group"> <label for="weight-to-value">To:</label> <input type="number" id="weight-to-value" placeholder="Result" oninput="convertWeight('to')"> <select id="weight-to-unit" onchange="convertWeight('from')"> <option value="mg">Milligram (mg)</option> <option value="g">Gram (g)</option> <option value="kg">Kilogram (kg)</option> <option value="t">Metric Ton (t)</option> <option value="oz">Ounce (oz)</option> <option value="lb" selected>Pound (lb)</option> <option value="st">Stone (st)</option> </select> </div> </div> </div> <!-- Temperature Converter --> <div id="temperature" class="converter-section"> <h3>Temperature Converter</h3> <div class="input-row"> <div class="input-group"> <label for="temp-from-value">From:</label> <input type="number" id="temp-from-value" placeholder="Enter value" oninput="convertTemperature('from')"> <select id="temp-from-unit" onchange="convertTemperature('from')"> <option value="c" selected>Celsius (�C)</option> <option value="f">Fahrenheit (�F)</option> <option value="k">Kelvin (K)</option> <option value="r">Rankine (�R)</option> </select> </div> <button class="swap-btn" onclick="swapUnits('temperature')" title="Swap units">�!</button> <div class="input-group"> <label for="temp-to-value">To:</label> <input type="number" id="temp-to-value" placeholder="Result" oninput="convertTemperature('to')"> <select id="temp-to-unit" onchange="convertTemperature('from')"> <option value="c">Celsius (�C)</option> <option value="f" selected>Fahrenheit (�F)</option> <option value="k">Kelvin (K)</option> <option value="r">Rankine (�R)</option> </select> </div> </div> </div> <!-- Volume Converter --> <div id="volume" class="converter-section"> <h3>Volume Converter</h3> <div class="input-row"> <div class="input-group"> <label for="volume-from-value">From:</label> <input type="number" id="volume-from-value" placeholder="Enter value" oninput="convertVolume('from')"> <select id="volume-from-unit" onchange="convertVolume('from')"> <option value="ml">Milliliter (ml)</option> <option value="l" selected>Liter (l)</option> <option value="m3">Cubic Meter (m�)</option> <option value="tsp">Teaspoon (tsp)</option> <option value="tbsp">Tablespoon (tbsp)</option> <option value="floz">Fluid Ounce (fl oz)</option> <option value="cup">Cup</option> <option value="pt">Pint (pt)</option> <option value="qt">Quart (qt)</option> <option value="gal">Gallon (gal)</option> </select> </div> <button class="swap-btn" onclick="swapUnits('volume')" title="Swap units">�!</button> <div class="input-group"> <label for="volume-to-value">To:</label> <input type="number" id="volume-to-value" placeholder="Result" oninput="convertVolume('to')"> <select id="volume-to-unit" onchange="convertVolume('from')"> <option value="ml">Milliliter (ml)</option> <option value="l">Liter (l)</option> <option value="m3">Cubic Meter (m�)</option> <option value="tsp">Teaspoon (tsp)</option> <option value="tbsp">Tablespoon (tbsp)</option> <option value="floz">Fluid Ounce (fl oz)</option> <option value="cup">Cup</option> <option value="pt">Pint (pt)</option> <option value="qt">Quart (qt)</option> <option value="gal" selected>Gallon (gal)</option> </select> </div> </div> </div> <!-- Area Converter --> <div id="area" class="converter-section"> <h3>Area Converter</h3> <div class="input-row"> <div class="input-group"> <label for="area-from-value">From:</label> <input type="number" id="area-from-value" placeholder="Enter value" oninput="convertArea('from')"> <select id="area-from-unit" onchange="convertArea('from')"> <option value="mm2">Square Millimeter (mm�)</option> <option value="cm2">Square Centimeter (cm�)</option> <option value="m2" selected>Square Meter (m�)</option> <option value="ha">Hectare (ha)</option> <option value="km2">Square Kilometer (km�)</option> <option value="in2">Square Inch (in�)</option> <option value="ft2">Square Foot (ft�)</option> <option value="yd2">Square Yard (yd�)</option> <option value="ac">Acre (ac)</option> <option value="mi2">Square Mile (mi�)</option> </select> </div> <button class="swap-btn" onclick="swapUnits('area')" title="Swap units">�!</button> <div class="input-group"> <label for="area-to-value">To:</label> <input type="number" id="area-to-value" placeholder="Result" oninput="convertArea('to')"> <select id="area-to-unit" onchange="convertArea('from')"> <option value="mm2">Square Millimeter (mm�)</option> <option value="cm2">Square Centimeter (cm�)</option> <option value="m2">Square Meter (m�)</option> <option value="ha">Hectare (ha)</option> <option value="km2">Square Kilometer (km�)</option> <option value="in2">Square Inch (in�)</option> <option value="ft2" selected>Square Foot (ft�)</option> <option value="yd2">Square Yard (yd�)</option> <option value="ac">Acre (ac)</option> <option value="mi2">Square Mile (mi�)</option> </select> </div> </div> </div> <!-- Speed Converter --> <div id="speed" class="converter-section"> <h3>Speed Converter</h3> <div class="input-row"> <div class="input-group"> <label for="speed-from-value">From:</label> <input type="number" id="speed-from-value" placeholder="Enter value" oninput="convertSpeed('from')"> <select id="speed-from-unit" onchange="convertSpeed('from')"> <option value="ms">Meter/Second (m/s)</option> <option value="kmh" selected>Kilometer/Hour (km/h)</option> <option value="mph">Mile/Hour (mph)</option> <option value="kn">Knot (kn)</option> <option value="fps">Foot/Second (ft/s)</option> </select> </div> <button class="swap-btn" onclick="swapUnits('speed')" title="Swap units">�!</button> <div class="input-group"> <label for="speed-to-value">To:</label> <input type="number" id="speed-to-value" placeholder="Result" oninput="convertSpeed('to')"> <select id="speed-to-unit" onchange="convertSpeed('from')"> <option value="ms">Meter/Second (m/s)</option> <option value="kmh">Kilometer/Hour (km/h)</option> <option value="mph" selected>Mile/Hour (mph)</option> <option value="kn">Knot (kn)</option> <option value="fps">Foot/Second (ft/s)</option> </select> </div> </div> </div> <!-- Energy Converter --> <div id="energy" class="converter-section"> <h3>Energy Converter</h3> <div class="input-row"> <div class="input-group"> <label for="energy-from-value">From:</label> <input type="number" id="energy-from-value" placeholder="Enter value" oninput="convertEnergy('from')"> <select id="energy-from-unit" onchange="convertEnergy('from')"> <option value="j" selected>Joule (J)</option> <option value="kj">Kilojoule (kJ)</option> <option value="cal">Calorie (cal)</option> <option value="kcal">Kilocalorie (kcal)</option> <option value="wh">Watt-hour (Wh)</option> <option value="kwh">Kilowatt-hour (kWh)</option> <option value="btu">BTU</option> </select> </div> <button class="swap-btn" onclick="swapUnits('energy')" title="Swap units">�!</button> <div class="input-group"> <label for="energy-to-value">To:</label> <input type="number" id="energy-to-value" placeholder="Result" oninput="convertEnergy('to')"> <select id="energy-to-unit" onchange="convertEnergy('from')"> <option value="j">Joule (J)</option> <option value="kj">Kilojoule (kJ)</option> <option value="cal">Calorie (cal)</option> <option value="kcal" selected>Kilocalorie (kcal)</option> <option value="wh">Watt-hour (Wh)</option> <option value="kwh">Kilowatt-hour (kWh)</option> <option value="btu">BTU</option> </select> </div> </div> </div> <!-- Power Converter --> <div id="power" class="converter-section"> <h3>Power Converter</h3> <div class="input-row"> <div class="input-group"> <label for="power-from-value">From:</label> <input type="number" id="power-from-value" placeholder="Enter value" oninput="convertPower('from')"> <select id="power-from-unit" onchange="convertPower('from')"> <option value="w" selected>Watt (W)</option> <option value="kw">Kilowatt (kW)</option> <option value="hp">Horsepower (hp)</option> <option value="ps">Metric Horsepower (PS)</option> <option value="btu/h">BTU/hour</option> </select> </div> <button class="swap-btn" onclick="swapUnits('power')" title="Swap units">�!</button> <div class="input-group"> <label for="power-to-value">To:</label> <input type="number" id="power-to-value" placeholder="Result" oninput="convertPower('to')"> <select id="power-to-unit" onchange="convertPower('from')"> <option value="w">Watt (W)</option> <option value="kw">Kilowatt (kW)</option> <option value="hp" selected>Horsepower (hp)</option> <option value="ps">Metric Horsepower (PS)</option> <option value="btu/h">BTU/hour</option> </select> </div> </div> </div> </div> <div class="info-section" style="max-width: 900px; margin: 30px auto; padding: 20px; background: #f8f9fa; border-radius: 8px;"> <h3>About Unit Conversion</h3> <p>Unit conversion is the process of converting the value of a physical quantity from one unit to another. This tool supports conversion between various measurement systems including:</p> <ul> <li><strong>Metric System:</strong> Based on powers of 10 (meters, grams, liters, etc.)</li> <li><strong>Imperial System:</strong> Traditional British units (feet, pounds, gallons, etc.)</li> <li><strong>US Customary:</strong> American variations of imperial units</li> <li><strong>Scientific Units:</strong> SI base units and derived units</li> </ul> <h4>Common Conversion Factors:</h4> <ul> <li>1 meter = 3.28084 feet</li> <li>1 kilogram = 2.20462 pounds</li> <li>1 liter = 0.264172 gallons (US)</li> <li>�F = (�C � 9/5) + 32</li> <li>1 square meter = 10.7639 square feet</li> </ul> </div> </div> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-section"> <h4>Calculator Tools</h4> <ul> <li><a href="index.html">Home</a></li> <li><a href="sitemap.html">All Calculators</a></li> <li><a href="#about">About</a></li> </ul> </div> <div class="footer-section"> <h4>Categories</h4> <ul> <li><a href="#financial">Financial</a></li> <li><a href="#health">Health & Fitness</a></li> <li><a href="#math">Math</a></li> <li><a href="#time">Time & Date</a></li> </ul> </div> <div class="footer-section"> <h4>Support</h4> <ul> <li><a href="#privacy">Privacy Policy</a></li> <li><a href="#terms">Terms of Use</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> <div class="footer-bottom"> <p>&copy; 2024 Calculator Tools. All rights reserved.</p> <p>Designed & Developed by <strong>Long Th�i B�o</strong> | Unauthorized copying is strictly prohibited</p> <p><small>All content, design, and code are protected by copyright law</small></p> </div> </div> </footer> <script> // Unit conversion factors (to base units) const conversions = { length: { mm: 0.001, cm: 0.01, m: 1, km: 1000, in: 0.0254, ft: 0.3048, yd: 0.9144, mi: 1609.344 }, weight: { mg: 0.000001, g: 0.001, kg: 1, t: 1000, oz: 0.0283495, lb: 0.453592, st: 6.35029 }, volume: { ml: 0.001, l: 1, m3: 1000, tsp: 0.00492892, tbsp: 0.0147868, floz: 0.0295735, cup: 0.236588, pt: 0.473176, qt: 0.946353, gal: 3.78541 }, area: { mm2: 0.000001, cm2: 0.0001, m2: 1, ha: 10000, km2: 1000000, in2: 0.00064516, ft2: 0.092903, yd2: 0.836127, ac: 4046.86, mi2: 2589988 }, speed: { ms: 1, kmh: 0.277778, mph: 0.44704, kn: 0.514444, fps: 0.3048 }, energy: { j: 1, kj: 1000, cal: 4.184, kcal: 4184, wh: 3600, kwh: 3600000, btu: 1055.06 }, power: { w: 1, kw: 1000, hp: 745.7, ps: 735.5, 'btu/h': 0.293071 } }; function showCategory(category) { // Hide all sections document.querySelectorAll('.converter-section').forEach(section => { section.classList.remove('active'); }); // Show selected section document.getElementById(category).classList.add('active'); // Update active tab document.querySelectorAll('.tab-btn').forEach(btn => { btn.classList.remove('active'); }); event.target.classList.add('active'); } function convertLength(direction) { convertUnit('length', direction); } function convertWeight(direction) { convertUnit('weight', direction); } function convertTemperature(direction) { const fromValue = parseFloat(document.getElementById('temp-from-value').value); const toValue = parseFloat(document.getElementById('temp-to-value').value); const fromUnit = document.getElementById('temp-from-unit').value; const toUnit = document.getElementById('temp-to-unit').value; if (direction === 'from' && !isNaN(fromValue)) { let celsius; // Convert to Celsius first switch (fromUnit) { case 'c': celsius = fromValue; break; case 'f': celsius = (fromValue - 32) * 5/9; break; case 'k': celsius = fromValue - 273.15; break; case 'r': celsius = (fromValue - 491.67) * 5/9; break; } // Convert from Celsius to target unit let result; switch (toUnit) { case 'c': result = celsius; break; case 'f': result = celsius * 9/5 + 32; break; case 'k': result = celsius + 273.15; break; case 'r': result = celsius * 9/5 + 491.67; break; } document.getElementById('temp-to-value').value = result.toFixed(4); } else if (direction === 'to' && !isNaN(toValue)) { let celsius; // Convert to Celsius first switch (toUnit) { case 'c': celsius = toValue; break; case 'f': celsius = (toValue - 32) * 5/9; break; case 'k': celsius = toValue - 273.15; break; case 'r': celsius = (toValue - 491.67) * 5/9; break; } // Convert from Celsius to source unit let result; switch (fromUnit) { case 'c': result = celsius; break; case 'f': result = celsius * 9/5 + 32; break; case 'k': result = celsius + 273.15; break; case 'r': result = celsius * 9/5 + 491.67; break; } document.getElementById('temp-from-value').value = result.toFixed(4); } } function convertVolume(direction) { convertUnit('volume', direction); } function convertArea(direction) { convertUnit('area', direction); } function convertSpeed(direction) { convertUnit('speed', direction); } function convertEnergy(direction) { convertUnit('energy', direction); } function convertPower(direction) { convertUnit('power', direction); } function convertUnit(category, direction) { const fromValue = parseFloat(document.getElementById(`${category}-from-value`).value); const toValue = parseFloat(document.getElementById(`${category}-to-value`).value); const fromUnit = document.getElementById(`${category}-from-unit`).value; const toUnit = document.getElementById(`${category}-to-unit`).value; if (direction === 'from' && !isNaN(fromValue)) { const baseValue = fromValue * conversions[category][fromUnit]; const result = baseValue / conversions[category][toUnit]; document.getElementById(`${category}-to-value`).value = result.toFixed(8).replace(/\.?0+$/, ''); } else if (direction === 'to' && !isNaN(toValue)) { const baseValue = toValue * conversions[category][toUnit]; const result = baseValue / conversions[category][fromUnit]; document.getElementById(`${category}-from-value`).value = result.toFixed(8).replace(/\.?0+$/, ''); } } function swapUnits(category) { const fromUnit = document.getElementById(`${category}-from-unit`); const toUnit = document.getElementById(`${category}-to-unit`); const fromValue = document.getElementById(`${category}-from-value`); const toValue = document.getElementById(`${category}-to-value`); // Swap units const tempUnit = fromUnit.value; fromUnit.value = toUnit.value; toUnit.value = tempUnit; // Swap values const tempValue = fromValue.value; fromValue.value = toValue.value; toValue.value = tempValue; } // Initialize with default conversion window.onload = function() { convertLength('from'); }; </script> </body> </html>