# Diseño con fondo blanco: cuándo el espacio vacío es la mejor opción [Canonical HTML page](https://gradiently.design/es/guide/white-background-design) El fondo blanco es la elección más común en diseño y la más fácil de hacer mal. Aquí verás cuándo acierta, qué blancos usar y cómo evitar que parezca una página en blanco. ## The short version - Un fondo blanco funciona mejor cuando lo importante es el contenido: una foto de producto, un texto largo, una lista de precios o un solo titular potente. - El blanco puro #ffffff resulta duro en pantalla para leer mucho rato, así que la mayoría de diseños cuidados usan un blanco roto con un ligero tono cálido o frío. - El texto negro sobre blanco tiene un contraste altísimo, así que puedes permitirte un casi negro más suave como #1c1917 y seguir leyendo con comodidad. - El espacio en blanco solo parece intencionado cuando es generoso y coherente; una maqueta blanca apretada parece sin terminar, no minimalista. - Un detalle discreto, como un grano tenue, un filete fino o una luz suave en una esquina, evita que un fondo blanco parezca un archivo vacío. El **diseño con fondo blanco** es la mejor opción cuando lo que va encima merece toda la atención: un producto, una fotografía, un párrafo largo, una sola frase que tiene que calar. Falla cuando el blanco se elige por defecto, porque entonces parece una página que nadie terminó. La diferencia se reduce a tres decisiones: qué blanco, cuánto espacio y un pequeño detalle que le diga a quien mira que el vacío es intencionado. ## Cuándo un fondo blanco es la elección correcta El blanco no tiene un ánimo propio, y esa es su fuerza. Se aparta. Eso lo convierte en el fondo natural para todo lo que tiene color o textura propios, y en el peor fondo para lo que necesita una atmósfera que lo sostenga. ### El blanco funciona para - Fotos de producto en las que importa la fidelidad del color - Lectura larga: artículos, menús, condiciones, informes - Un solo titular contundente sin nada más - Listas de precios y tablas comparativas - Marcas construidas sobre la contención y la claridad ### El blanco sufre con - Eventos nocturnos, música y todo lo que pasa de noche - Fotos claras y pálidas que se funden con la página - Feeds donde todos los competidores ya usan blanco - Posts breves con muy poco contenido para llenar el espacio - Diseños que necesitan calidez o dramatismo Si tu diseño está en la columna de la derecha, un fondo de color suave o un degradado delicado suele servirle mejor. [Fondos minimalistas](https://gradiently.design/es/guide/minimalist-backgrounds) recoge opciones tranquilas más allá del blanco, y [diseño en modo oscuro](https://gradiently.design/es/guide/dark-mode-design) cubre el extremo opuesto. ## Elige un blanco roto, no blanco puro El `#ffffff` puro es lo más brillante que puede mostrar una pantalla. Como fondo de una foto está bien; para una página que alguien lee durante dos minutos, deslumbra. Un blanco roto baja un poco el brillo y le da temperatura a la página. Los blancos cálidos parecen impresos, tranquilos y humanos. Los fríos parecen clínicos, técnicos y precisos. Elige el que encaje con lo que vendes. - Blanco puro: #ffffff - Papel: #faf7f2 - Lino: #f7f1e8 - Avena: #f5f0eb - Nube: #f4f6f8 - Bruma: #f1f5f4 - Tinta cálida: #1c1917 Cinco blancos rotos junto al blanco puro, y un casi negro cálido para usar encima. Las diferencias parecen mínimas en las muestras y evidentes en una página entera. | Blanco | Hex | Sensación | Úsalo para | | --- | --- | --- | --- | | Blanco puro | `#ffffff` | Luminoso, neutro | Recortes de producto, fichas de tienda online | | Papel | `#faf7f2` | Impreso, tranquilo | Revistas, newsletters, menús | | Lino | `#f7f1e8` | Cálido, artesanal | Panaderías, floristerías, papelería | | Nube | `#f4f6f8` | Frío, preciso | Software, finanzas, clínicas | | Bruma | `#f1f5f4` | Fresco, limpio | Cosmética, bienestar, dental | Elige un blanco por su temperatura. Y mantenlo en todas partes: una web, una presentación y un post en tres blancos distintos parecen tres marcas. ## Da aire al texto El espacio en blanco no es lo que sobra. Es una decisión de maquetación, y solo parece intencionado cuando es generoso. Una regla práctica: márgenes de al menos el 8 por ciento del lado más corto, es decir, 86 px en un post de 1080×1350, y más espacio entre grupos que dentro de ellos. Un titular, una línea corta debajo y un pequeño detalle abajo bastan para un post. Un post vertical sereno con un titular corto centrado en un espacio vacío generoso Una línea, un antetítulo pequeño y un detalle discreto. El espacio dice tanto como las palabras. Un post vertical con el horario de apertura y márgenes amplios alrededor de un bloque de texto corto Un post práctico se sigue leyendo tranquilo cuando los márgenes son amplios y la letra es pequeña. La jerarquía importa más sobre blanco que en ningún otro sitio, porque no hay color que guíe la mirada. Usa el tamaño y el peso para ordenar las palabras, como se explica en [jerarquía visual](https://gradiently.design/es/guide/visual-hierarchy), y quédate con una sola familia tipográfica si puedes. ## Color del texto sobre fondo blanco El negro puro sobre blanco puro tiene el máximo contraste que puede mostrar una pantalla, más del que necesita la lectura, y puede resultar seco. Un casi negro con un toque de la temperatura del fondo, como `#1c1917` sobre un blanco cálido o `#0f172a` sobre uno frío, supera con holgura todos los umbrales de accesibilidad. Para el texto principal mantén un contraste de al menos 4,5:1; [contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility) explica cómo comprobarlo. > **El texto gris claro es el error clásico** El texto gris sobre un blanco roto queda elegante en el archivo de diseño y desaparece en un móvil al sol. Si una línea importa, que sea oscura. Usa el tamaño, no la palidez, para que el texto secundario sea más discreto. ## Evita que un fondo blanco parezca sin terminar El riesgo del blanco es que parezca un lienzo vacío y no uno elegido. Un detalle discreto basta para arreglarlo. Elige uno, no todos. - **Un grano tenue** a muy baja intensidad, para que el blanco se lea como una superficie. Mira [textura de grano](https://gradiently.design/es/guide/textured-background). - **Una luz suave en una esquina**, un blanco cálido que se funde con un crema algo más profundo en un rincón. - **Un filete fino** o un borde delgado en tu color de tinta, de unos pocos píxeles. - **Un color de acento** usado una sola vez, en un precio, una fecha o un botón. - **Un tacto de papel** para marcas impresas o artesanales; [textura de papel](https://gradiently.design/es/guide/paper-texture-background) muestra cómo. - Papel con una esquina cálida: `radial-gradient(circle at 85% 10%, #fde9d4 0%, #faf7f2 45%, #f7f1e8 100%)` - De blanco a nube: `linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%)` - Bruma con luz arriba: `radial-gradient(ellipse at 50% 0%, #ffffff 0%, #f1f5f4 70%, #e6efec 100%)` Tres blancos que apenas son degradados. En un móvil se leen como blanco con profundidad, nunca como color. ## Un fondo blanco en CSS En la web, define el blanco roto una sola vez como variable para que todas las secciones lo compartan, y da a las imágenes un fondo a juego para que las fotos de producto sobre blanco puro no se vean como cajas contra tu color papel. ```css :root { --paper: #faf7f2; --ink: #1c1917; --rule: #e7e1d8; } body { margin: 0; background: var(--paper); color: var(--ink); } /* Product photos shot on pure white: blend them into the paper */ .product img { mix-blend-mode: multiply; } hr { border: 0; border-top: 1px solid var(--rule); } ``` `mix-blend-mode: multiply` hace que el blanco alrededor de una foto de producto tome el color de la página, así los recortes se asientan con naturalidad sobre un blanco roto. Si quieres un estilo blanco con algo más de carácter, los Marks claros de Gradiently son un buen punto de partida: fondos suaves y pálidos con material y luz reales, donde la zona más tranquila se coloca detrás de tus palabras y la **tinta automática** mantiene cada línea lo bastante oscura para leerse. Diseñar con cualquier Mark sin reservar es gratis; reserva el que te guste cuando quieras exportar. ## FAQ ### ¿Cuál es el mejor código de color blanco roto para un fondo? Un blanco papel cálido como `#faf7f2` encaja con la mayoría de marcas editoriales y de estilo de vida, y un blanco frío como `#f4f6f8` con marcas de software y clínicas. Elige uno y úsalo en todas partes. ### ¿El blanco puro es malo para una web? No es malo, pero es muy luminoso. El blanco puro es ideal detrás de recortes de producto; para leer mucho rato, un blanco roto ligeramente teñido descansa más la vista. ### ¿Qué color de texto queda mejor sobre fondo blanco? Un casi negro como `#1c1917` o `#0f172a`. Se lee como negro, mantiene un contraste muy por encima de 4,5:1 y resulta más suave que el negro puro. ### ¿Cómo hago que un fondo blanco sea menos aburrido? Añade un detalle discreto: grano tenue, una luz suave en una esquina, un filete fino o un único color de acento. Mantén los márgenes generosos para que el espacio parezca elegido. ### ¿Por qué mis fotos de producto se ven como una caja en mi web de blanco roto? Las fotos se hicieron sobre blanco puro. Usa `mix-blend-mode: multiply` en las imágenes o expórtalas con fondo transparente.