Gradiente azul-marinho: códigos escuros e de confiança

Um gradiente azul-marinho mistura azuis profundos, normalmente de um marinho quase preto como #0b1630 até um azul-royal ou índigo mais vivo. Lê-se como calmo, sério e fiável, e faz o texto branco parecer nítido. O problema é que o marinho está em todo o lado nas finanças, no direito e no design corporativo, por isso um esbatimento marinho liso parece muitas vezes uma predefinição. Os códigos abaixo dão ao marinho luz, temperatura e um acento, para que mantenha a confiança e ganhe personalidade.

Códigos clássicos de gradiente azul-marinho

Estes são os fiáveis, próximos do marinho puro, com apenas o movimento suficiente para não parecerem um preenchimento sólido. São ideais para diapositivos de apresentação, relatórios anuais, cabeçalhos de email e rodapés de sites.

Gradientes marinho com um toque de cor

Inclina o marinho alguns graus para violeta e passa a ser noite e luxo; inclina-o para azul-petróleo e passa a ser o mar e a tecnologia. Qualquer um dos desvios faz com que pareça escolhido. A ponta mais clara deve continuar escura o suficiente para texto branco em quase toda a área.

Marinho e dourado, cobre ou prata

Poucos fundos assentam melhor a um acento metálico do que o marinho. O dourado sobre marinho é tradicional e festivo; o cobre é mais quente e mais moderno; a prata é fria e silenciosa. Mantém o metal pequeno, como uma luz num canto ou um filete fino, para que o marinho continue a fazer a maior parte do trabalho. Os gradientes dourados e os gradientes prateados mostram o lado metálico em pormenor.

Gradientes marinho de meia-noite para noite e luxo

As misturas radiais parecem um céu depois do pôr do sol ou uma sala pouco iluminada. Assentam a convites de gala, bares de hotel, joalharia, relógios e rádio da noite. Para a versão estrelada, vê os gradientes de céu noturno.

Onde os gradientes marinho ganham o seu lugar

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

• Diapositivos a 1920×1080: “Marinho clássico” para separadores de secção, com um filete dourado sob cada título.
• Banner de perfil do LinkedIn a 1584×396: “Marinho e azul-petróleo” da esquerda para a direita, mais escuro por trás da tua fotografia.
• Cabeçalho de email a 1200×600: “Marinho tinta” com um título marfim, para que o cabeçalho já se sinta em casa em caixas de entrada em modo escuro.
• Convites de graduação e prémios: “Luz dourada sobre marinho” impresso como folheto A5.
• Gráficos e dashboards: um fundo marinho profundo torna fáceis de distinguir as cores vivas dos dados.

Como fazer o marinho parecer menos corporativo

Nenhuma destas alterações custa confiança. Apenas tornam a marca reconhecível num relance, o que importa quando todos os concorrentes usam o mesmo azul. Os materiais de marca distintivos explicam porque é que o reconhecimento vem de possuir algo que mais ninguém usa. Um teste útil: tapa o teu logótipo e pergunta se alguém ainda perceberia que o design é teu. Com um esbatimento marinho liso, a resposta é quase sempre não.

CSS de gradiente azul-marinho sem banding

As misturas escuras e subtis são onde o banding mais se vê: surgem degraus visíveis em vez de um esbatimento suave, sobretudo depois de uma plataforma recomprimir a tua imagem. Na web, algumas paragens extra e uma camada de grão escondem-no. O banding em gradientes 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. O branco e o marfim passam o contraste com folga em todos os marinhos acima, e o ouro velho #d4a64a lê-se a cerca de 8 para 1 sobre meia-noite, por isso serve para títulos. O que convém vigiar é o azul vivo: um azul médio como #3b82f6 por trás de texto branco cai para cerca de 3,7 para 1. No Gradiently, a tinta automática trata disto linha a linha, escolhendo o texto a partir da paleta do próprio Mark, e o Designer pode compor uma campanha marinho inteira na voz do teu kit de marca.