Percentage・PX Calculator
Convert percentages and pixels from a parent size
Editing either value updates the other
(50 ÷ 100) × 1000px = 500px
Common Values
Parent size 1000px
- 5%
- 50px
- 10%
- 100px
- 15%
- 150px
- 20%
- 200px
- 25%
- 250px
- 33.33%
- 333.3px
- 50%
- 500px
- 66.67%
- 666.7px
- 75%
- 750px
- 80%
- 800px
- 90%
- 900px
- 100%
- 1000px
What is Percentage・PX Calculator?
Percentage・PX Calculator converts percentages and pixels based on a parent size. You can see what 50% is in pixels and what 320px is as a percentage on the same screen.
Use it when moving between relative and fixed sizes in CSS width and height, or when converting pixel values from a design file into percentages.
How to Use
- Enter the parent size or pick one of the common sizes.
- Enter a value in either Percentage or PX Value.
- Check the other value and the formula.
Changing the parent size recalculates the value you edited last into the other unit.
Main Settings
Parent Size
The size used as the base for conversion. Enter the container width or the width of the block you want to use as a reference.
Percentage and PX Value
Editing either value updates the other. With a parent size of 1000px, entering 50% shows 500px.
Use Cases
- Replacing pixel values from a design file with CSS percentages
- Checking what a percentage means in real pixels
- Turning a fixed width into a relative width
Last updated:
