Skip to content

Conversor de PX a REM — Píxeles a rem, en vivo y privado

Convierte px a rem al instante con un tamaño de fuente raíz ajustable. 16px = 1rem por defecto. Bidireccional, listo para copiar, 100% en tu navegador.

Sin rastreo Se ejecuta en el navegador Gratis
px
Vista previa

El veloz murciélago hindú

Revisado para garantizar la precisión de la unidad rem de CSS y la orientación sobre accesibilidad — Equipo de Ingeniería de Go Tools · Jun 11, 2026

Referencia rápida

¿Cuánto es 16px en rem?

16px = 1rem (con base de 16px) Con el tamaño de fuente raíz por defecto del navegador de 16px, 16px equivale exactamente a 1rem. Este es el ancla para cualquier otra conversión: rem = px ÷ 16.

¿Cuál es la fórmula de px a rem?

rem = px ÷ tamaño-de-fuente-raíz Divide el valor en píxeles entre el tamaño de fuente raíz. Por ejemplo, 24px ÷ 16 = 1.5rem. Cambia la base en la herramienta si tu proyecto no usa 16px.

¿Qué es el truco del 62.5%?

62.5% → 1rem = 10px Establecer html { font-size: 62.5% } hace que la raíz sea 10px, así que 1rem = 10px y las cuentas de rem son solo «dividir entre 10». Establece la base de esta herramienta en 10 para usarlo.

¿Qué es un conversor de PX a REM?

Un conversor de px a rem traduce medidas en píxeles a unidades rem para CSS. La unidad rem («root em») es relativa al font-size del elemento raíz : 1rem siempre equivale al tamaño de fuente raíz, que los navegadores establecen en 16px por defecto. La conversión es una simple división (rem = px ÷ tamaño-de-fuente-raíz), pero hacerla a mano para cada tamaño de fuente, margen y breakpoint de una hoja de estilos es tedioso y propenso a errores, que es justo lo que esta herramienta elimina.

La razón para convertir es la accesibilidad y la escalabilidad. Cuando un valor se escribe en px, queda bloqueado en un tamaño fijo e ignora la preferencia de tamaño de fuente del navegador del usuario. Cuando se escribe en rem, se escala proporcionalmente si el usuario aumenta su tamaño de fuente predeterminado, una adaptación crítica para las personas con baja visión y una experiencia más fluida para cualquiera que haga zoom. Expresar un sistema de diseño en rem también significa que un único cambio en el tamaño de fuente raíz reescala toda la interfaz de forma coherente.

Este conversor mantiene los campos de píxeles y rem enlazados en tiempo real, así puedes moverte en cualquier dirección y, a diferencia de las herramientas que fijan una base de 16px de forma rígida, te permite establecer cualquier tamaño de fuente raíz. Eso importa porque una hoja de estilos que usa la técnica del 62.5% (raíz de 10px) convierte de forma distinta a una configuración por defecto de 16px. Una vista previa en vivo muestra el tamaño de texto resultante, y una tabla de referencia lista los valores en px más comunes con una base de 16px para consultas rápidas.

¿Necesitas la dirección inversa? Usa el conversor de rem a px. Para ordenar la propia hoja de estilos, prueba el formateador de CSS, y para trabajar con colores consulta el conversor de color. Todo se ejecuta en tu navegador: tus valores nunca salen de tu dispositivo.

/* The core formula */
/* rem = px ÷ root-font-size (16px by default) */

:root {
  font-size: 16px; /* 1rem = 16px */
}

.title  { font-size: 1.5rem;  } /* 24px */
.body   { font-size: 1rem;    } /* 16px */
.caption{ font-size: 0.75rem; } /* 12px */
.card   { padding: 1.5rem;    } /* 24px */

/* JavaScript equivalent */
const pxToRem = (px, base = 16) => px / base;
console.log(pxToRem(24)); // 1.5
console.log(pxToRem(12)); // 0.75

Características clave de este conversor de PX a REM

Tamaño de fuente raíz personalizado

Convierte según cualquier base, no solo 16px. Coincide con la técnica del 62.5% (10px) o con el tamaño de fuente raíz real de tu proyecto; la mayoría de las herramientas fijan 16 de forma rígida.

Conversión bidireccional en vivo

Los campos de píxeles y rem permanecen enlazados en tiempo real. Edita cualquiera de los dos lados y el otro se actualiza al instante según la base que elijas.

