Convert between annual salary and hourly rate instantly. Enter your salary, work hours, and tax rate to see a complete breakdown across every time period. Includes benefits value calculation and an overtime pay estimator for hourly workers.
Build Prompt
Copy this prompt into Claude Code
Build a single-page salary to hourly rate calculator as a static HTML/CSS/JS site. The page background should be #0f0f17 with a centered card (max-width 860px) using #12121a background, 1px solid #2a2a3a border, and 16px border-radius.
At the top, display "Salary to Hourly Calculator" as a heading in white and a subtitle "Convert your salary to see what you really earn per hour" in #8888a0. Add a bidirectional toggle switch at the top right that lets users switch between "Salary to Hourly" and "Hourly to Salary" modes — the entire calculator should reconfigure based on the selected direction.
Create an input section with fields in a responsive 2-column grid: Annual Salary or Hourly Rate (currency input with $ prefix, default $65,000 for salary mode or $31.25 for hourly mode), Hours Per Week (number input, default 40, range 1-80), Weeks Per Year (number input, default 52, with a note showing common values: 50 for 2 weeks vacation, 48 for 4 weeks), Estimated Benefits Value (currency input, default $0, with a help tooltip explaining to include health insurance, 401k match, etc.), and Effective Tax Rate (percentage input with % suffix, default 25%, range 0-50%). Style inputs with #1a1a2a background, #2a2a3a border, white text, and #3b82f6 focus ring.
Below the inputs, display a results section with six cards in a 3x2 grid showing all time period conversions: Hourly Rate (largest, #3b82f6, bold), Daily Rate, Weekly Pay, Bi-Weekly Pay, Monthly Pay, and Annual Salary. Each card has a #16161e background with a subtle left border accent in #3b82f6. Show both pre-tax and after-tax amounts on each card (after-tax in #22c55e below the main value). If benefits value is entered, show a "Total Compensation" line that adds benefits to each period.
Below the results grid, add a horizontal bar chart using HTML5 Canvas that visually compares: Gross Pay, Taxes, Benefits Value, and Take-Home Pay as stacked segments. Use colors: #3b82f6 for gross, #ef4444 for taxes, #22c55e for benefits, and #a855f7 for take-home. Add labels inside or beside each segment.
Add an "Overtime Calculator" expandable section below the chart. When expanded, show inputs for: Regular Hours Per Week (default 40), Overtime Hours Per Week (number input), and Overtime Multiplier (dropdown: 1.5x Time and a Half, 2x Double Time, default 1.5x). Display the overtime pay per hour, total weekly overtime pay, and how it changes the annual total. Highlight the difference in #22c55e.
Add a "Quick Compare" section at the bottom with three preset salary inputs where users can type in different salary amounts and see the hourly rates side by side in a compact table for quick comparison during job negotiations.
Make all calculations update in real-time. The layout should be fully responsive — single column on mobile, horizontal scroll for the comparison table.
Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].
Make It Yours
Cost of Living Adjustment
Add a city selector that adjusts the effective salary using cost of living indices so users can compare offers in different cities.
Tax Bracket Breakdown
Replace the flat tax rate with US federal tax brackets for a more accurate take-home calculation with marginal rate display.
Raise Calculator
Add a percentage raise input that shows the before/after comparison and the dollar difference at every time period.
Savings Potential
Show how much users could save per month if they invested the difference between their pay and expenses at 7% annual return.
Currency Selector
Let users choose their currency (USD, EUR, GBP, CAD, AUD) with appropriate formatting and symbols throughout.
Print Summary
Add a print button that generates a clean one-page summary of all conversions, suitable for sharing with HR or a recruiter.
SEO Tips
Target "salary to hourly calculator" and "hourly to salary converter" as primary keywords — combined 150K+ monthly searches with low competition.
Add a FAQ section answering "How do I convert my salary to an hourly rate?" and "What is a good hourly rate?" to capture featured snippets.
Create related pages for specific salary ranges: "$50K salary to hourly," "$75K salary to hourly" — these long-tail queries have high volume.
Include a salary comparison table for common professions (nurse, teacher, engineer, etc.) to attract organic traffic from job seekers.
Add schema markup for SoftwareApplication type and FAQPage for structured data advantages in search results.
Monetization Ideas
Place job board affiliate links (Indeed, LinkedIn, ZipRecruiter) with a "Find Jobs at This Salary" CTA — job affiliates pay $0.50-2.00 per click.
Offer a "Salary Negotiation Guide" PDF download for $4.99 with scripts and strategies for asking for a raise.
Add non-intrusive ads from Google AdSense in the finance/career vertical — these pages have high CPC rates ($3-8).
Create a premium "Offer Comparison" tool for $2.99 that lets users compare multiple job offers including benefits, commute cost, and quality of life.
Partner with resume-building services (Resume.io, Zety) and place an affiliate CTA: "Ready to land that salary? Build your resume" — pays $5-15 per conversion.