Image, Pixel and CSS Calculators

Calculator Categories

How to Use These Calculators

1. Browse the categories above or use the search bar on this page to find a specific calculator by name or keyword.
2. Click any calculator card to open its dedicated page with input fields and instant results.
3. Enter your values in the input fields. Results update automatically as you type, with no submit button required.
4. Copy the result to your clipboard using the copy button, or paste it directly into your CSS, design tool, or documentation.
5. Use the category filter buttons to narrow down to a specific group of calculators if you know which category you need.

Practical Examples

Why Use These Calculators

• Instant results with no page reloads or submit buttons, updated as you type
• 140+ tools across 6 categories covering the most common design and development math
• All calculations run client-side in your browser, so your data never leaves your device
• No account, no installation, no watermarks, no usage limits
• Mobile-responsive interfaces that work on phones, tablets, and desktops
• Direct integration with the image tools on the site, so you can calculate dimensions and then process images in the same workflow
• Several calculators directly support WCAG 2.2 accessibility compliance work

Tips for Getting the Most Out of These Calculators

• Bookmark individual calculator pages if you use them daily. Each calculator has its own URL that you can save or share with your team.
• Use REM instead of PX for font sizes in your CSS. The PX to REM converter makes this conversion trivial, and it ensures your typography scales with user browser font size preferences.
• When checking contrast ratios, test your actual rendered colors, not your design tool colors. CSS color rendering can differ slightly from Figma or Sketch exports due to color profile differences.
• For viewport unit calculations, remember that mobile browsers handle 100vh differently than desktop browsers. Use dvh (dynamic viewport height) instead of vh for full-screen mobile layouts to avoid content being hidden behind browser chrome.
• When calculating PPI, measure your screen diagonal physically rather than relying on the manufacturer specification. Listed sizes often include bezel, which can throw off the calculation by 1 to 2 percent.
• Use the search bar on this page to find calculators by keyword. Searching "rem" will surface all rem-related converters, the font size converter, and the modular scale generator.

Related Image Tools

These calculators pair well with the image processing tools on this site. After calculating the right dimensions, pixel density, or color values, use these tools to actually process your images:

References and Further Reading

• WCAG 2.2 Official Recommendation - W3C accessibility guidelines covering contrast ratios, target sizes, and focus indicators
• MDN: CSS Values and Units - Reference for px, rem, em, vw, vh, and all other CSS length units
• MDN: Container Queries - Documentation on container query units (cqw, cqh, cqi) for component-level responsive design
• web.dev: Viewport Units Guide - Google's guidance on using vw, vh, dvh, svh, and lvh units for responsive layouts