Vista previa de tamaño integrada

Una línea de vista previa renderiza el texto al tamaño rem resultante para que veas la escala, no solo el número.

Copia con un clic

Copia el valor en px o rem al portapapeles con un solo clic, listo para pegarlo directamente en tu CSS.

Tabla de conversión de referencia

Una tabla de los valores en px más comunes y sus equivalentes en rem con una base de 16px para consultas rápidas sin necesidad de escribir.

100% en el navegador y privado

Todas las cuentas ocurren localmente en tu navegador. Sin peticiones al servidor, sin seguimiento, sin almacenamiento de datos: tus valores nunca salen de tu dispositivo.

Ejemplos de conversión de PX a REM

Texto del cuerpo — 16px a rem

16
1rem

Con el tamaño de fuente raíz por defecto de 16px, 16px equivale exactamente a 1rem. Esta es la referencia con la que se mide cualquier otra conversión: rem = px ÷ 16.

Encabezado — 24px a rem

24
1.5rem

Un encabezado de 24px se convierte en 1.5rem (24 ÷ 16 = 1.5). Usar rem significa que el encabezado se escala automáticamente si el usuario cambia el tamaño de fuente predeterminado de su navegador.

Etiqueta pequeña — 12px a rem

12
0.75rem

12px son 0.75rem con una base de 16px. La letra pequeña y los pies de foto son candidatos habituales para rem, así respetan las preferencias de tamaño de fuente del lector.

Espaciado — 8px a rem

8
0.5rem

8px equivalen a 0.5rem. Muchos sistemas de diseño expresan el padding y los márgenes en rem para que el espaciado se escale junto con el texto.

Truco del 62.5% — base de 10px, 18px a rem

18
1.125rem

Si estableces el tamaño de fuente raíz en 10px (la técnica del 62.5%), 18px se convierte en 1.8rem. Con la base por defecto de 16px, 18px son 1.125rem. Convierte siempre según la base que tu proyecto realmente utiliza.

Breakpoint — 768px a rem

768
48rem

Un breakpoint de media query de 768px son 48rem con una base de 16px. Los breakpoints basados en rem hacen zoom de forma más predecible cuando los usuarios escalan su texto.

Cómo convertir valores comunes de px a rem

Referencia rápida de los valores en px que los desarrolladores convierten a rem con más frecuencia, con el tamaño de fuente raíz por defecto de 16px.

Cómo convertir 16px a rem

16 px → 1 rem

Divide 16 entre el tamaño de fuente raíz de 16px para obtener 1rem. 16px es el valor ancla: equivale exactamente a 1rem en una configuración por defecto, por lo que es el punto de referencia para todas las demás conversiones.

16 px → 1 rem

Memoriza 16px = 1rem. A partir de ahí, divide a la mitad para 0.5rem (8px) y duplica para 2rem (32px).

Pruébalo arriba: introduce tu valor en píxeles y obtén el rem al instante.

Cómo convertir 24px a rem

24 px → 1.5 rem

Divide 24 entre 16 para obtener 1.5rem. 24px es un tamaño común para encabezados y botones grandes, así que 1.5rem aparece con frecuencia en los sistemas de diseño.

24 px → 1.5 rem

24px es exactamente 1.5× la base, por lo que se mapea limpiamente a 1.5rem, un valor ordenado para encabezados.

Pruébalo arriba: introduce tu valor en píxeles y obtén el rem al instante.

Cómo convertir 12px a rem

12 px → 0.75 rem

Divide 12 entre 16 para obtener 0.75rem. 12px es un tamaño común para pies de foto, etiquetas y letra pequeña que aún debería respetar las preferencias de tamaño de fuente del usuario.

12 px → 0.75 rem

12px = 0.75rem (tres cuartos de la base). Útil para texto secundario.

Pruébalo arriba: introduce tu valor en píxeles y obtén el rem al instante.

Cómo convertir 14px a rem

14 px → 0.875 rem

Divide 14 entre 16 para obtener 0.875rem. 14px es un tamaño de texto de cuerpo y de interfaz muy común, así que 0.875rem aparece constantemente en las bibliotecas de componentes.

14 px → 0.875 rem

14px = 0.875rem. Es el tamaño de texto por defecto en muchos frameworks de interfaz.

Pruébalo arriba: introduce tu valor en píxeles y obtén el rem al instante.

Cómo convertir 32px a rem

32 px → 2 rem

Divide 32 entre 16 para obtener 2rem. 32px es un valor frecuente para encabezados grandes y espaciado de secciones, que se mapea a un limpio 2rem.

32 px → 2 rem

32px = 2rem, exactamente el doble de la base; fácil de recordar para encabezados grandes y espaciado generoso.

Pruébalo arriba: introduce tu valor en píxeles y obtén el rem al instante.

Cómo convertir 10px a rem

10 px → 0.625 rem

Divide 10 entre 16 para obtener 0.625rem con la base por defecto. Ten en cuenta que 10px es también el tamaño de fuente raíz que usa la técnica del 62.5%, donde 10px equivaldría en cambio a 1rem.

10 px → 0.625 rem

Con una base de 16px, 10px = 0.625rem. Si adoptas la técnica del 62.5%, establece la base en 10 y 10px se convierte en 1rem.

Pruébalo arriba: introduce tu valor en píxeles y obtén el rem al instante.

Tabla de conversión de PX a REM

Valores de px a rem precalculados con el tamaño de fuente raíz por defecto de 16px. Guarda esta página en marcadores para consultas rápidas.

Píxeles a rem (base de 16px)

Tabla de conversión de píxeles a rem con un tamaño de fuente raíz de 16px
PX REM
8 0.5
9 0.5625
10 0.625
11 0.6875
12 0.75
13 0.8125
14 0.875
15 0.9375
16 1
17 1.0625
18 1.125
19 1.1875
20 1.25
21 1.3125
22 1.375
23 1.4375
24 1.5
28 1.75
32 2
36 2.25
40 2.5
44 2.75
48 3

Tamaños comunes a rem

Valores en píxeles más grandes a rem con un tamaño de fuente raíz de 16px
PX REM
56 3.5
64 4
72 4.5
80 5
88 5.5
96 6

Cómo usar el conversor de PX a REM

  1. 1

    Introduce un valor en píxeles

    Escribe o pega un número en el campo Píxeles (px). El rem equivalente aparece al instante, sin necesidad de un botón de conversión.

  2. 2

    Establece el tamaño de fuente raíz (opcional)

    La base es 16px por defecto. Cámbiala para que coincida con tu proyecto (por ejemplo 10px para la técnica del 62.5%) y cada resultado se actualiza según la nueva base.

  3. 3

    Lee el resultado en rem y la vista previa

    El campo Rem muestra el valor convertido, la línea de vista previa renderiza el texto a ese tamaño y la fórmula confirma la proporción actual (p. ej. 1rem = 16px).

  4. 4

    Copia el valor

    Haz clic en el icono de copiar junto a cualquiera de los campos para copiar el valor en px o rem al portapapeles, listo para pegarlo en tu CSS.

Casos de uso de la conversión de PX a REM

Crear interfaces adaptables y accesibles
Convierte tamaños de fuente y espaciado basados en píxeles a rem para que la interfaz se escale con la preferencia de tamaño de fuente del navegador del usuario.
Traducir mockups de diseño
Convierte los valores en px de un diseñador desde Figma o Sketch en unidades rem que encajen en un sistema de diseño CSS escalable.
Establecer breakpoints de media query
Expresa los breakpoints en rem para que los diseños respondan de forma predecible cuando los usuarios hacen zoom o cambian el tamaño de texto predeterminado.
Adoptar la técnica del 62.5%
Convierte según un tamaño de fuente raíz de 10px para obtener una aritmética de rem limpia al usar html { font-size: 62.5% }.
Refactorizar CSS heredado
Sustituye sistemáticamente los valores fijos en px por rem para modernizar una hoja de estilos antigua y mejorar la accesibilidad.
Verificar tamaños calculados
Comprueba rápidamente a qué equivale un valor en px expresado en rem (o a la inversa) mientras depuras el espaciado y la tipografía.

Detalles técnicos

La unidad rem
rem es relativa al font-size del elemento raíz . 1rem equivale a ese font-size en píxeles (16px por defecto), por lo que rem = px ÷ tamaño-de-fuente-raíz.
Aritmética de doble precisión
Las conversiones usan coma flotante de doble precisión IEEE 754, redondeada a un máximo de cinco decimales con los ceros finales eliminados para obtener valores CSS limpios.
Procesamiento del lado del cliente
Toda la lógica de conversión se ejecuta en JavaScript dentro de tu navegador. No se realiza ninguna llamada de red: la herramienta funciona por completo sin conexión una vez cargada.

