PX and REM Converter
Batch-convert CSS px and rem dimensions in either direction with a custom root font size and 0–8 decimal places. Preserve strings, comments and URLs. A separate JSON calculator converts one numeric value.
About this px and rem converter
Batch-convert CSS px and rem dimensions in either direction with a custom root font size and 0–8 decimal places. Preserve strings, comments and URLs. A separate JSON calculator converts one numeric value Processes media assets directly in the browser using HTML5 Canvas and WebAssembly decoders, ensuring zero file uploads.
Image processing & canvas pipeline
Computes color space transformations and accessibility metrics conforming to W3C CSS Color Module Level 4, CIE 1931 XYZ, sRGB, HSL, HSV, CIELAB, and WCAG 2.1 contrast guidelines. Contrast ratios calculate relative luminance ($L = 0.2126R + 0.7152G + 0.0722B$) with gamma expansion, enforcing minimum ratios of 4.5:1 for standard text (Level AA) and 7:1 for enhanced text (Level AAA). Color blindness simulations evaluate 3x3 spectral transformation matrices for Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.
Worked image transformation example
Scenario: Convert one px value to rem.
Sample input:
Processing: Divide 24 by the positive root size 16 and round to at most four decimal places.
Illustrative output:
Resolution, dimension & memory limits
Operational constraints and validation boundaries: Input and output must each be less than 5,000,000 UTF-8 bytes. Numeric px/rem dimensions are replaced throughout the text, including calc(), media queries and custom-property values. Strings, comments, url() bodies, identifiers and hashes are preserved. Escaped unit names are not converted. No CSS validation, computed styles, EM conversion, context-aware root sizes, accessibility guarantee or download. Review selector and custom-property meaning yourself. The separate JSON calculator keeps four-decimal rounding.
PX and REM Converter image operations execute in client memory via HTML5 Canvas and browser decoders. Inspect output previews before replacing source assets.
In-memory image processing boundary
File buffers and document assets in PX and REM Converter are processed in-memory via local browser APIs with zero file uploads to CZOA servers.
Image format & W3C Canvas standards
W3C Canvas 2D context specifications and standard image container formats:
- CSS Values and Units Module Level 4 (px/rem)
PX and REM Converter verification · Audit standards
How to use it
- Enter, paste, or select your input data into the PX and REM Converter workspace controls.
- Single-value JSON calculator: Enter a value, positive root size, and conversion direction.
Frequently asked questions
How does the px/rem converter calculate its value?+
Paste CSS, choose px → rem or rem → px, set a positive root size and 0–8 decimal places, then convert. Example: .card { padding: 24px 8px; } at root 16 becomes .card { padding: 1.5rem 0.5rem; }. Trailing zeros are removed.
Which controls are available?+
Boundary constraints concerning "Which controls are available?" prevent invalid parameter state mutations client-side.
Which limits matter?+
Input and output must each be less than 5,000,000 UTF-8 bytes.
What result should the documented example produce?+
For 24 pixels with a 16-pixel root size in px-to-rem mode, expect the output string 1.5.