# Gradiente ou cor chapada? Quando cada um vence

[Canonical HTML page](https://gradiently.design/pt-br/guide/gradient-vs-flat-color)

A cor chapada é clara, barata e exata. Os gradientes são vivos, distintivos e mais difíceis de controlar. A maioria das boas marcas usa os dois. Veja como decidir de qual cada superfície precisa.

## The short version

- A cor chapada vence onde importam clareza, reprodução exata e tamanhos pequenos, como ícones, controles de interface, fundos de texto corrido e impressão em uma cor.
- Os gradientes vencem onde uma superfície precisa de clima, profundidade ou distinção, como fundos, capas, heroes, posts sociais e campos de marca.
- O contraste de um gradiente muda ao longo da superfície, então o texto sobre ele precisa ser conferido no pior ponto, e não na média.
- A maioria das identidades visuais fortes usa um gradiente como assinatura e uma cor chapada tirada dele como reserva do dia a dia.
- As telas passaram de estilos brilhantes e texturizados ao design chapado no início dos anos 2010 e voltaram depois a gradientes mais suaves, então nenhum dos dois é simplesmente moderno ou datado.

Na questão **gradiente ou design chapado**, nenhum lado vence em todo lugar. A cor chapada é mais clara, reproduz-se com exatidão e sobrevive a tamanhos minúsculos e à impressão em uma cor. Os gradientes carregam clima, sugerem luz e profundidade e dão a uma marca bem mais espaço para ser distintiva. A resposta prática para a maioria das marcas é os dois: um gradiente onde a superfície é grande e expressiva, e uma cor chapada, tirada do gradiente, onde o trabalho é pequeno, funcional ou impresso em uma tinta só.

- Violeta chapado: `linear-gradient(135deg, #6d28d9 0%, #6d28d9 100%)`
- Gradiente violeta: `linear-gradient(135deg, #2e1065 0%, #6d28d9 55%, #c084fc 100%)`

O mesmo violeta como preenchimento chapado e como um gradiente construído em torno dele. Um é uma cor; o outro é uma superfície com luz sobre ela.

## Onde a cor chapada vence

- **Tamanhos pequenos:** favicons, selos de app e ícones perdem o detalhe de um gradiente, enquanto uma cor chapada continua nítida
- **Controles de interface:** botões, interruptores e estados se leem com mais clareza quando cada estado é uma cor
- **Atrás de texto longo:** o contraste constante faz cada linha ser igualmente legível
- **Impressão em uma cor:** bordado, serigrafia, gravação, carimbos e trabalhos de uma tinta não reproduzem uma mistura
- **Correspondência exata:** uma única cor especial pode ser igualada entre materiais com muito mais confiabilidade que uma mistura
- **Gráficos e dados:** cores chapadas mantêm as categorias distintas e comparáveis

## Onde os gradientes vencem

- **Superfícies grandes:** fundos, capas, heroes e cartazes onde a cor chapada parece vazia
- **Clima e luz:** uma mistura sugere uma hora do dia, um material ou um brilho que uma cor não sugere
- **Distinção:** há um número limitado de matizes únicos distinguíveis, e a maioria já tem dono em qualquer categoria
- **Feeds sociais:** um campo de gradiente bem construído se destaca em uma rolagem de fotos e de templates chapados
- **Profundidade em interfaces:** um gradiente sutil em um hero ou em um card principal separa camadas sem sombras
- **Movimento:** gradientes podem derivar e respirar; veja [fundos de gradiente animados](https://gradiently.design/pt-br/guide/animated-gradient-background)

## Gradiente ou chapado, fator por fator

| Fator | Cor chapada | Gradiente |
| --- | --- | --- |
| Legibilidade | Contraste constante em toda parte | O contraste varia; confira o pior ponto |
| Reconhecimento | Forte se você tem um matiz raro | Forte se a receita se mantém consistente |
| Distinção | Limitada pelo número de matizes | Um enorme espaço de combinações |
| Tamanhos pequenos | Excelente | Muitas vezes sujo ou perdido |
| Impressão | Exata, mesmo em uma tinta | Exige cores completas; pode formar faixas ou mudar |
| Estados de interface | Claros e previsíveis | Melhor limitado a uma ou duas áreas de ênfase |
| Clima e profundidade | Limitados | Excelentes |
| Tamanho de arquivo e esforço | Trivial | Pequeno em CSS, maior como imagem e vídeo |

A cor chapada é o padrão mais seguro para a função. Os gradientes são a escolha mais forte para a expressão.

## A questão da legibilidade

Em um fundo chapado, se uma palavra passa no contraste, todas passam. Em um gradiente, o contraste muda conforme a cor muda, então um título pode se ler perfeitamente em uma ponta e desaparecer na outra. Meça sempre o contraste no ponto mais claro atrás de um texto claro, ou no mais escuro atrás de um texto escuro. O método completo está em [texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) e em [contraste de cor e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility).

Um post vertical em que um título atravessa as partes clara e escura de um gradiente

Um gradiente passando direto pelas palavras: o contraste muda letra a letra.

O mesmo post com uma área mais calma e uniforme do gradiente atrás do título

O mesmo gradiente abrindo espaço para as palavras: a expressão fica, a legibilidade volta.

## Uma breve história: chapado e, depois, gradientes de novo

Ao longo dos anos 2000, as telas eram brilhantes: botões chanfrados, reflexos de vidro e texturas imitando couro e papel. No início dos anos 2010, os grandes sistemas operacionais passaram ao design chapado, com cores sólidas, ícones simples e nenhuma profundidade falsa, e boa parte da web foi atrás. A partir de meados dos anos 2010, gradientes mais suaves voltaram, agora como misturas lisas de duas ou três cores em vez de efeitos brilhantes, e alguns ícones de marca muito visíveis passaram a usar gradientes. Mais em [a história dos gradientes](https://gradiently.design/pt-br/guide/history-of-gradients).

A lição é que nenhum dos estilos é moderno para sempre. O que data um design é o tratamento específico: o brilho pesado data um gradiente, e uma paleta de fábrica data a cor chapada.

## Como decidir para cada superfície

1. **Pergunte para que serve a superfície** Se ela ajuda as pessoas a agir, ler ou comparar, incline-se para o chapado. Se define um clima ou apresenta a marca, incline-se para o gradiente.
2. **Confira o tamanho** Abaixo mais ou menos do tamanho de um ícone, use chapado. Gradientes precisam de espaço para mostrar a mistura.
3. **Confira como será reproduzido** Uma tinta, uma linha de bordado ou uma gravação significam chapado. Telas e impressão em cores completas podem levar um gradiente.
4. **Confira as palavras** Texto longo pede um fundo chapado ou muito calmo. Um título pode ficar sobre um gradiente se o contraste se mantiver no pior ponto.
5. **Mantenha-os relacionados** Tire suas cores chapadas do seu gradiente para os dois sempre parecerem uma só marca.

### Escolha chapado para

- Favicons, selos de app e ícones pequenos
- Botões, interruptores, abas e estados de formulário
- Páginas de texto corrido e tabelas de dados
- Bordado, carimbos e impressão de uma tinta

### Escolha gradiente para

- Capas, cartazes e posts sociais
- Heroes de sites e páginas de lançamento
- Campos de marca atrás de logos e títulos
- Loops, papéis de parede e aberturas de apresentação

## Use os dois: um gradiente com uma reserva chapada

Os sistemas mais fortes tratam o gradiente como assinatura e escolhem uma ou duas cores chapadas de dentro dele para os trabalhos do dia a dia. O tom mais profundo vira a cor do texto ou dos ícones, um tom médio vira a cor dos botões, e o gradiente em si aparece em capas, heroes e posts. É assim que se tem expressão e função sem duas paletas sem relação. O [branding com gradiente](https://gradiently.design/pt-br/guide/gradient-branding) mostra o caminho.

- Profundo: texto e ícones: #2e1065
- Principal: botões, reserva: #6d28d9
- Claro: destaques: #c084fc
- Tom leve: superfícies calmas: #f5f3ff

Cores chapadas tiradas do gradiente violeta acima. Cada uma tem uma função, e juntas sempre combinam com o gradiente.

Todo Mark do Gradiently é um gradiente com a sua própria paleta embutida, então as cores chapadas para texto, botões e tamanhos pequenos vêm da mesma receita do fundo.

## FAQ

### O design chapado é melhor que os gradientes?

Nenhum é melhor em todo lugar. A cor chapada é a melhor para tamanhos pequenos, interfaces e impressão em uma cor; os gradientes são os melhores para superfícies grandes e expressivas e para a distinção.

### Os gradientes estão ultrapassados?

Não. Gradientes brilhantes e pesados parecem datados, mas gradientes suaves de duas ou três cores são muito usados em identidades de marca e interfaces atuais.

### Meu logo deve ser um gradiente ou uma cor chapada?

Muitos logos usam uma versão em gradiente para telas grandes e uma versão chapada para tamanhos pequenos e impressão em uma cor. Você precisa da versão chapada de qualquer jeito.

### O texto é mais difícil de ler sobre um gradiente?

Pode ser, porque o contraste muda ao longo do gradiente. Confira o contraste no pior ponto atrás do texto ou mantenha uma área calma para as palavras.

### Posso usar gradientes e cores chapadas juntos?

Sim, e a maioria das marcas fortes faz isso. Tire as cores chapadas de dentro do gradiente para tudo combinar.