A versão curta
- Um gradiente azul mistura tons de azul, muitas vezes com um verde-azulado, ciano ou violeta vizinho, do gelo pálido ao azul-marinho profundo.
- O azul associa-se amplamente à calma, à fiabilidade e à tecnologia, o que o torna popular e fácil de confundir com o de toda a gente.
- O azul mistura-se com limpeza com verde-azulado, ciano, índigo e violeta, mas tende a ficar cinzento quando misturado diretamente com laranja ou amarelo.
- O texto branco funciona sobre azuis profundos e médios como #1e3a8a e #2563eb, mas falha para texto corrido sobre azuis mais claros como #3b82f6.
- Inclinar um gradiente azul para o verde-azulado ou o violeta, ir para mais profundo ou mais pálido e juntar um destaque quente são as formas mais rápidas de fugir ao visual corporativo.
Nesta página
Um gradiente azul mistura tons de azul, muitas vezes com um verde-azulado, ciano ou violeta vizinho. Pode parecer um céu limpo, um oceano profundo, um ecrã à noite ou o relatório anual de um banco, consoante os azuis que escolhes e o modo como os usas. Abaixo estão vinte paletas de gradientes azuis com CSS para copiar, agrupadas da mais pálida à mais escura, seguidas das cores de texto que funcionam sobre elas e de como evitar que o azul fique sem graça.
Gradientes azuis claros: gelo e céu
Os gradientes azuis pálidos parecem abertos, limpos e silenciosos. Servem a saúde, as viagens, o bem-estar e as páginas de produto que precisam de espaço. Usa tinta escura sobre eles e junta um toque de calor ou de lilás para não parecerem frios e clínicos.
Gradientes de azul oceano e verde-azulado
Inclinar o azul para o verde dá-lhe vida. Os gradientes de oceano parecem frescos e naturais e evitam as associações corporativas do azul puro. Servem marcas de viagens, comida, sustentabilidade e ar livre.
Gradientes azuis vivos e elétricos
Os azuis saturados são enérgicos e técnicos. Servem lançamentos, aplicações, desporto e eventos. São também os azuis mais comuns na web, por isso são os que mais beneficiam de uma forma inesperada ou de um destaque quente.
Gradientes azuis escuros e de meia-noite
Os gradientes de azul-marinho profundo e de meia-noite parecem sérios, sofisticados e calmos. São excelentes bases para letra branca e para destaques brilhantes. Atenção às bandas, que aparecem com facilidade em azuis lentos e escuros; um grão fino resolve-as. Vê as bandas em gradientes.
Que gradiente azul para que trabalho
Vinte paletas são muitas para escolher. Parte do trabalho que o design tem de fazer e das palavras que tem de carregar e escolhe no grupo correspondente.
| Trabalho | Experimenta | Porquê |
|---|---|---|
| Página calma de produto ou saúde | 1, 3, 4 | Pálido, aberto, fácil sob texto escuro |
| Viagens, comida, ar livre | 6, 8, 10 | O azul inclinado para o verde parece natural |
| Lançamento de aplicação ou evento de tecnologia | 11, 13, 15 | Saturado e iluminado, lê-se como energia |
| Sofisticado ou finanças | 16, 17, 19 | As bases profundas parecem sérias e aguentam letra branca |
| Algo memorável | 2, 14, 20 | Uma nota quente faz o azul parecer específico |
O que o azul sinaliza e o problema da falta de graça
Em grande parte do mundo, o azul associa-se à calma, à fiabilidade e à profundidade, em parte por causa do céu e da água. É por isso que é tão comum na banca, nos seguros, na saúde e na tecnologia. É também por isso que um gradiente de azul médio raramente ajuda alguém a reconhecer-te: parece a categoria e não a empresa. A psicologia das cores explica porque a convenção corta nos dois sentidos.
Azul corporativo
- Um azul médio para um azul mais claro a 135 graus
- Azul primário puro e totalmente saturado
- Liso e plano, sem textura
- Azul em todo o lado, nada quente
Azul distintivo
- Inclinado para o verde-azulado, índigo ou violeta
- Muito profundo ou muito pálido, não o meio
- Grão, brilho ou um suave resplendor
- Um destaque quente: coral, dourado ou alperce
O azul mistura-se bem com os vizinhos: verde-azulado, ciano, índigo e violeta. Mistura-se mal com os opostos. O azul diretamente para laranja ou amarelo passa por um meio acinzentado, por isso mantém curtos os destaques quentes ou faz passá-los por violeta ou rosa. As cores complementares explicam porquê.
Texto sobre gradientes azuis
| Texto sobre fundo | Contraste | Veredicto |
|---|---|---|
Branco sobre #0b1437 | 18,0:1 | Excelente |
Branco sobre #1e3a8a | 10,4:1 | Excelente |
Branco sobre #2563eb | 5,2:1 | Bom para texto corrido |
Branco sobre #3b82f6 | 3,7:1 | Só texto grande |
#0b1a33 sobre #60a5fa | 6,8:1 | A tinta escura funciona aqui |
#0b1a33 sobre #bae6fd | 13,1:1 | Excelente |
A armadilha está no meio da gama de azuis: um azul-centáurea vivo como #3b82f6 parece forte o bastante para texto branco mas fica abaixo de 4,5:1. Num gradiente, verifica o contraste onde o azul é mais claro por trás das tuas palavras. O texto sobre um gradiente tem o método completo.
Um campo profundo faz um número dizer tudo.
Um story mais calmo, com muito espaço aberto.
.hero {
background-color: #0b1437;
background-image: linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%);
color: #ffffff;
}Exportar um gradiente azul como imagem para redes sociais precisa de um passo extra. As plataformas voltam a comprimir os carregamentos, e os azuis lentos e escuros estão entre as primeiras cores a quebrar em bandas visíveis. Exporta no tamanho recomendado pela plataforma, junta um grão fino antes de guardar e usa PNG onde a plataforma o aceitar. Os gradientes com grão mostram quanto grão é suficiente.
Para os roxos ao lado do azul, vê os gradientes roxos; para opções mais verdes, vê os gradientes verdes.
Perguntas frequentes
Que cores combinam bem com o azul num gradiente?
O verde-azulado, o ciano, o índigo e o violeta misturam-se com limpeza com o azul. As cores quentes como o coral e o dourado dão bons destaques se forem curtas, porque misturar o azul diretamente com laranja ou amarelo dá cinzento.
Qual é um bom código CSS para um gradiente azul?
Para um azul profundo e calmo, experimenta linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%). Todas as paletas desta página podem ser copiadas como CSS.
O texto branco é legível sobre um gradiente azul?
Em azuis profundos e médio-escuros, sim. Em azuis mais claros como #3b82f6, o texto branco fica abaixo do rácio de 4,5:1 recomendado para texto corrido.
Como faço um gradiente azul parecer menos corporativo?
Inclina-o para o verde-azulado ou o violeta, escolhe azuis muito profundos ou muito pálidos em vez do azul médio, junta grão e usa um pequeno destaque quente.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil
