More in Forge (4)
Forge · Design tokens
PX to REM & Color Converter
Drop in a value — get every usable form. Unit math for spacing scales, color format round-trips for palette work. Nothing leaves the page.
px16px
rem1rem
em1em
pt12pt
%100%
How to use PX to REM & Color Converter
- Pick a tab: Units or Color formats.
- On Units, enter a number in Value (px). Change Root font size (px) if your site's base size isn't 16.
- On Color formats, paste a hex code, an rgb() or hsl() value, or a basic color name like orange.
- Read the result cards. They update as you type. Click Copy on the one you need.
01 · Real-world fits
Common use cases
- Turning a 24px heading from a Figma file into 1.5rem for your stylesheet
- Building a spacing scale for a site that sets html { font-size: 62.5% }, by changing the root size to 10
- Converting web pixel sizes to points for a print stylesheet or a PDF export
- Getting the HSL version of a brand hex so you can make a lighter tint by raising the lightness
- Turning an rgb() value copied from browser dev tools into a hex code for a design token file
- Copying a lowercase hex to match a codebase whose linter rejects uppercase colors
02 · The honest pitch
Why PX to REM & Color Converter?
One input gives you every form at once: px, rem, em, pt, and %, or uppercase HEX, lowercase HEX, RGB, and HSL. There is no convert button, so you can tweak a value and watch every card change. The color tab shows a swatch with a label that switches between black and white to stay readable. The math runs in your browser and nothing is saved.
03 · Edge cases