# Fundo branco em design: quando o espaço vazio é a melhor escolha

[Canonical HTML page](https://gradiently.design/pt-pt/guide/white-background-design)

O fundo branco é a escolha mais comum em design e a mais fácil de falhar. Eis quando é a decisão certa, que brancos usar e como evitar que pareça uma página em branco.

## The short version

- Um fundo branco funciona melhor quando o conteúdo é o essencial: uma fotografia de produto, uma leitura longa, uma lista de preços ou um único título forte.
- O branco puro #ffffff cansa nos ecrãs em leituras longas, por isso a maioria dos designs cuidados usa um branco sujo com um leve tom quente ou frio.
- O texto preto sobre branco tem um contraste altíssimo, por isso podes usar um quase preto mais suave, como #1c1917, e continuar a ler com conforto.
- O espaço em branco só parece intencional quando é generoso e coerente; um layout branco apertado parece inacabado e não minimalista.
- Um detalhe discreto, como um grão ténue, um filete fino ou uma luz suave num canto, evita que o fundo branco pareça um ficheiro vazio.

O **fundo branco** é a melhor escolha quando o que está por cima merece toda a atenção: um produto, uma fotografia, um parágrafo longo, uma frase que tem de acertar em cheio. Falha quando o branco é escolhido por defeito, porque então parece uma página que ninguém terminou. A diferença resume-se a três decisões: que branco, quanto espaço e um pequeno detalhe que mostra a quem vê que o vazio foi propositado.

## Quando um fundo branco é a escolha certa

O branco não tem disposição própria, e é essa a sua força. Sai do caminho. Por isso é o fundo natural para tudo o que tem cor ou textura próprias, e o pior fundo para o que precisa de atmosfera para se sustentar.

### O branco funciona em

- Fotografias de produto em que a fidelidade da cor conta
- Leitura longa: artigos, ementas, termos, relatórios
- Um único título forte sem mais nada
- Listas de preços e tabelas comparativas
- Marcas assentes na contenção e na clareza

### O branco tem dificuldades com

- Eventos noturnos, música e tudo o que é noturno
- Fotografias claras e pálidas que se diluem na página
- Feeds em que todos os concorrentes já usam branco
- Publicações curtas com pouco conteúdo para preencher o espaço
- Designs que precisam de calor ou drama para resultar

Se o teu design está do lado direito da tabela, um fundo de cor suave ou um gradiente delicado costuma servi-lo melhor. Os [fundos minimalistas](https://gradiently.design/pt-pt/guide/minimalist-backgrounds) apresentam opções discretas além do branco, e o [design em modo escuro](https://gradiently.design/pt-pt/guide/dark-mode-design) trata do extremo oposto.

## Escolhe um branco sujo, não branco puro

O `#ffffff` puro é a coisa mais brilhante que um ecrã consegue mostrar. Para o fundo de uma fotografia, serve; para uma página que alguém lê durante dois minutos, encandeia. Um branco sujo baixa um pouco o brilho e dá à página uma temperatura. Os brancos quentes parecem impressos, calmos e humanos. Os frios parecem clínicos, técnicos e precisos. Escolhe o que combina com aquilo que vendes.

- Branco puro: #ffffff
- Papel: #faf7f2
- Linho: #f7f1e8
- Aveia: #f5f0eb
- Nuvem: #f4f6f8
- Névoa: #f1f5f4
- Tinta quente: #1c1917

Cinco brancos sujos ao lado do branco puro, e um quase preto quente para pôr por cima. Nas amostras as diferenças parecem minúsculas; numa página inteira são óbvias.

| Branco | Hex | Sensação | Usa em |
| --- | --- | --- | --- |
| Branco puro | `#ffffff` | Luminoso, neutro | Recortes de produto, anúncios de comércio eletrónico |
| Papel | `#faf7f2` | Impresso, calmo | Diários, newsletters, ementas |
| Linho | `#f7f1e8` | Quente, artesanal | Padarias, floristas, papelaria |
| Nuvem | `#f4f6f8` | Frio, preciso | Software, finanças, clínicas |
| Névoa | `#f1f5f4` | Fresco, limpo | Cuidados de pele, bem-estar, dentistas |

Copia um branco pela sua temperatura. Depois mantém-no em todo o lado: um site, uma apresentação e uma publicação em três brancos diferentes parecem três marcas.

## Dá espaço às palavras

O espaço em branco não é o que sobra. É uma decisão de layout, e só parece intencional quando é generoso. Uma regra prática: margens de pelo menos 8 por cento do lado mais curto, ou seja, 86 px numa publicação de 1080×1350, e mais espaço entre grupos do que dentro deles. Um título, uma linha curta por baixo e um pequeno detalhe no fundo bastam para uma publicação.

Uma publicação vertical calma com um título curto centrado num espaço vazio generoso

Uma linha, uma pequena sobrelinha e um detalhe discreto. O espaço carrega tanto significado como as palavras.

Uma publicação vertical com horários de abertura e margens largas à volta de um bloco curto de texto

Uma publicação prática continua calma se as margens forem largas e o texto pequeno.

A hierarquia importa mais no branco do que em qualquer outro fundo, porque não há cor a guiar o olhar. Usa o tamanho e o peso para ordenar as palavras, como se descreve em [hierarquia visual](https://gradiently.design/pt-pt/guide/visual-hierarchy), e mantém-te numa só família tipográfica se puderes.

## Cor do texto sobre fundo branco

O preto puro sobre branco puro tem o contraste mais alto que um ecrã consegue mostrar, mais do que a leitura precisa, e pode parecer severo. Um quase preto com um toque da temperatura do fundo, como `#1c1917` sobre um branco quente ou `#0f172a` sobre um frio, ainda ultrapassa folgadamente todos os limiares de acessibilidade. Para texto corrido, mantém uma razão de contraste de pelo menos 4,5:1; o artigo sobre [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) explica como a verificar.

> **O texto cinzento claro é o erro clássico** O texto cinzento sobre branco sujo parece elegante num ficheiro de design e desaparece num telemóvel ao sol. Se uma linha é importante, mantém-na escura. Usa o tamanho, e não a palidez, para tornar o texto secundário mais discreto.

## Como evitar que um fundo branco pareça inacabado

O risco do branco é parecer uma tela vazia em vez de uma tela escolhida. Um só detalhe discreto chega para o resolver. Escolhe um, não todos.

- **Um grão ténue** com intensidade muito baixa, para que o branco se leia como uma superfície. Vê a [textura de grão](https://gradiently.design/pt-pt/guide/textured-background).
- **Uma luz suave num canto**, um branco quente a esbater para um creme ligeiramente mais profundo num canto.
- **Um filete fino** ou uma borda delgada na cor da tua tinta, com poucos píxeis de largura.
- **Uma cor de destaque** usada uma só vez, num preço, numa data ou num botão.
- **Um toque de papel** para marcas impressas ou artesanais; a [textura de papel](https://gradiently.design/pt-pt/guide/paper-texture-background) mostra como.

- Papel com um canto quente: `radial-gradient(circle at 85% 10%, #fde9d4 0%, #faf7f2 45%, #f7f1e8 100%)`
- Branco para nuvem: `linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%)`
- Névoa com luz no topo: `radial-gradient(ellipse at 50% 0%, #ffffff 0%, #f1f5f4 70%, #e6efec 100%)`

Três brancos que mal chegam a ser gradientes. No telemóvel lêem-se como branco com profundidade, nunca como cor.

## Um fundo branco em CSS

Na web, define o branco sujo uma só vez como variável para que todas as secções o partilhem, e dá às imagens um fundo equivalente para que as fotografias de produto em branco puro não apareçam como caixas sobre a cor do teu 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);
}
```

O `mix-blend-mode: multiply` faz com que o branco em redor de uma fotografia de produto assuma a cor da página, e os recortes assentam naturalmente num branco sujo.

Se queres um aspeto branco com um pouco mais de carácter, os Marks claros do Gradiently são um bom ponto de partida: fundos suaves e pálidos com material e luz reais, em que a zona mais calma se desloca para trás das tuas palavras e a **Tinta automática** mantém cada linha suficientemente escura para se ler. Podes criar designs com qualquer Mark livre sem custo; reserva o que mais gostares quando estiveres pronto para exportar.

## FAQ

### Qual é o melhor código de cor de branco sujo para um fundo?

Um branco papel quente como `#faf7f2` serve a maioria das marcas editoriais e de estilo de vida, e um branco frio como `#f4f6f8` serve marcas de software e clínicas. Escolhe um e usa-o em todo o lado.

### O branco puro é mau para sites?

Não é mau, mas é luminoso. O branco puro é ideal atrás de recortes de produto; para leitura longa, um branco sujo ligeiramente tingido é mais suave para os olhos.

### Que cor de texto fica melhor num fundo branco?

Um quase preto como `#1c1917` ou `#0f172a`. Lê-se como preto, mantém o contraste bem acima de 4,5:1 e parece mais suave do que o preto puro.

### Como faço um fundo branco parecer menos aborrecido?

Acrescenta um detalhe discreto: grão ténue, uma luz suave num canto, um filete fino ou uma única cor de destaque. Mantém as margens generosas para o espaço parecer escolhido.

### Porque é que as minhas fotografias de produto mostram uma caixa no meu site em branco sujo?

As fotografias foram tiradas sobre branco puro. Usa `mix-blend-mode: multiply` nas imagens ou exporta-as com fundo transparente.