{"id":13,"date":"2026-01-02T22:13:59","date_gmt":"2026-01-02T22:13:59","guid":{"rendered":"https:\/\/onlinepercentagecalculator.co.uk\/blog\/?p=13"},"modified":"2026-01-09T14:06:24","modified_gmt":"2026-01-09T14:06:24","slug":"how-much-percentage-increase-calculator","status":"publish","type":"post","link":"https:\/\/onlinepercentagecalculator.co.uk\/blog\/how-much-percentage-increase-calculator\/","title":{"rendered":"How much percentage increase calculator"},"content":{"rendered":"\n<p>Sometimes in our day to day we want to know about percentage in different ways for instance percentage increase or decrease or a percetange withing a percentage.<\/p>\n\n\n\n<p>For percentage increase this is where numbers can get a little complex and we may even try to use a calculator for this.<\/p>\n\n\n\n<p>But before we do let&#8217;s lok at what the formula is and how it looks like on paper (ahum screen):<\/p>\n\n\n\n<p>1. <strong>Find the Difference<\/strong>: Subtract the original value from the new value (New &#8211; Original).<\/p>\n\n\n\n<p>2. <strong>Divide by Original<\/strong>: Divide the difference by the original value.<\/p>\n\n\n\n<p>3. <strong>Multiply by 100<\/strong>: Convert to a percentage.<\/p>\n\n\n\n<p><strong>Example<\/strong>: A price goes from $35 to $45.50. ($45.50 &#8211; $35) \/ $35 \\* 100 = 30% increase.<\/p>\n\n\n\n<p>Here is another example of how to get a percentage increase: Price increases from $5 to $15. We do 15 &#8211; 5 then divide by 5 and multiply by 100 or mathetmatically this looks like: (15 &#8211; 5) \/ 5 * 100. This equals to 200 or a 200% increase from 5 to 15.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>If you do however want to keep a handy increase or decrease percentage calculator try ours on this page here<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Percentage Increase\/Decrease Calculator<\/title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n        }\n\n        body {\n                                 background: linear-gradient(180deg, #1d85e2 0%, #fff 3%);            min-height: 100vh;\n            padding: 20px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        .container {\n            max-width: 1200px;\n            width: 100%;\n            margin: 0 auto;\n        }\n\n        header {\n            text-align: center;\n            margin-bottom: 40px;\n            padding: 20px;\n            background: rgba(255, 255, 255, 0.1);\n            backdrop-filter: blur(10px);\n            border-radius: 15px;\n            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n        }\n\n        h1 {\n            color: white;\n            font-size: 2.5rem;\n            margin-bottom: 10px;\n            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);\n        }\n\n        .subtitle {\n            color: rgba(255, 255, 255, 0.9);\n            font-size: 1.2rem;\n            max-width: 600px;\n            margin: 0 auto;\n            line-height: 1.6;\n        }\n\n        .calculators-container {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));\n            gap: 30px;\n            margin-bottom: 40px;\n        }\n\n        @media (max-width: 768px) {\n            .calculators-container {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        .calculator {\n            background: white;\n            border-radius: 15px;\n            padding: 30px;\n            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\n        }\n\n        .calculator:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);\n        }\n\n        .calculator h2 {\n            color: #333;\n            margin-bottom: 25px;\n            padding-bottom: 15px;\n            border-bottom: 2px solid #667eea;\n            font-size: 1.8rem;\n        }\n\n        .input-group {\n            margin-bottom: 20px;\n        }\n\n        .input-group label {\n            display: block;\n            margin-bottom: 8px;\n            color: #555;\n            font-weight: 600;\n        }\n\n        .input-group input {\n            width: 100%;\n            padding: 15px;\n            border: 2px solid #e0e0e0;\n            border-radius: 10px;\n            font-size: 1.1rem;\n            transition: all 0.3s ease;\n        }\n\n        .input-group input:focus {\n            outline: none;\n            border-color: #667eea;\n            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n        }\n\n        .calculate-btn {\n            background: linear-gradient(to right, #667eea, #764ba2);\n            color: white;\n            border: none;\n            padding: 16px 32px;\n            border-radius: 10px;\n            font-size: 1.1rem;\n            font-weight: 600;\n            cursor: pointer;\n            width: 100%;\n            transition: all 0.3s ease;\n            margin-top: 10px;\n        }\n\n        .calculate-btn:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 7px 20px rgba(102, 126, 234, 0.4);\n        }\n\n        .calculate-btn:active {\n            transform: translateY(0);\n        }\n\n        .result {\n            margin-top: 25px;\n            padding: 20px;\n            border-radius: 10px;\n            background: #f8f9fa;\n            display: none;\n            animation: fadeIn 0.5s ease;\n        }\n\n        .result.show {\n            display: block;\n        }\n\n        .result h3 {\n            color: #333;\n            margin-bottom: 15px;\n            font-size: 1.3rem;\n        }\n\n        .result p {\n            color: #555;\n            margin-bottom: 10px;\n            font-size: 1.1rem;\n            line-height: 1.5;\n        }\n\n        .result-value {\n            font-size: 1.8rem;\n            font-weight: 700;\n            color: #667eea;\n            margin: 10px 0;\n        }\n\n        .result-increase {\n            color: #4CAF50;\n            font-weight: 600;\n        }\n\n        .result-decrease {\n            color: #f44336;\n            font-weight: 600;\n        }\n\n        .formula-explanation {\n            margin-top: 20px;\n            padding: 15px;\n            background: #f0f2ff;\n            border-radius: 8px;\n            border-left: 4px solid #667eea;\n        }\n\n        .formula-explanation h4 {\n            color: #333;\n            margin-bottom: 10px;\n        }\n\n        .formula-explanation p {\n            color: #666;\n            font-size: 0.95rem;\n            line-height: 1.5;\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        .calculator-description {\n            color: #666;\n            margin-bottom: 20px;\n            line-height: 1.6;\n            font-size: 1rem;\n        }\n\n        .instructions {\n            background: rgba(255, 255, 255, 0.9);\n            padding: 25px;\n            border-radius: 15px;\n            margin-top: 30px;\n            max-width: 800px;\n            text-align: center;\n        }\n\n        .instructions h3 {\n            color: #333;\n            margin-bottom: 15px;\n        }\n\n        .instructions p {\n            color: #555;\n            line-height: 1.6;\n            margin-bottom: 10px;\n        }\n\n        footer {\n            margin-top: 40px;\n            color: rgba(255, 255, 255, 0.8);\n            text-align: center;\n            padding: 20px;\n            font-size: 0.9rem;\n        }\n\n        \/* Responsive adjustments *\/\n        @media (max-width: 600px) {\n            .calculator {\n                padding: 20px;\n            }\n            \n            .calculators-container {\n                gap: 20px;\n            }\n            \n            h1 {\n                font-size: 2rem;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <header>\n            <h1>Percentage Increase &#038; Decrease Calculator<\/h1>\n            <p class=\"subtitle\">Calculate percentage increases from a base value, or compare two values to find the percentage change between them<\/p>\n        <\/header>\n\n        <div class=\"calculators-container\">\n            <!-- Calculator 1: Percentage Increase Calculator -->\n            <div class=\"calculator\">\n                <h2>Percentage Increase Calculator<\/h2>\n                <p class=\"calculator-description\">Calculate the new value after applying a percentage increase to the original number.<\/p>\n                \n                <div class=\"input-group\">\n                    <label for=\"originalValue\">Original Value<\/label>\n                    <input type=\"number\" id=\"originalValue\" placeholder=\"Enter the starting number\" step=\"any\" min=\"0\">\n                <\/div>\n                \n                <div class=\"input-group\">\n                    <label for=\"percentageIncrease\">Percentage Increase (%)<\/label>\n                    <input type=\"number\" id=\"percentageIncrease\" placeholder=\"Enter percentage to increase by\" step=\"any\" min=\"0\">\n                <\/div>\n                \n                <button class=\"calculate-btn\" onclick=\"calculateIncrease()\">Calculate Increase<\/button>\n                \n                <div class=\"result\" id=\"increaseResult\">\n                    <h3>Calculation Result<\/h3>\n                    <p>Original Value: <span id=\"originalValueDisplay\">0<\/span><\/p>\n                    <p>Percentage Increase: <span id=\"percentageDisplay\">0<\/span>%<\/p>\n                    <p>Increase Amount: <span id=\"increaseAmount\" class=\"result-value\">0<\/span><\/p>\n                    <p>New Value After Increase: <span id=\"newValue\" class=\"result-value result-increase\">0<\/span><\/p>\n                    \n                    <div class=\"formula-explanation\">\n                        <h4>Formula Used<\/h4>\n                        <p>Increase Amount = Original Value \u00d7 (Percentage \/ 100)<\/p>\n                        <p>New Value = Original Value + Increase Amount<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Calculator 2: Percentage Change Calculator -->\n            <div class=\"calculator\">\n                <h2>Percentage Change Calculator<\/h2>\n                <p class=\"calculator-description\">Compare two values to find the percentage increase or decrease between them.<\/p>\n                \n                <div class=\"input-group\">\n                    <label for=\"oldValue\">Old\/Initial Value<\/label>\n                    <input type=\"number\" id=\"oldValue\" placeholder=\"Enter the first value\" step=\"any\" min=\"0\">\n                <\/div>\n                \n                <div class=\"input-group\">\n                    <label for=\"newValueCompare\">New\/Final Value<\/label>\n                    <input type=\"number\" id=\"newValueCompare\" placeholder=\"Enter the second value\" step=\"any\" min=\"0\">\n                <\/div>\n                \n                <button class=\"calculate-btn\" onclick=\"calculateChange()\">Calculate Change<\/button>\n                \n                <div class=\"result\" id=\"changeResult\">\n                    <h3>Calculation Result<\/h3>\n                    <p>Old Value: <span id=\"oldValueDisplay\">0<\/span><\/p>\n                    <p>New Value: <span id=\"newValueDisplay\">0<\/span><\/p>\n                    <p>Change Amount: <span id=\"changeAmount\" class=\"result-value\">0<\/span><\/p>\n                    <p>Percentage Change: <span id=\"percentageChange\" class=\"result-value\">0<\/span>%<\/p>\n                    <p>Change Type: <span id=\"changeType\" class=\"result-value\">No Change<\/span><\/p>\n                    \n                    <div class=\"formula-explanation\">\n                        <h4>Formula Used<\/h4>\n                        <p>Change Amount = New Value &#8211; Old Value<\/p>\n                        <p>Percentage Change = (Change Amount \/ Old Value) \u00d7 100<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"instructions\">\n            <h3>How to Use These Calculators<\/h3>\n            <p><strong>Calculator 1 (Percentage Increase):<\/strong> Enter a starting number and the percentage you want to increase it by. The calculator will show you the increased amount and the new total value.<\/p>\n            <p><strong>Calculator 2 (Percentage Change):<\/strong> Enter two values (old and new). The calculator will tell you the difference, whether it&#8217;s an increase or decrease, and the percentage change between them.<\/p>\n            <p>You can enter whole numbers or decimals. Click &#8220;Calculate&#8221; to see your results instantly!<\/p>\n        <\/div>\n\n        <footer>\n            <p>\u00a9 2026 Percentage Calculators | Made for accurate percentage calculations<\/p>\n        <\/footer>\n    <\/div>\n\n    <script>\n        function calculateIncrease() {\n            const originalValue = parseFloat(document.getElementById('originalValue').value);\n            const percentageIncrease = parseFloat(document.getElementById('percentageIncrease').value);\n            const resultDiv = document.getElementById('increaseResult');\n            \n            \/\/ Input validation\n            if (isNaN(originalValue) || isNaN(percentageIncrease)) {\n                alert(\"Please enter valid numbers in both fields.\");\n                return;\n            }\n            \n            \/\/ Calculate increase\n            const increaseAmount = originalValue * (percentageIncrease \/ 100);\n            const newValue = originalValue + increaseAmount;\n            \n            \/\/ Display results\n            document.getElementById('originalValueDisplay').textContent = originalValue.toFixed(2);\n            document.getElementById('percentageDisplay').textContent = percentageIncrease.toFixed(2);\n            document.getElementById('increaseAmount').textContent = increaseAmount.toFixed(2);\n            document.getElementById('newValue').textContent = newValue.toFixed(2);\n            \n            \/\/ Show result with animation\n            resultDiv.classList.add('show');\n        }\n        \n        function calculateChange() {\n            const oldValue = parseFloat(document.getElementById('oldValue').value);\n            const newValue = parseFloat(document.getElementById('newValueCompare').value);\n            const resultDiv = document.getElementById('changeResult');\n            \n            \/\/ Input validation\n            if (isNaN(oldValue) || isNaN(newValue)) {\n                alert(\"Please enter valid numbers in both fields.\");\n                return;\n            }\n            \n            \/\/ Calculate change\n            const changeAmount = newValue - oldValue;\n            const percentageChange = (changeAmount \/ oldValue) * 100;\n            \n            \/\/ Determine change type\n            let changeType, changeColorClass;\n            if (changeAmount > 0) {\n                changeType = \"Increase\";\n                changeColorClass = \"result-increase\";\n            } else if (changeAmount < 0) {\n                changeType = \"Decrease\";\n                changeColorClass = \"result-decrease\";\n            } else {\n                changeType = \"No Change\";\n                changeColorClass = \"\";\n            }\n            \n            \/\/ Display results\n            document.getElementById('oldValueDisplay').textContent = oldValue.toFixed(2);\n            document.getElementById('newValueDisplay').textContent = newValue.toFixed(2);\n            document.getElementById('changeAmount').textContent = changeAmount.toFixed(2);\n            document.getElementById('percentageChange').textContent = percentageChange.toFixed(2) + \"%\";\n            document.getElementById('changeType').textContent = changeType;\n            \n            \/\/ Apply color to change type\n            const changeTypeElement = document.getElementById('changeType');\n            changeTypeElement.className = \"result-value \" + changeColorClass;\n            \n            \/\/ Apply color to percentage change\n            const percentageChangeElement = document.getElementById('percentageChange');\n            percentageChangeElement.className = \"result-value \" + changeColorClass;\n            \n            \/\/ Show result with animation\n            resultDiv.classList.add('show');\n        }\n        \n        \/\/ Allow Enter key to trigger calculations\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ For calculator 1\n            const inputsCalc1 = document.querySelectorAll('#originalValue, #percentageIncrease');\n            inputsCalc1.forEach(input => {\n                input.addEventListener('keypress', function(e) {\n                    if (e.key === 'Enter') {\n                        calculateIncrease();\n                    }\n                });\n            });\n            \n            \/\/ For calculator 2\n            const inputsCalc2 = document.querySelectorAll('#oldValue, #newValueCompare');\n            inputsCalc2.forEach(input => {\n                input.addEventListener('keypress', function(e) {\n                    if (e.key === 'Enter') {\n                        calculateChange();\n                    }\n                });\n            });\n        });\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes in our day to day we want to know about percentage in different ways for instance percentage increase or decrease or a percetange withing a percentage. For percentage increase this is where numbers can get a little complex and we may even try to use a calculator for this. But before we do let&#8217;s [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":14,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,45],"tags":[15,3,7,23,18,28,5,14,16,10,17,27,13,6,12,8,19,22,26,4,9,11,20,21],"class_list":["post-13","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-cool-and-simple-to-use-online-calculator-and-conversion-tools","tag-agentic-ai","tag-ai-2025","tag-best-ai","tag-best-books-on-ai","tag-best-free-text-to-video-ai","tag-calculate-percentage-increase-or-decrease-formula","tag-clout-ai","tag-cryptocurrency-predictions","tag-current-ceo-of-perplexity-ai","tag-education-tools-with-ai","tag-gemini-ai","tag-how-much-percentage-increase-calculator","tag-how-to-make-money-with-ai","tag-latest-advancements-in-ai","tag-latest-developments-in-ai","tag-latest-trends-in-ai","tag-most-advanced-ai","tag-number-of-x-users-interested-in-ai","tag-percentage-calculator-increase-or-decrease","tag-quinn-ai","tag-rawlings-clout-ai","tag-ways-to-make-money-with-ai","tag-world-summit-ai-amsterdam-dates","tag---perplexity-ai"],"_links":{"self":[{"href":"https:\/\/onlinepercentagecalculator.co.uk\/blog\/wp-json\/wp\/v2\/posts\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onlinepercentagecalculator.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/onlinepercentagecalculator.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/onlinepercentagecalculator.co.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/onlinepercentagecalculator.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":6,"href":"https:\/\/onlinepercentagecalculator.co.uk\/blog\/wp-json\/wp\/v2\/posts\/13\/revisions"}],"predecessor-version":[{"id":537,"href":"https:\/\/onlinepercentagecalculator.co.uk\/blog\/wp-json\/wp\/v2\/posts\/13\/revisions\/537"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/onlinepercentagecalculator.co.uk\/blog\/wp-json\/wp\/v2\/media\/14"}],"wp:attachment":[{"href":"https:\/\/onlinepercentagecalculator.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=13"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/onlinepercentagecalculator.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=13"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/onlinepercentagecalculator.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}