Buenas prácticas para usar rem

Convierte según tu base real
Usa siempre el tamaño de fuente raíz que tu hoja de estilos realmente establece. Una base de 10px (técnica del 62.5%) convierte de forma distinta a la base por defecto de 16px.
Usa rem para tipografía y espaciado, px para líneas finas
Dimensiona fuentes, padding y márgenes en rem para que se escalen con las preferencias del usuario; mantén px para cosas que deben permanecer fijas, como los bordes de 1px.
Mantén los breakpoints en rem o em
Las media queries basadas en rem hacen zoom de forma más elegante que los breakpoints en px cuando los usuarios escalan su texto.

Preguntas frecuentes sobre PX a REM

¿Cuánto es 16px en rem?
16px equivalen exactamente a 1rem cuando el tamaño de fuente raíz es el valor por defecto del navegador de 16px. La unidad rem es relativa al font-size del elemento raíz , por lo que rem = px ÷ tamaño-de-fuente-raíz. Como la mayoría de los navegadores usan 16px por defecto, 16px es el ancla natural: 16px = 1rem, 8px = 0.5rem, 32px = 2rem. Si cambias el tamaño de fuente raíz, la proporción cambia en consecuencia.
¿Cómo se convierte px a rem?
Divide el valor en píxeles entre el tamaño de fuente raíz. La fórmula es rem = px ÷ base, donde base es el font-size del elemento (16px por defecto). Por ejemplo, 24px ÷ 16 = 1.5rem, y 12px ÷ 16 = 0.75rem. Esta herramienta hace la división por ti en tiempo real y te permite cambiar la base si tu proyecto usa un tamaño de fuente raíz diferente.
¿Cuánto es 1rem en píxeles?
1rem equivale al tamaño de fuente raíz en píxeles: 16px por defecto. Así que 1rem = 16px, 1.5rem = 24px y 2rem = 32px en una configuración estándar. Si estableces html { font-size: 62.5% } (10px), entonces 1rem = 10px. Para pasar de rem a píxeles, multiplica: px = rem × base.
¿Por qué usar rem en lugar de px?
Las unidades rem respetan la preferencia de tamaño de fuente del navegador del usuario, lo cual es esencial para la accesibilidad. Cuando alguien aumenta su tamaño de fuente predeterminado (por baja visión o simplemente por comodidad), todo lo dimensionado en rem se escala proporcionalmente, mientras que los valores en px permanecen fijos y pueden romper diseños o ignorar la preferencia. Rem también mantiene un sistema de diseño coherente: cambia un único tamaño de fuente raíz y toda la interfaz se escala junta. Los píxeles siguen siendo útiles para cosas que no deberían escalarse, como los bordes de 1px.
¿Cuál es la diferencia entre px, rem y em?
px es una unidad absoluta: un píxel CSS, fijo independientemente del contexto. rem es relativa al font-size del elemento raíz (), por lo que es coherente en toda la página. em es relativa al font-size del elemento padre actual, por lo que se acumula al anidarse. Usa px para detalles fijos como los bordes finos, rem para la mayoría del dimensionado para que se escale con la preferencia del usuario, y em cuando quieras que un valor se escale en relación con su contexto local (por ejemplo, un padding que crece con el propio font-size de un botón).
¿Qué es el truco del tamaño de fuente del 62.5%?
Establecer html { font-size: 62.5% } hace que el tamaño de fuente raíz sea 10px (porque el 62.5% del valor por defecto de 16px es 10px). Con una base de 10px, las cuentas de rem se vuelven triviales: 1rem = 10px, 1.6rem = 16px, 2.4rem = 24px; basta con dividir el valor en píxeles entre 10. A muchos desarrolladores les gusta la aritmética más simple, aunque luego normalmente estableces body { font-size: 1.6rem } para restaurar un texto de cuerpo legible de 16px. Establece el tamaño de fuente raíz de esta herramienta en 10 para convertir según la base del 62.5%.
¿Puedo cambiar el tamaño de fuente raíz en este conversor?
Sí. El campo Tamaño de fuente raíz tiene 16px por defecto (el valor del navegador), pero puedes escribir cualquier valor: 10, 18, 20 o el que use tu proyecto. Cada conversión y la tabla de referencia se actualizan según la base que establezcas. Haz clic en «Restablecer a 16» para volver al valor por defecto. La mayoría de las herramientas fijan 16px de forma rígida; la base personalizada es lo que permite que este conversor coincida con tu hoja de estilos real.
¿16px siempre equivale a 1rem?
Solo cuando el tamaño de fuente raíz es 16px, que es el valor por defecto en prácticamente todos los navegadores. La relación 16px = 1rem se mantiene siempre que no sobrescribas html { font-size }. Si una hoja de estilos establece el tamaño de fuente raíz en otro valor (por ejemplo 10px o 18px), entonces 16px ya no equivale a 1rem. Convierte siempre según el tamaño de fuente raíz real de la página.
¿Debería convertir tamaños de fuente, padding y márgenes a rem?
Los tamaños de fuente son los candidatos más sólidos para rem porque afectan directamente a la legibilidad y la accesibilidad. El padding, el margin, el gap y el border-radius también se expresan habitualmente en rem para que el espaciado se escale junto con el texto y se logre un diseño cohesionado. Los breakpoints de media query en rem (o em) hacen zoom de forma más elegante. Mantén px para cosas que no deben escalarse, como los bordes de 1px y algunos desplazamientos de box-shadow.
¿Convertir px a rem cambia el aspecto de mi sitio?
No: con el tamaño de fuente raíz por defecto de 16px, un valor en rem se renderiza exactamente al mismo tamaño en píxeles que el valor px original. 24px y 1.5rem se ven idénticos en una configuración estándar. La diferencia es de comportamiento: la versión en rem se escalará si el usuario cambia el tamaño de fuente de su navegador, mientras que la versión en px no lo hará. Visualmente no cambia nada hasta que el usuario ajusta sus preferencias.
¿Qué precisión tiene este conversor de px a rem?
Las conversiones usan aritmética de doble precisión IEEE 754 y la fórmula exacta rem = px ÷ base, con resultados redondeados a un máximo de cinco decimales y los ceros finales eliminados para mayor legibilidad. Para CSS, esa precisión es mucho más fina de lo que el navegador necesita. Las cuentas son deterministas y se ejecutan igual cada vez, así que puedes confiar en ellas para hojas de estilos de producción.
¿Están seguros mis datos al usar este conversor?
Por completo. Todas las conversiones se ejecutan localmente en tu navegador usando JavaScript. No se envía ningún valor a ningún servidor: no hay peticiones de red, no hay cookies sobre lo que introduces y no hay analítica vinculada a lo que escribes. Puedes comprobarlo desconectándote de internet: la herramienta sigue funcionando por completo sin conexión una vez que la página se ha cargado.

