REM (root em) es una unidad CSS relativa al tamaño de fuente raíz del documento, normalmente 16px. Como los valores rem escalan con la configuración de fuente del navegador del usuario, los diseños construidos con rem se mantienen accesibles y proporcionales en todos los dispositivos — a diferencia de los valores fijos en píxeles.
Introduce un valor en píxeles para ver su equivalente en rem, o escribe un valor rem para convertirlo de vuelta. Ajusta el tamaño de fuente base para tu proyecto (algunos sistemas de diseño usan raíces de 10px o 20px). La tabla cubre los tamaños más comunes y la comparación visual muestra cómo ambas unidades se renderizan idénticas con el mismo tamaño raíz.
Frequently Asked Questions
Q: ¿Cuál es la diferencia entre REM y EM?
¿Cuál es la diferencia entre REM y EM? rem siempre es relativo al tamaño de fuente raíz (html). em es relativo al tamaño de fuente del elemento padre, por lo que em se acumula en elementos anidados mientras rem se mantiene consistente.
Q: ¿Por qué usar REM en lugar de PX?
¿Por qué usar REM en lugar de PX? REM escala con la configuración de accesibilidad del usuario — quien aumenta el tamaño de fuente del navegador ve todo el texto más grande. PX permanece fijo y puede romper diseños o accesibilidad. La práctica moderna es usar rem para tipografía y espaciado.
Q: ¿Cuál es el tamaño de fuente base por defecto?
¿Cuál es el tamaño de fuente base por defecto? Todos los navegadores principales usan 16px = 1rem por defecto. Así que 32px = 2rem, 8px = 0.5rem y 24px = 1.5rem con la raíz por defecto.
Q: ¿Puedo usar REM en media queries?
¿Puedo usar REM en media queries? Sí. Las media queries escritas en rem responden a la configuración de fuente del usuario, no solo al ancho del viewport — una mejora sutil de accesibilidad frente a breakpoints en px.
Q: ¿Debo convertir cada valor manualmente?
¿Debo convertir cada valor manualmente? No. Las herramientas de build modernas (PostCSS, Tailwind) manejan las conversiones automáticamente. Usa esta calculadora para conversiones rápidas y para revisar CSS escrito a mano.
Colores del Mundo Hispano
Del añil guatemalteco al rosa mexicano, el mundo hispanohablante tiene una rica tradición cromática. Estos colores nacen de textiles indígenas, arquitectura colonial y festividades, y hoy inspiran paletas llenas de carácter.
Rosa Mexicano #E4007CColor icónico del diseño mexicano, creado por Ramón Valdiosera
Azul Añil #4B0082Tinte tradicional de los textiles mayas de Guatemala
Rojo Bermellón #E34234El rojo intenso de los toros y la cerámica española
Amarillo Maíz #F4B41AEl oro del maíz, base de la alimentación mesoamericana
Verde Jade #00A86BLa piedra sagrada de mayas y aztecas
Azul Celeste #A5C8E1El azul de la bandera argentina y el cielo porteño
Terracota #E2725BArcilla cocida — el color de los tejados coloniales
Vino Tinto #722F37El burdeos de las bodegas de La Rioja
Oro Colonial #D4AF37El dorado de los retablos barrocos americanos
Turquesa Caribe #40E0D0El color de las playas del Caribe
Q: ¿Qué es el rosa mexicano?
¿Qué es el rosa mexicano? El rosa mexicano (#E4007C) es un color vibrante promovido por el diseñador Ramón Valdiosera en los años 40 como símbolo de identidad nacional, usado hoy en artesanías, textiles y diseño contemporáneo.
Q: ¿Qué es el azul añil?
¿Qué es el azul añil? El añil es un tinte natural azul extraído de la planta del índigo, usado en los textiles mayas de Guatemala y en los huipiles tradicionales desde tiempos prehispánicos.