Resumindo
- Um gradiente azul mistura tons de azul, muitas vezes com um vizinho verde-azulado, ciano ou violeta, do gelo pálido ao azul-marinho profundo.
- O azul é muito associado a calma, confiabilidade e tecnologia, o que o torna popular e fácil de confundir com o de todo mundo.
- O azul se mistura bem com verde-azulado, ciano, índigo e violeta, mas tende a ficar cinza quando misturado diretamente com laranja ou amarelo.
- O texto branco funciona sobre azuis profundos e médios como #1e3a8a e #2563eb, mas falha em azuis mais claros como #3b82f6 no texto corrido.
- Inclinar um gradiente azul para o verde-azulado ou o violeta, ir mais fundo ou mais pálido e acrescentar um destaque quente são as formas mais rápidas de escapar do visual corporativo.
Nesta página
Um gradiente azul mistura tons de azul, muitas vezes com um vizinho verde-azulado, ciano ou violeta. Pode parecer um céu limpo, um oceano profundo, uma tela à noite ou o relatório anual de um banco, dependendo dos azuis que você escolhe e de como os usa. Abaixo estão vinte paletas de gradiente azul 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
Gradientes azuis pálidos parecem abertos, limpos e silenciosos. Combinam com saúde, viagens, bem-estar e páginas de produto que precisam de espaço. Use tinta escura sobre eles e acrescente um toque de calor ou lilás para que não pareçam frios e clínicos.
Gradientes azuis oceânicos e verde-azulados
Inclinar o azul para o verde dá vida a ele. Os gradientes oceânicos parecem frescos e naturais e escapam das associações corporativas do azul puro. Combinam com marcas de viagem, comida, sustentabilidade e atividades ao ar livre.
Gradientes azuis vivos e elétricos
Azuis saturados são enérgicos e técnicos. Combinam com lançamentos, apps, esporte e eventos. Também são os azuis mais comuns na web, então se beneficiam mais de uma forma inesperada ou de um destaque quente.
Gradientes azul-escuros e meia-noite
Gradientes de azul-marinho profundo e meia-noite parecem sérios, sofisticados e calmos. São ótimas bases para texto branco e destaques brilhantes. Atenção ao banding, que aparece com facilidade em azuis lentos e escuros; um grão fino resolve. Veja o banding em gradientes.
Qual gradiente azul para qual trabalho
Vinte paletas são muitas para escolher. Comece pelo trabalho que o design precisa fazer e pelas palavras que precisa carregar e depois escolha no grupo correspondente.
| Trabalho | Experimente | Por quê |
|---|---|---|
| Página calma de produto ou de saúde | 1, 3, 4 | Pálidos, abertos, fáceis sob texto escuro |
| Viagem, comida, ar livre | 6, 8, 10 | O azul inclinado ao verde parece natural |
| Lançamento de app ou evento de tecnologia | 11, 13, 15 | Saturados e iluminados, transmitem energia |
| Premium ou finanças | 16, 17, 19 | Bases profundas parecem sérias e sustentam texto branco |
| Algo memorável | 2, 14, 20 | Uma nota quente faz o azul parecer específico |
O que o azul sinaliza e o problema da mesmice
Em boa parte do mundo, o azul é associado a calma, confiabilidade e profundidade, em parte por causa do céu e da água. É por isso que é tão comum em bancos, seguros, saúde e tecnologia. É também por isso que um gradiente de azul médio raramente ajuda alguém a reconhecer você: ele parece a categoria, e não a empresa. A psicologia das cores explica por que a convenção corta para os dois lados.
Azul corporativo
- Um azul médio a um azul mais claro a 135 graus
- Azul primário puro e totalmente saturado
- Liso e chapado, sem textura
- Azul em todo lugar, nada de quente
Azul distintivo
- Inclinado ao verde-azulado, ao índigo ou ao violeta
- Muito profundo ou muito pálido, não o do meio
- Grão, brilho ou um brilho suave
- Um destaque quente: coral, dourado ou damasco
O azul se mistura bem com os vizinhos: verde-azulado, ciano, índigo e violeta. Mistura mal com os opostos. O azul direto no laranja ou no amarelo passa por um meio acinzentado, então mantenha os destaques quentes curtos ou passe-os por violeta ou rosa. As cores complementares explicam por quê.
Texto sobre gradientes azuis
| Texto sobre o fundo | Contraste | Veredito |
|---|---|---|
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 | Tinta escura funciona aqui |
#0b1a33 sobre #bae6fd | 13,1:1 | Excelente |
A armadilha está no meio da faixa de azuis: um azul-centáurea brilhante como #3b82f6 parece forte o bastante para texto branco, mas fica abaixo de 4,5:1. Num gradiente, confira o contraste onde o azul é mais claro atrás das suas palavras. O guia de texto sobre um gradiente traz o método completo.
Um campo profundo faz um único número falar por tudo.
Um story mais calmo, com bastante espaço livre.
.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 exige mais um passo. As plataformas recomprimem os uploads, e os azuis lentos e escuros estão entre as primeiras cores a se quebrar em faixas visíveis. Exporte no tamanho recomendado pela plataforma, acrescente um grão fino antes de salvar e use PNG onde a plataforma aceitar. Os gradientes com grão mostram quanto grão é suficiente.
Para os roxos vizinhos do azul, veja os gradientes roxos; para opções mais esverdeadas, veja os gradientes verdes.
Perguntas frequentes
Que cores combinam com o azul num gradiente?
Verde-azulado, ciano, índigo e violeta se misturam bem com o azul. Cores quentes como coral e dourado dão bons destaques se forem curtas, porque misturar o azul direto no laranja ou no amarelo deixa cinza.
Qual é um bom código CSS para um gradiente azul?
Para um azul profundo e calmo, experimente linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%). Toda paleta desta página pode ser copiada 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 da razão de 4,5:1 recomendada para texto corrido.
Como faço um gradiente azul parecer menos corporativo?
Incline-o para o verde-azulado ou o violeta, escolha azuis muito profundos ou muito pálidos em vez do azul médio, acrescente grão e use um pequeno destaque quente.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
