Quick & easy-to-use percentage (%) to pixel (px) converter tool for web designers.
Width = 50%
Loved the tool? Add to your bookmarks (press Ctrl/Cmd + D)
The user interface of our tool is pretty self explanatory, you just have to enter the % value in the percentage input box and the tool will do the conversion automatically as you type the value and display the converted px value in the pixels box.
The tool is also designed to do reverse pixel to percent conversions. So, you can also enter or edit the px value in the pixels box and the tool will display the converted % value in the percentage box.
One other cool feature of our tool is, below the tool there is a blue coloured box which shows the live percentage width preview of the value you convert using our tool. This would help you to visualize your design, ultimately, saving you some time.
As per base (parent element size) - 1200px.
| Pixels | Percentage |
| 1% | 12px |
| 2% | 24px |
| 3% | 36px |
| 4% | 48px |
| 5% | 60px |
| 6% | 72px |
| 7% | 84px |
| 8% | 96px |
| 9% | 108px |
| 10% | 120px |
| 11% | 132px |
| 12% | 144px |
| 13% | 156px |
| 14% | 168px |
| 15% | 180px |
| 16% | 192px |
| 17% | 204px |
| 18% | 216px |
| 19% | 228px |
| 20% | 240px |
| 21% | 252px |
| 22% | 264px |
| Pixels | Percentage |
| 23% | 276px |
| 24% | 288px |
| 25% | 300px |
| 30% | 360px |
| 35% | 420px |
| 40% | 480px |
| 45% | 540px |
| 50% | 600px |
| 55% | 660px |
| 60% | 720px |
| 65% | 780px |
| 70% | 840px |
| 75% | 900px |
| 80% | 960px |
| 85% | 1020px |
| 90% | 1080px |
| 95% | 1140px |
| 100% | 1200px |
| 110% | 1320px |
| 120% | 1440px |
| 150% | 1800px |
| 200% | 2400px |
To do conversions for other %, px or base values use the tool above.
As mentioned earlier, the percentage unit in CSS is relative to the size of the parent element. So, to calculate percentage to pixels you just have to multiply the percentage value you want to convert to the corresponding size of the parent element and divide it by 100.
Formula to convert percentage to pixel:
Pixel (px) = Percentage (%) x Size of the parent element (in px) ÷ 100
Let's take an example for better understanding. Let's say you want to convert 1% to pixel, given the corresponding size of the parent element is 1200px. Then to calculate pixels, just multiply 1 with 1200 and divide it by 100, and the answer comes to 12px. Hence, 1% is equal to 12px.
So, calculating pixels from percentage is a piece of cake. But doing this calculation manually can be tiring, which is why we have created this tool to simplify the task of converting percentages to pixels for you, so that you can focus on web designing.