# Color field painting e o gradiente moderno

[Canonical HTML page](https://gradiently.design/pt-br/guide/color-field-painting)

Muito antes do CSS, um grupo de pintores provou que poucas cores, se encontrando suavemente em grande escala, podiam emocionar. Veja o que eles fizeram e o que isso ensina a quem cria gradientes hoje.

## The short version

- A color field painting, ou pintura de campo de cor, é um estilo de pintura abstrata que surgiu nos Estados Unidos a partir do fim dos anos 1940, construído sobre grandes áreas de cor quase chapada.
- Mark Rothko, Barnett Newman e Clyfford Still são os primeiros pintores mais conhecidos do movimento, seguidos por Helen Frankenthaler, Morris Louis e Kenneth Noland.
- As pinturas maduras de Rothko empilham retângulos de cor com bordas suaves sobre um fundo colorido, construídos em camadas finas.
- As ideias por trás da pintura de campo de cor (poucas cores, transições suaves, grande escala e camadas luminosas) são as mesmas que fazem um gradiente digital parecer pensado.
- Um gradiente inspirado na pintura de campo de cor funciona melhor com duas ou três cores próximas, bordas suaves e bastante espaço livre.

A **color field painting**, ou pintura de campo de cor, é um tipo de pintura abstrata que surgiu nos Estados Unidos a partir do fim dos anos 1940, em que grandes áreas de cor quase chapada preenchem a tela e se tornam o tema. Mark Rothko, Barnett Newman e Clyfford Still lideraram a primeira geração; Helen Frankenthaler, Morris Louis e Kenneth Noland foram além nos anos 1950 e 1960. O que eles descobriram sobre bordas suaves, escala e cor em camadas é, quase exatamente, o ofício de fazer um bom gradiente moderno.

## A pintura de campo de cor explicada

Ela nasceu do Expressionismo Abstrato em Nova York, ao lado da pintura enérgica de gotejamento e gesto de artistas como Jackson Pollock. Se os pintores do gesto faziam da pincelada o tema, os pintores de campo de cor fizeram quase o contrário: silenciaram a superfície para que a própria cor fizesse o trabalho. As telas costumavam ser muito grandes, feitas para serem vistas de perto, de modo que a cor preenchesse todo o seu campo de visão.

O crítico Clement Greenberg defendeu a vertente posterior e mais fria do movimento e, em 1964, organizou uma exposição chamada Post-Painterly Abstraction, que reunia muitos desses pintores. Os rótulos se sobrepõem, e os próprios artistas muitas vezes os rejeitavam, mas a ideia comum é clara: a cor como o acontecimento inteiro.

## Os pintores e o que cada um fez

| Pintor | Abordagem característica | O que um designer pode aproveitar |
| --- | --- | --- |
| Mark Rothko | Retângulos de bordas suaves empilhados sobre um fundo colorido, feitos de camadas finas | Bordas suaves e translucidez em camadas |
| Barnett Newman | Campos vastos cortados por faixas verticais estreitas que ele chamava de zips | Uma única linha precisa pode organizar uma superfície enorme |
| Clyfford Still | Áreas de cor irregulares, como chamas, que parecem rasgar a tela | Bordas irregulares dão tensão a uma cor calma |
| Helen Frankenthaler | Tinta diluída derramada sobre tela crua para ser absorvida, seu método soak stain | Cor que parece absorvida, não aplicada |
| Morris Louis | Véus e filetes de cor manchada escorrendo pela tela | Direção pelo fluxo, não por linhas |
| Kenneth Noland | Alvos, chevrons e listras de cor limpa e manchada | Geometria e cor podem dividir a mesma superfície |

Seis pintores mais associados à pintura de campo de cor. Procure as obras deles nos acervos dos museus: reproduções na tela são o mais perto da fonte que um designer de gradientes consegue chegar.

A obra de Rothko é o exemplo mais famoso. Por volta de 1950, suas pinturas se firmaram em dois ou três retângulos desfocados flutuando sobre um fundo colorido. A Rothko Chapel, em Houston, inaugurada em 1971, abriga um conjunto de suas grandes e escuras pinturas finais. A pintura Mountains and Sea, de Frankenthaler, de 1952, feita com o método soak stain, influenciou Louis e Noland, que depois desenvolveram suas próprias telas manchadas.

## O que a pintura de campo de cor ensina sobre gradientes

A maioria dos gradientes genéricos falha exatamente onde esses pintores acertaram: cores demais, transições bruscas, nenhum respiro. As lições deles se traduzem diretamente.

### Pintura de campo de cor

- Duas ou três cores por tela
- Bordas esfumadas onde os campos se encontram
- Camadas finas que deixam as cores de baixo brilharem
- Escala enorme, nada mais disputando atenção
- Cor escolhida pelo modo como muda a vizinha

### Num gradiente moderno

- Um fundo e dois tons próximos, não um arco-íris
- Transições longas e suaves em vez de paradas secas
- Camadas empilhadas com transparência parcial
- Superfícies sangradas com o texto pequeno
- Vizinhas que se misturam bem, com um único destaque

O último ponto é o mais importante. A cor muda conforme o que está em volta, um princípio explorado a fundo em [teoria das cores](https://gradiently.design/pt-br/guide/color-theory-basics). Um vermelho profundo ao lado do laranja brilha; o mesmo vermelho ao lado do cinza parece marrom. Os pintores de campo de cor escolhiam as vizinhas com cuidado, e um bom gradiente faz o mesmo. [Cores análogas](https://gradiently.design/pt-br/guide/analogous-colors) traz um método confiável para escolher vizinhas que se misturam bem.

## Gradientes inspirados no campo de cor

Estes gradientes tomam emprestados os princípios, não as pinturas. São estudos no espírito do movimento, cada um feito com um único valor CSS. [Arte com gradientes](https://gradiently.design/pt-br/guide/gradient-art) e [ideias de arte abstrata](https://gradiently.design/pt-br/guide/abstract-art-ideas) levam o mesmo raciocínio adiante.

- Dois campos suaves, empilhados: `linear-gradient(180deg, #5a1a18 0%, #5a1a18 6%, #e0662a 13%, #e8742f 40%, #5a1a18 48%, #5a1a18 52%, #2a0d0e 59%, #2a0d0e 88%, #5a1a18 95%, #5a1a18 100%)`
- Um único zip vertical: `linear-gradient(90deg, #7d1b1f 0%, #7d1b1f 61%, #f0d48a 61%, #f0d48a 62.5%, #7d1b1f 62.5%, #7d1b1f 100%)`
- Mancha na tela crua: `radial-gradient(ellipse 55% 45% at 38% 42%, #7fa7d1 0%, #b9cde0 40%, #ede4d3 75%)`
- Azul noturno, em camadas: `linear-gradient(180deg, #1c2340 0%, #1c2340 10%, #39457a 22%, #39457a 55%, #141a30 68%, #0d1120 100%)`

Campos suaves empilhados, um zip nítido, uma mancha absorvida e um estudo escuro em camadas. Nenhum usa mais de três cores.

Para chegar mais perto dos retângulos flutuantes, com uma margem de fundo em volta e bordas desfocadas, sobreponha elementos reais em vez de usar um único gradiente. Este CSS desenha dois campos de bordas suaves flutuando sobre um fundo colorido.

```css
.canvas {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #5a1a18; /* the ground */
  overflow: hidden;
}

.field {
  position: absolute;
  left: 9%;
  right: 9%;
  border-radius: 2px;
  filter: blur(6px);
}

.field.top {
  top: 7%;
  height: 40%;
  background: linear-gradient(180deg, #e8742f, #d65f25);
  opacity: 0.92;
}

.field.bottom {
  top: 53%;
  height: 38%;
  background: linear-gradient(180deg, #2a0d0e, #3a1312);
  opacity: 0.95;
}
```

Dois campos sobre um fundo. O desfoque esfuma as bordas e a leve transparência deixa o fundo aquecer cada campo, um eco digital da tinta em camadas finas.

## Como usar a ideia no design de hoje

O pensamento do campo de cor combina com tudo o que precisa parecer calmo e sério: convites de galeria, capas de livro, capas de álbum, uma seção hero com uma única frase curta. Mantenha o texto pequeno e num canto, para que a cor continue sendo a atração principal. [Marketing para galerias de arte](https://gradiently.design/pt-br/guide/art-gallery-marketing) mostra como as galerias usam essa contenção nas redes sociais, e uma granulação leve, explicada em [gradientes granulados](https://gradiently.design/pt-br/guide/grainy-gradients), devolve um pouco da superfície que uma pintura tem.

Um convite de galeria em retrato com uma pequena linha de texto sobre um grande campo de cor em camadas suaves

Um post de galeria no espírito do campo de cor: uma superfície, uma frase pequena, nada mais pedindo atenção.

Os Marks do Gradiently seguem um raciocínio parecido: uma pequena família de cores, luz suave e um material, renderizados ao vivo atrás de tudo o que você cria e deslocando sua área mais calma para trás do seu texto. Cada um é comparado com todos os outros para que não existam dois iguais, um objetivo justo para algo inspirado em pintores que passaram anos encontrando um visual próprio.

## FAQ

### O que é color field painting?

Um estilo de pintura abstrata que surgiu nos Estados Unidos a partir do fim dos anos 1940, em que grandes áreas de cor quase chapada preenchem a tela e se tornam o tema.

### Quem são os principais pintores de campo de cor?

Mark Rothko, Barnett Newman e Clyfford Still na primeira geração, seguidos por Helen Frankenthaler, Morris Louis, Kenneth Noland e outros.

### Mark Rothko é um pintor de campo de cor?

Sim. Suas pinturas maduras, com retângulos de bordas suaves empilhados sobre um fundo colorido, são os exemplos mais conhecidos da pintura de campo de cor, embora ele não gostasse de rótulos para sua obra.

### Como faço um gradiente no estilo Rothko?

Use um fundo colorido com duas ou três faixas de bordas suaves em cores próximas, esfumadas onde se encontram. Sobrepor formas desfocadas e levemente transparentes chega mais perto do que um único gradiente.