# Gradiente ou cor lisa? Quando ganha cada um

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

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

## The short version

- A cor lisa ganha onde contam a clareza, a reprodução exata e os tamanhos pequenos, como ícones, controlos de interface, fundos de texto corrido e impressão a uma cor.
- Os gradientes ganham onde uma superfície precisa de ambiente, profundidade ou distinção, como fundos, capas, cabeçalhos, publicações de redes sociais e campos de marca.
- O contraste de um gradiente muda ao longo da superfície, por isso o texto sobre ele tem de ser verificado no pior ponto e não na média.
- A maioria das identidades visuais fortes usa um gradiente como assinatura e uma cor lisa tirada dele como reserva do dia a dia.
- Os ecrãs passaram de estilos brilhantes e texturados para o design plano no início da década de 2010 e voltaram depois a gradientes mais suaves, por isso nenhum é simplesmente moderno ou datado.

Na questão **gradiente ou design plano**, nenhum lado ganha em todo o lado. A cor lisa é mais clara, reproduz-se com exatidão e sobrevive a tamanhos minúsculos e à impressão a uma cor. Os gradientes trazem ambiente, sugerem luz e profundidade e dão a uma marca muito mais espaço para ser distintiva. A resposta prática para a maioria das marcas é usar os dois: um gradiente onde a superfície é grande e expressiva, e uma cor lisa, tirada do gradiente, onde a tarefa é pequena, funcional ou impressa numa só tinta.

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

O mesmo violeta como preenchimento liso e como gradiente construído à volta dele. Um é uma cor; o outro é uma superfície com luz.

## Onde a cor lisa ganha

- **Tamanhos pequenos:** favicons, emblemas de aplicações e ícones perdem o detalhe de um gradiente, enquanto uma cor lisa se mantém nítida
- **Controlos de interface:** botões, interruptores e estados lêem-se com mais clareza quando cada estado é uma só cor
- **Por trás de texto longo:** o contraste constante faz com que todas as linhas sejam igualmente legíveis
- **Impressão a uma cor:** bordado, serigrafia, gravação, carimbos e trabalhos de uma só tinta não reproduzem uma mistura
- **Correspondência exata:** uma única cor direta pode ser igualada entre materiais com muito mais fiabilidade do que uma mistura
- **Gráficos e dados:** as cores lisas mantêm as categorias distintas e comparáveis

## Onde os gradientes ganham

- **Superfícies grandes:** fundos, capas, cabeçalhos e cartazes onde a cor lisa parece vazia
- **Ambiente e luz:** uma mistura sugere uma hora do dia, um material ou um brilho que uma só cor não consegue
- **Distinção:** só há um certo número de tons únicos distinguíveis, e a maioria está tomada em qualquer categoria
- **Feeds de redes sociais:** um campo de gradiente bem construído destaca-se num scroll de fotografias e modelos lisos
- **Profundidade em interfaces:** um gradiente subtil num cabeçalho ou num cartão principal separa camadas sem sombras
- **Movimento:** os gradientes podem derivar e respirar; vê [fundos de gradiente animados](https://gradiently.design/pt-pt/guide/animated-gradient-background)

## Gradiente ou liso, fator a fator

| Fator | Cor lisa | Gradiente |
| --- | --- | --- |
| Legibilidade | Contraste constante em todo o lado | O contraste varia; verifica o pior ponto |
| Reconhecimento | Forte se fores dono de um tom raro | Forte se a receita se mantiver consistente |
| Distinção | Limitada pelo número de tons | Um espaço enorme de combinações |
| Tamanhos pequenos | Excelente | Muitas vezes baço ou perdido |
| Impressão | Exata, mesmo numa só tinta | Pede cor completa; pode formar faixas ou mudar |
| Estados de interface | Claros e previsíveis | Melhor reservado a uma ou duas zonas de destaque |
| Ambiente e profundidade | Limitados | Excelentes |
| Tamanho do ficheiro e esforço | Trivial | Pequeno em CSS, maior como imagens e vídeo |

A cor lisa é a opção mais segura para a função. Os gradientes são a escolha mais forte para a expressão.

## A questão da legibilidade

Sobre um fundo liso, se uma palavra passa no contraste, todas passam. Sobre um gradiente, o contraste muda com a cor, por isso um título pode ler-se na perfeição numa ponta e desaparecer na outra. Mede sempre o contraste no ponto mais claro por trás de texto claro, ou no ponto mais escuro por trás de texto escuro. O método completo está em [texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) e em [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility).

Uma publicação vertical em que um título atravessa as partes claras e escuras de um gradiente

Um gradiente a passar diretamente pelas palavras: o contraste muda letra a letra.

A mesma publicação com uma zona mais calma e uniforme do gradiente por trás do título

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

## Uma breve história: plano, e depois gradientes outra vez

Ao longo dos anos 2000, os ecrãs eram brilhantes: botões com bisel, realces vítreos e texturas a imitar couro e papel. No início da década de 2010, os principais sistemas operativos passaram ao design plano, com cores lisas, ícones simples e sem profundidade falsa, e grande parte da web seguiu-os. A partir de meados da década de 2010, os gradientes mais suaves regressaram, agora como misturas lisas de duas ou três cores e não como efeitos brilhantes, e alguns ícones de marca muito visíveis passaram a gradientes. Mais em [a história dos gradientes](https://gradiently.design/pt-pt/guide/history-of-gradients).

A lição é que nenhum estilo é moderno para sempre. O que data um design é o tratamento específico: o brilho excessivo data um gradiente, e uma paleta por defeito data a cor lisa.

## Como decidir para cada superfície

1. **Pergunta para que serve a superfície** Se ajuda as pessoas a agir, ler ou comparar, inclina-te para o liso. Se cria um ambiente ou apresenta a marca, inclina-te para o gradiente.
2. **Verifica o tamanho** Abaixo de mais ou menos o tamanho de um ícone, usa liso. Os gradientes precisam de espaço para mostrar a mistura.
3. **Verifica como vai ser reproduzido** Uma só tinta, fio ou gravação significa liso. Os ecrãs e a impressão a cores podem levar um gradiente.
4. **Verifica as palavras** O texto longo pede uma base lisa ou muito calma. Um título pode assentar num gradiente se o contraste se mantiver no pior ponto.
5. **Mantém-nos relacionados** Tira as tuas cores lisas do teu gradiente para os dois parecerem sempre uma só marca.

### Escolhe liso para

- Favicons, emblemas de aplicações e ícones pequenos
- Botões, interruptores, separadores e estados de formulários
- Páginas de texto corrido e tabelas de dados
- Bordado, carimbos e impressão a uma só tinta

### Escolhe gradiente para

- Capas, cartazes e publicações de redes sociais
- Cabeçalhos de sites e páginas de lançamento
- Campos de marca por trás de logótipos e títulos
- Ciclos, papéis de parede e aberturas de apresentações

## Usa os dois: um gradiente com uma reserva lisa

Os sistemas mais fortes tratam o gradiente como a assinatura e escolhem uma ou duas cores lisas de dentro dele para as tarefas do dia a dia. O tom mais profundo passa a ser a cor do texto ou dos ícones, um tom médio passa a ser a cor dos botões, e o próprio gradiente aparece em capas, cabeçalhos e publicações. É assim que tens expressão e função sem duas paletas sem relação. [Branding com gradientes](https://gradiently.design/pt-pt/guide/gradient-branding) explica o processo.

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

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

Cada Mark da Gradiently é um gradiente com a sua própria paleta incorporada, por isso as cores lisas para texto, botões e tamanhos pequenos vêm da mesma receita que o fundo.

## FAQ

### O design plano é melhor do que os gradientes?

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

### Os gradientes estão ultrapassados?

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

### O meu logótipo deve ter gradiente ou cor lisa?

Muitos logótipos usam uma versão com gradiente para uso grande em ecrã e uma versão lisa para tamanhos pequenos e impressão a uma cor. Precisas da versão lisa de qualquer forma.

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

Pode ser, porque o contraste muda ao longo do gradiente. Verifica o contraste no pior ponto por trás do texto, ou mantém uma zona calma para as palavras.

### Posso usar gradientes e cores lisas em conjunto?

Sim, e a maioria das marcas fortes fá-lo. Tira as cores lisas de dentro do gradiente para tudo condizer.