1440 px × 1.618034
1440 px / 1.618034
Calcula dimensiones de proporción áurea y rectángulos dorados al instante. Divide longitudes según phi (1,618), escala tipografía y crea cuadrículas responsivas.
1440 px × 1.618034
1440 px / 1.618034
Calcula dimensiones áureas y proporciones del rectángulo dorado al instante. Divide longitudes según phi (1,618), escala tipografía y genera retículas CSS responsivas.
Longitud perimetral continua completa dividida en proporciones áureas según la fórmula de división externa de Euclides (A + B) / A = A / B = φ. En arquitectura y diseño de interfaces (UI), abarca habitualmente de 320 px a 3840 px en pantallas digitales o de 100 mm a 1000 mm en lienzos editoriales impresos.
La partición geométrica mayor que representa exactamente (√5 - 1) / 2 ≈ 61,80339887% de la longitud total. En diseño editorial digital y ergonomía web, el Segmento A lidera la jerarquía visual primaria para flujos de contenido principal, lienzos hero y bloques modulares dominantes.
El segmento armónico complementario calculado como el Total menos el Segmento A, exactamente igual a (3 - √5) / 2 ≈ 38,19660113% de la dimensión total. Funciona como la barra lateral (sidebar) natural, bandeja secundaria de metadatos, panel de navegación o espacio en blanco compensatorio.
La única raíz positiva de la ecuación cuadrática x² - x - 1 = 0, definida algebraicamente como (1 + √5) / 2 ≈ 1,618033988749895. Rige el crecimiento logarítmico autoescalable, el límite asintótico de la sucesión de Fibonacci (lím n→∞ F(n+1)/F(n)) y los rectángulos áureos autorreplicantes.
Tamaño de fuente base para el cuerpo de texto (habitualmente 16 px por accesibilidad web o 10-12 pt en maquetación impresa), a partir del cual se multiplican o dividen los intervalos de la escala modular por φ (o φ^(1/2) ≈ 1,272 para tipografía condensada en pantalla) para generar jerarquías armónicas de encabezados.
Margen o separación negativa entre columnas de contenido áureo. Mantener el ancho del medianil proporcional al segmento menor (por ejemplo, 16 px, 24 px o 32 px derivados de la progresión de Fibonacci) evita la saturación visual y preserva la relación de contraste perceptivo 61,8/38,2 en maquetaciones CSS subgrid o flexbox.
Multiplicar un cuerpo de texto accesible de 16 px por la razón áurea completa (1,618) produce: H3 a 25,9 px, H2 a 41,9 px y H1 a 67,8 px. Aunque resulta imponente en monitores de 1440 px o pantallas de gran formato, un H1 de 68 px provoca saltos de línea bruscos y cortes de palabras en pantallas móviles de 375 px. Los sistemas de diseño más avanzados (como Apple Human Interface Guidelines y Material Design) implementan la semiproporción áurea (phi^(1/2) ≈ 1,272) o la tercera mayor (1,250) en viewports móviles, reservando el factor 1,618 para escritorios amplios.
La clásica 'regla de los tercios' fotográfica divide el encuadre en partes iguales al 33,3% y 66,7%, situando las líneas de división y los puntos de intersección demasiado cerca de los bordes externos. La retícula áurea (Phi Grid) particiona el encuadre al 38,2% y 61,8%. Esto aproxima los puntos focales un 5% más hacia el centro visual, generando un anclaje óptico más natural que erradica el espacio negativo periférico innecesario en composiciones arquitectónicas y de retrato.
Los cálculos que generan fracciones de píxel (como 889,967 px y 550,033 px en un contenedor de 1440 px) se redondean de forma dispar entre los motores de renderizado de los navegadores (Blink, WebKit, Gecko). En flexbox o composiciones multicolumna, si el navegador redondea hacia arriba ambas columnas en 0,5 px (890 px + 551 px = 1441 px), la barra lateral es empujada a una segunda línea inesperada. Declara siempre CSS flex: 1 1 0 con anchos porcentuales width: 61.8034% y calc(100% - 61.8034% - var(--gutter)) junto con box-sizing: border-box para garantizar un renderizado fluido y exacto.
Un error común en diseño editorial es intentar forzar formatos de papel estándar de la serie A dentro de un rectángulo dorado. El estándar ISO 216 se basa en la relación de Lichtenberg (1:√2 ≈ 1:1,4142), lo que permite plegar o cortar una hoja por la mitad indefinidamente conservando la misma proporción de aspecto. Un rectángulo dorado auténtico con el ancho de un A4 (210 mm) requeriría una altura de 339,8 mm (42,8 mm más largo que el A4 estándar de 297 mm). Para aplicar la proporción áurea en un A4 estándar, distribuye los márgenes interiores de la maquetación en lugar de cortar el papel físico.
Al definir anchos de columna mediante valores exactos en píxeles decimales (por ejemplo, width: 889.97px), los errores acumulativos de redondeo en pantallas de alta densidad (pantallas retina con 2x o 3x DPR) superan el ancho disponible del contenedor, forzando a la segunda columna a descender. Soluciona este problema aplicando tokens porcentuales en CSS (flex-basis: 61.8034% y flex-basis: calc(38.1966% - var(--gutter))) combinados con min-width: 0 y overflow-wrap: break-word en los contenedores flex padre.
Situar el punto de convergencia más denso de la espiral áurea en la esquina inferior derecha genera fricción visual, ya que los estudios de seguimiento ocular (eye-tracking) demuestran que los usuarios occidentales escanean en forma de F comenzando por la esquina superior izquierda. Orienta siempre tu espiral dorada de modo que su curva inicial más amplia recorra la barra de navegación superior izquierda y la propuesta de valor principal, descendiendo progresivamente hacia el botón de llamada a la acción (CTA) o elemento gráfico clave en el cuadrante inferior derecho.
Calcular proporciones áureas mediante números bajos de la sucesión de Fibonacci (como 3/2 = 1,500 o 5/3 = 1,667) introduce hasta un 7,3% de margen de error frente al valor real de phi (1,618034). La relación entre términos de Fibonacci solo converge con una precisión del 0,1% a partir de 89/55 (1,61818). Para maquetaciones estructurales y sistemas de diseño de interfaces digitales, calcula siempre las coordenadas utilizando la constante irracional exacta φ = (1 + √5)/2 en lugar de aproximaciones basadas en enteros iniciales.
Para calcular la proporción áurea entre dos segmentos, divide el número mayor (A) entre el número menor (B); el resultado debe ser igual a 1,618034, y la longitud total (A + B) dividida entre el número mayor (A) también debe ser 1,618034. Matemáticamente: (A + B) / A = A / B = φ = (1 + √5) / 2 ≈ 1,6180339887. Por ejemplo, si tu segmento mayor mide 100 px, el segmento menor mide 100 / 1,618034 = 61,8 px, y la longitud total combinada es de 161,8 px.
Para dividir cualquier dimensión total (como el ancho de un contenedor) según la proporción áurea, multiplica el total por 0,618034 para obtener la sección mayor (A = Total × 0,618034) y multiplica el total por 0,381966 para calcular la sección menor (B = Total × 0,381966). Por ejemplo, dividir un contenedor web de 1200 px da como resultado un área de contenido principal de 741,64 px y una barra lateral secundaria de 458,36 px (741,64 + 458,36 = 1200 px).
La proporción áurea (retícula Phi) divide el espacio en una relación 1 : 0,618 : 1 (38,2% / 23,6% / 38,2%), mientras que la regla de los tercios divide el espacio en tres segmentos idénticos 1 : 1 : 1 (33,33% / 33,33% / 33,33%). La regla de los tercios es una simplificación ideada para facilitar el encuadre rápido en visores de cámaras, mientras que la proporción áurea ubica las intersecciones focales un 5% más próximas al centro, logrando composiciones visuales más armoniosas y reduciendo el espacio muerto.
Para un ancho total de 1920 px, la partición horizontal áurea es de 1186,62 px para el área principal y de 733,38 px para la barra lateral. Para una pantalla de 1440 px, la división áurea horizontal es de 889,97 px (61,8%) y 550,03 px (38,2%). En una altura de 1080 px, la división vertical genera una franja hero principal de 667,48 px y una franja secundaria de 412,52 px. Un rectángulo dorado perfecto con una altura de 1080 px requiere un ancho de 1747,48 px (1080 × 1,618034), lo que representa un 9% menos de anchura que el formato panorámico estándar 16:9 (1920 px).
Para crear una escala tipográfica modular áurea, define un tamaño de fuente base (por ejemplo, 16 px) y multiplícalo sucesivamente por φ (1,618) para ascender en la jerarquía de títulos, o divídelo entre φ para descender en notas al pie y leyendas: Cuerpo = 16 px, H3 = 16 × 1,618 ≈ 26 px, H2 = 26 × 1,618 ≈ 42 px y H1 = 42 × 1,618 ≈ 68 px. Para interfaces móviles con espacio reducido donde un factor de 1,618 agranda los titulares en exceso, se recomienda usar la raíz cuadrada de phi (√φ ≈ 1,272), lo que genera una escala más compacta: Cuerpo = 16 px, H3 = 20 px, H2 = 26 px y H1 = 33 px.
Genera sombras CSS neumórficas y Soft UI con superficies extruidas, hundidas, planas y cóncavas. Copia código limpio en CSS, Tailwind o SCSS al instante.
Genera esquemas armónicos de color al instante. Crea paletas complementarias, análogas, triádicas y adyacentes con verificación de contraste WCAG en tiempo real y exportación CSS.
Genera código CSS moderno de glassmorphism y vidrio esmerilado con controles interactivos de desenfoque backdrop-filter, opacidad, bordes y sombras. Copia HTML y CSS limpios al instante.
Comprime imágenes online sin pérdida de calidad. Reduce el tamaño de JPG, PNG y WebP en tu navegador sin subir datos al servidor, con objetivo en KB y exportación en ZIP.
Todo el procesamiento y conversión se realiza íntegramente en la memoria de su navegador sin transmisiones externas.
Diseña sombras CSS multicapa realistas y naturales con elevación óptica, relieve interno, dispersión y exportación instantánea a Tailwind, CSS y React.