I had a spreadsheet once with a tab for every category I could think of — coffee, parking, “miscellaneous household,” a line item for my dog’s treats. It looked responsible. It lasted three weeks. Then a friend asked me over text, “hey can you actually afford to split that trip four ways,” and I realized I had no idea. I had thirty-one categories and zero answers. That’s usually the moment people give up on budgeting entirely and decide they’re just not a numbers person.

You’re not a numbers person. Nobody is, really, not without a shortcut. The shortcut I use — and the one I keep coming back to after years of testing more complicated systems — is the 50/30/20 rule: needs, wants, savings, three buckets, done. But even a three-bucket rule needs actual dollar amounts to mean anything, and doing that math in your head every time your pay changes gets old fast. So I built the calculator below. Type in what actually lands in your account, adjust the split if the standard one doesn’t fit your life, and get your three numbers in about five seconds.

That’s the whole point of this page. Not another explanation of the rule — I’ve already written that one, and I’ll point you to it — but the tool that turns the rule into three real dollar figures you can write on a sticky note tonight.

.pscalc-wrap,.pscalc-wrap *{box-sizing:border-box}
.pscalc-wrap{–ps-accent:#8b7355;–ps-wash:#f9f6f2;–ps-line:#e5e0d8;–ps-ink:#241f1a;–ps-ink2:#5c5147;–ps-good:#3f6b4f;–ps-bad:#9c4a3c;margin:2rem 0}
.pscalc{background:var(–ps-wash);border:1px solid var(–ps-line);border-radius:10px;padding:1.5rem;color:var(–ps-ink)}
.pscalc h3{margin:0 0 1.1rem;font-size:1.15rem;letter-spacing:-.01em}
.pscalc-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem}
.pscalc-f label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(–ps-ink2);margin-bottom:.3rem}
.pscalc-in{position:relative}
.pscalc-in span{position:absolute;top:50%;transform:translateY(-50%);color:var(–ps-ink2);font-size:.95rem;pointer-events:none}
.pscalc-in span.pre{left:.7rem}
.pscalc-in span.suf{right:.7rem}
.pscalc input{width:100%;padding:.6rem .7rem;border:1px solid var(–ps-line);border-radius:6px;font-size:1rem;background:#fff;color:var(–ps-ink)}
.pscalc input.haspre{padding-left:1.5rem}
.pscalc input.hassuf{padding-right:1.9rem}
.pscalc input:focus{outline:2px solid var(–ps-accent);outline-offset:1px;border-color:var(–ps-accent)}
.pscalc-note{font-size:.8rem;color:var(–ps-ink2);margin:.55rem 0 0;line-height:1.5}
.pscalc-out{margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(–ps-line)}
.pscalc-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem;margin-bottom:1rem}
.pscalc-tile{background:#fff;border:1px solid var(–ps-line);border-radius:8px;padding:.85rem .9rem}
.pscalc-tile .n{font-size:1.42rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.pscalc-tile .l{font-size:.75rem;color:var(–ps-ink2);margin-top:.3rem;line-height:1.35}
.pscalc-warn{background:#f9ece9;border-left:4px solid var(–ps-bad);border-radius:0 8px 8px 0;padding:.8rem 1rem;margin-top:.9rem}
.pscalc-warn p{margin:0;font-size:.88rem;line-height:1.55;color:#7a3a2e}
.pscalc-reset{background:none;border:1px solid var(–ps-line);color:var(–ps-ink2);border-radius:6px;padding:.4rem .8rem;font-size:.8rem;cursor:pointer;margin-top:.6rem}
@media(max-width:560px){.pscalc{padding:1.15rem}.pscalc-tile .n{font-size:1.25rem}}

50/30/20 Budget Calculator

$

%

%

%

Take-home pay means what actually lands in your bank account after taxes, not your salary before deductions. The default split is 50/30/20 — adjust the percentages if your situation calls for it.

(function(){
var ids=[“bIncome”,”bNeeds”,”bWants”,”bSavings”], out=document.getElementById(“bOut”);
if(!out) return;
function money(n){return “$”+Math.round(n).toLocaleString(“en-US”);}
document.getElementById(“bReset”).addEventListener(“click”, function(){
document.getElementById(“bNeeds”).value=50;
document.getElementById(“bWants”).value=30;
document.getElementById(“bSavings”).value=20;
render();
});
function render(){
var income=parseFloat(document.getElementById(“bIncome”).value)||0,
needsPct=parseFloat(document.getElementById(“bNeeds”).value)||0,
wantsPct=parseFloat(document.getElementById(“bWants”).value)||0,
savingsPct=parseFloat(document.getElementById(“bSavings”).value)||0;
if(income<=0){ out.innerHTML='

Enter your monthly take-home pay above to see your split.

‘; return; }
var total=needsPct+wantsPct+savingsPct;
var html=’

‘+
‘

‘+money(income*needsPct/100)+’
Needs — rent, groceries, utilities, minimum debt payments

‘+
‘

‘+money(income*wantsPct/100)+’
Wants — dining out, entertainment, subscriptions

‘+
‘

‘+money(income*savingsPct/100)+’
Savings & extra debt payoff

‘+
‘

‘;
if(Math.round(total)!==100){
html+=’

Your percentages add up to ‘+total+’%, not 100% — the amounts above are still calculated from what you entered, so feel free to leave it that way if it fits your life.

‘;
}
out.innerHTML=html;
}
for(var i=0;i<ids.length;i++){
var el=document.getElementById(ids[i]);
if(el){ el.addEventListener("input",render); el.addEventListener("change",render); }
}
render();
})();