PX to REM Converter
Convert pixel values to REM units (and back) with a configurable root font size.
How to use this tool
- 1Enter a pixel value in the PX field, or a REM value in the REM field.
- 2Adjust the root font size if your project uses a non-standard base (e.g. 10px for Tailwind's rem scale).
- 3The converted value updates instantly in the opposite field.
- 4Copy the REM value directly into your CSS or design token.
About PX to REM Converter
Hardcoding pixel values in CSS locks your layout to a fixed scale and breaks accessibility for users who increase their browser's base font size. REM units solve this: 1rem equals the root font size (html element), so if a user sets their browser to 20px, a 1.5rem element scales to 30px automatically. The formula is simple — rem = px ÷ rootFontSize — but doing it mentally for every value in a design file is tedious. This converter lets you enter any pixel value, set the root font size (default 16px, but Tailwind projects often use 10px for easier math), and get the REM equivalent instantly. It also converts in reverse: enter a REM value to get the pixel equivalent. Front-end developers use it when translating Figma designs to CSS, setting font-size and spacing tokens in a design system, or auditing existing stylesheets for accessibility compliance with WCAG 1.4.4.
Frequently asked questions
Related Tools
Color Converter
Enter a HEX color and instantly get the RGB, HSL, and component values side by side.
Length Converter
Convert between mm, cm, m, km, inches, feet, yards, and miles — all values shown at once.
Weight Converter
Convert between mg, g, kg, metric tons, oz, lb, and stone — all values shown at once.