Herramientas relacionadas

Ver todas las herramientas →

Conversor de Bases — Binario, Hex, Decimal, Octal

Herramientas de Conversión

Convierte números entre binario, hexadecimal, decimal, octal y cualquier base personalizada (2-36) al instante. Gratis, privado, sin registro — todo el procesamiento ocurre en tu navegador.

Convertidor de Color — HEX, RGB, HSL y OKLCH

Herramientas de Conversión

Convierta HEX a RGB, HSL, OKLCH, OKLAB y CMYK en su navegador — copie cualquier formato con un clic. Gratis, sin registro, sus colores nunca salen de la página.

Convertidor HEX a CMYK

Herramientas de Conversión

Convierta colores HEX a CMYK en su navegador. Aproximación ingenua basada en sRGB para vistas previas de imprenta. Gratis, sin registro, sus colores nunca salen de la página.

Convertidor HEX a HSL

Herramientas de Conversión

Convierta cualquier color hex a HSL en su navegador — admite hex de 3 dígitos, 6 dígitos y 8 dígitos con alfa. Gratis, instantáneo, sin registro, sus colores nunca salen de la página.

Convertidor HEX a OKLCH

Herramientas de Conversión

Convierta HEX a OKLCH para tokens de diseño de Tailwind v4. Salida perceptualmente uniforme en vivo con avisos de gama Display P3. Gratis, solo en el navegador.

Convertidor HEX a RGB

Herramientas de Conversión

Convierta cualquier código de color hex a RGB en su navegador — admite hex de 3 dígitos, 6 dígitos y 8 dígitos con alfa. Gratis, instantáneo, sin registro, sus colores nunca salen de la página.