16 px = 100 % at 16px base
Settings
Controls how many digits after the dot can be typed and shown in the live conversion result.
Conversion Table
Popular px to % conversions at your selected base font size.
| Pixels (px) | Percent (%) | ||
|---|---|---|---|
| 1 px | 6.25 % | ||
| 2 px | 12.5 % | ||
| 3 px | 18.75 % | ||
| 4 px | 25 % | ||
| 5 px | 31.25 % | ||
| 6 px | 37.5 % | ||
| 8 px | 50 % | ||
| 10 px | 62.5 % | ||
| 12 px | 75 % | ||
| 14 px | 87.5 % | ||
| 15 px | 93.75 % | ||
| 16 px | 100 % | ||
| 18 px | 112.5 % | ||
| 20 px | 125 % | ||
| 24 px | 150 % | ||
| 25 px | 156.25 % | ||
| 28 px | 175 % | ||
| 32 px | 200 % | ||
| 36 px | 225 % | ||
| 40 px | 250 % | ||
| 44 px | 275 % | ||
| 48 px | 300 % | ||
| 50 px | 312.5 % | ||
| 56 px | 350 % | ||
| 64 px | 400 % | ||
| 72 px | 450 % | ||
| 75 px | 468.75 % | ||
| 80 px | 500 % | ||
| 90 px | 562.5 % | ||
| 100 px | 625 % | ||
Shortcuts
Hot keys
PX to Percent Converter
Convert pixel values to CSS percent units. At a 16px root, 16px equals 100%. Use the base font size setting to match your project's root or parent context.
How to Convert PX to Percent
Divide the pixel value by the root (or parent) font size, then multiply by 100. Formula: % = (px / base) × 100. At 16px base: 16px = 100%, 8px = 50%, 24px = 150%.
Percent for Font Sizes
A font-size of 100% equals the inherited font size. Setting html { font-size: 62.5% } gives a 10px root, making rem math simpler: 1.6rem = 16px. Percent-based font sizes scale with the user's browser preferences, helping accessibility.
Percent vs REM
Both percent and rem respect user font size preferences. Percent on the root element lets you scale the entire layout with a single value. REM is more predictable for component-level sizing since it always references the root. Use percent at the html level, rem for components.
When to Use Percent
Use percent for fluid widths and layouts (width: 100%, max-width: 80%), for the html font-size trick to simplify rem math, and for inherited text sizing where you want to express size relative to the parent. Avoid percent for margins and paddings if you want root-relative control — use rem instead.
Common PX to Percent Values
At 16px base: 8px = 50%, 12px = 75%, 14px = 87.5%, 16px = 100%, 18px = 112.5%, 20px = 125%, 24px = 150%, 32px = 200%. The conversion table above shows a full list.