La versión corta
- 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.
En esta página
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 recoge opciones tranquilas más allá del blanco, y diseño en modo oscuro 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.
Hex
#ffffffSensación
Úsalo para
#faf7f2Sensación
Úsalo para
#f7f1e8Sensación
Úsalo para
#f4f6f8Sensación
Úsalo para
#f1f5f4Sensación
Úsalo para
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.
Una línea, un antetítulo pequeño y un detalle discreto. El espacio dice tanto como las palabras.
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, 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 explica cómo comprobarlo.
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.
- 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 muestra cómo.
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.
: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.
Preguntas frecuentes
¿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.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil