Degradê azul-marinho: códigos escuros e confiáveis

Um degradê azul-marinho mistura azuis profundos, normalmente de um marinho quase preto, como #0b1630, até um azul royal ou índigo mais claro. Ele passa calma, seriedade e confiança, e deixa o texto branco nítido. O problema é que o marinho está em todo lugar em finanças, direito e design corporativo, então um degradê marinho simples costuma parecer o padrão de fábrica. Os códigos abaixo dão ao marinho luz, temperatura e um acento, para que ele mantenha a confiança e ganhe personalidade.

Códigos clássicos de degradê azul-marinho

Estes são os confiáveis, próximos do marinho puro, com movimento suficiente apenas para não parecerem um preenchimento chapado. São ideais para slides, relatórios anuais, cabeçalhos de e-mail e rodapés de sites.

Degradês marinho com um toque de cor

Incline o marinho alguns graus para o violeta e ele vira noite e luxo; incline para o verde-azulado e ele vira mar e tecnologia. Qualquer um dos dois desvios dá a sensação de escolha. A ponta mais clara ainda deve ficar escura o bastante para o texto branco em quase toda a área.

Marinho com dourado, cobre ou prata

Poucos fundos combinam tão bem com um acento metálico quanto o marinho. Dourado sobre marinho é tradicional e festivo; cobre é mais quente e moderno; prata é fria e discreta. Mantenha o metal pequeno, como uma luz no canto ou um filete fino, para que o marinho continue fazendo a maior parte do trabalho. Degradês dourados e degradês prateados mostram o lado metálico em detalhe.

Degradês marinho meia-noite para noite e luxo

Misturas radiais lembram um céu depois do pôr do sol ou uma sala à meia-luz. Combinam com convites de gala, bares de hotel, joias, relógios e rádio da madrugada. Para a versão estrelada, veja os degradês de céu noturno.

Onde os degradês marinho se destacam

O marinho funciona melhor onde as palavras importam mais que a imagem, porque dá ao texto um fundo calmo e de alto contraste. Alguns usos que vale copiar:

• Slides em 1920×1080: “Marinho clássico” para divisores de seção, com um filete dourado sob cada título.
• Banner de perfil do LinkedIn em 1584×396: “Marinho e verde-azulado” da esquerda para a direita, mais escuro atrás da sua foto.
• Cabeçalho de e-mail em 1200×600: “Marinho tinta” com um título em marfim, para o cabeçalho já ficar à vontade em caixas de entrada no modo escuro.
• Convites de formatura e premiação: “Luz dourada sobre marinho” impresso em panfleto A5.
• Gráficos e painéis: um fundo marinho profundo faz as cores vivas dos dados se distinguirem com facilidade.

Como fazer o marinho parecer menos corporativo

Nenhuma dessas mudanças custa confiança. Elas só tornam a marca reconhecível num relance, o que importa quando todo concorrente usa o mesmo azul. Ativos de marca distintivos explica por que o reconhecimento vem de ter algo que ninguém mais usa. Um bom teste: cubra o logotipo e pergunte se alguém ainda perceberia que o design é seu. Com um degradê marinho simples, a resposta quase sempre é não.

CSS de degradê marinho sem faixas

Misturas escuras e sutis são onde as faixas mais aparecem: você vê degraus visíveis em vez de uma transição suave, sobretudo depois que uma plataforma recomprime a imagem. Na web, algumas paradas extras e uma camada de grão escondem o problema. Banding em degradês explica a causa.

.hero-navy {
  position: relative;
  background-color: #0b1630; /* fallback */
  background-image:
    radial-gradient(circle at 85% 15%, rgb(212 166 74 / 0.35) 0%, transparent 35%),
    linear-gradient(160deg, #1e3a8a 0%, #172554 45%, #0f1d3a 75%, #0b1630 100%);
  color: #f8f6f1;
}

/* fine grain on top to break up banding */
.hero-navy::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("/grain.png"); /* a small tiling noise image */
}

O texto é a parte fácil com o marinho. Branco e marfim passam no contraste com folga sobre todos os marinhos acima, e o ouro velho #d4a64a chega a cerca de 8 para 1 sobre o meia-noite, então serve para títulos. O ponto de atenção é o azul vivo: um azul médio como #3b82f6 atrás de texto branco cai para cerca de 3,7 para 1. No Gradiently, a Tinta automática cuida disso linha a linha, escolhendo o texto na paleta do próprio Mark, e o Designer pode montar uma campanha marinho inteira na voz do seu kit de marca.