PX to Percentage Calculator


Use this CSS unit converter tool to easily convert Pixels into percentages.


On this page, you’ll learn:

  • What is Pixel in CSS?
  • What is Percentage in CSS?
  • Pixel to Percentage Conversion Formula
  • How to Convert Pixels into Percentages?
  • Pixel to Percentage Conversion Table

What is PX to Percentage Converter?

PX to Percentage Converter is a CSS unit converter tool which lets you easily convert Pixel value to its equivalent value in percentages.

PX to Percentage Calculator

What is a Pixel in CSS?

Pixel is one of the most common length units used in CSS. In CSS, 1 Pixel is equivalent to 1/96 of an inch. It is denoted using the px symbol.

What is a Percentage in CSS?

Like Pixels, Percentage is also a length unit used to determine the size of an element. It is mostly used to define the size of an element relative to its parent size. It is denoted using the % symbol.

Pixel to Percentage Conversion Formula

The formula used to convert pixels to percentages is:

P = (PX / FS) * 100

  • P is the Percentage
  • PX is the value in Pixels
  • FS is the root font size of HTML (16px by Default)

How to Convert Pixels into Percentages?

To convert the pixels into percentages, first get the size in pixels. Next, determine the root HTML font size, if the root font size is not present, take 16px as the default root font size.

Now, divide the size in pixels by the root font size. Multiply the value obtained from the previous step with 100. This will give you the equivalent size in percentages.

Percentage = (Size in Pixels / Base Font Size) * 100

Example Problems on Pixel to Percentage

Example 1: Convert 20 PX into Percentage.

Step 1: Determine the Size in Pixels

Pixels = 20px

Step 2: Determine the Root Font Size

Here, the root font size is not given, therefore we will take the default root font size which is 16px.

Base = 16px

Step3: Use the Pixel to Percentage Conversion Formula

Percentage = (Pixel/Base) * 100 = (20/16) * 100 = 125%

Thus, 20 PX = 125%


Example 2: Convert 36 Pixels into Percentage.

Step 1: Determine the Size in Pixels

Size in Pixels = 36px

Step 2: Determine the HTML Root Font Size

Base = 16px [Default]

Step 3: Use the Pixel to Percentage Conversion Formula

Percentage = (Pixel/Base) * 100 = (36/16) * 100 = 225

Thus, 36px = 225%


Pixel to Percentage Conversion Table

Pixel (Px)Percentage (%)
1px6.25%
2px12.5%
3px18.75%
4px25%
6px37.5%
8px50%
10px62.5%
12px75%
14px87.5%
16px100%
18px18
20px125%
22px137.5%
24px150%
26px162.5%
28px175%
32px200%
36px225%
48px300%
64px400%
72px450%
96px600%
128px800%

Frequently Asked Questions on Pixel to Percentage

What is the Pixel to Percentage Conversion Formula?

Percentage(%) = (Pixel/Root Font Size) * 100

Convert 18 pixels into percentages?

Percentage = (18/16) * 100 = 112.5%


References:


Scroll to Top