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

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

O azul-marinho é a cor de uniformes, bancos e bons fatos, e é exatamente por isso que pode parecer igual a todos os outros bancos. Estes códigos mantêm a confiança e perdem o tédio.

## The short version

- Um gradiente azul-marinho mistura azuis muito escuros, normalmente de um marinho quase preto a um azul-royal ou índigo mais vivo.
- O azul-marinho lê-se como sério, fiável e estabelecido, e é por isso que as finanças, o direito e a educação o usam tantas vezes.
- Para que o marinho não pareça genérico, acrescenta uma fonte de luz, inclina-o ligeiramente para violeta ou azul-petróleo, ou combina-o com um acento metálico quente como dourado ou cobre.
- O texto branco e cinzento-claro lê-se facilmente sobre marinho; o texto dourado também funciona se for suficientemente claro.
- Os gradientes marinho escuros fazem banding com facilidade em imagens comprimidas, por isso junta grão leve e exporta em tamanho completo.

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.

- Marinho clássico: `linear-gradient(180deg, #1e3a8a 0%, #0b1630 100%)`
- Marinho tinta: `linear-gradient(135deg, #172554 0%, #0a0f24 100%)`
- Uniforme: `linear-gradient(160deg, #1e40af 0%, #172554 60%, #0b1022 100%)`
- Risca fina: `linear-gradient(90deg, #0f1d3a 0%, #1d3461 100%)`
- Faixa iluminada: `linear-gradient(180deg, #0b1630 0%, #13254d 50%, #0b1630 100%)`

Cinco misturas próximas do marinho. Subtis de propósito: levam texto, logótipos e gráficos sem competir.

| Nome | Hex | Usar como |
| --- | --- | --- |
| Marinho (nome CSS) | `#000080` | Só como referência; parece duro em ecrãs |
| Meia-noite | `#0b1630` | A paragem mais escura, quase preta |
| Marinho profundo | `#172554` | Um fundo para texto branco |
| Marinho royal | `#1e3a8a` | A ponta clara de uma mistura clássica |
| Azul-royal | `#1e40af` | Um realce ou luz |

Códigos hex de marinho que se misturam bem. O marinho com nome em CSS é muito saturado; versões mais suaves parecem mais refinadas.

## 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.

- Do marinho ao índigo: `linear-gradient(135deg, #312e81 0%, #172554 50%, #0b1630 100%)`
- Violeta royal: `linear-gradient(135deg, #4c1d95 0%, #1e3a8a 100%)`
- Marinho e azul-petróleo: `linear-gradient(160deg, #0f766e 0%, #172554 60%, #0b1022 100%)`
- Elétrico a marinho: `linear-gradient(135deg, #2563eb 0%, #1e3a8a 45%, #0b1630 100%)`

Marinho com uma inclinação. Índigo e violeta parecem premium, azul-petróleo parece fresco, um canto azul vivo parece técnico.

## 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](https://gradiently.design/pt-pt/guide/gold-gradient-design) e os [gradientes prateados](https://gradiently.design/pt-pt/guide/silver-gradient) mostram o lado metálico em pormenor.

- Luz dourada sobre marinho: `radial-gradient(circle at 85% 15%, #f2d27a 0%, #b8862b 15%, #172554 45%, #0b1630 100%)`
- Canto de cobre: `radial-gradient(circle at 15% 85%, #e8a87c 0%, #b4532a 18%, #1e293b 50%, #0b1630 100%)`
- Bordo de prata: `linear-gradient(135deg, #e5e7eb 0%, #94a3b8 20%, #1e3a8a 55%, #0b1630 100%)`

Metal pequeno e num só sítio. O olho vai primeiro para aí e depois para as tuas palavras.

- Meia-noite: #0b1630
- Marinho profundo: #172554
- Marinho royal: #1e3a8a
- Ouro velho: #d4a64a
- Marfim: #f8f6f1
- Ardósia: #94a3b8

Um sistema marinho e dourado: três marinhos, um acento dourado, marfim para o texto e ardósia para o pormenor secundário.

## 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](https://gradiently.design/pt-pt/guide/night-sky-gradient).

- Depois do pôr do sol: `radial-gradient(ellipse at 50% 0%, #1e40af 0%, #172554 40%, #070b18 100%)`
- Sala de veludo: `radial-gradient(circle at 30% 70%, #312e81 0%, #0b1630 55%, #05070f 100%)`
- Brilho da cidade: `radial-gradient(ellipse at 50% 110%, #3b82f6 0%, #1e3a8a 25%, #0b1630 60%, #05070f 100%)`

Marinho com uma luz suave. A paragem mais escura é quase preta, mas o azul impede-a de parecer vazia.

## 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

### Parece igual a todos os bancos

- `#000080` liso com um logótipo branco
- Um esbatimento reto de cima a baixo
- Botões em azul médio vivo
- Fotografia de banco de imagens de um aperto de mão

### Parece pensado

- Um marinho suavizado com inclinação para violeta ou azul-petróleo
- Luz a vir de um só sítio
- Um acento quente: dourado, cobre ou coral
- Um grão fino que o faz parecer impresso

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](https://gradiently.design/pt-pt/guide/distinctive-brand-assets) 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.

Uma imagem de ligação de LinkedIn de uma empresa de planeamento financeiro, com texto branco sobre um gradiente marinho iluminado a partir de um canto

Uma imagem de ligação de LinkedIn sobre um marinho profundo com uma luz quente. Séria, não anónima.

O mesmo design de planeamento financeiro como publicação vertical sobre o gradiente marinho

O mesmo design como publicação vertical, com a luz movida para se adaptar ao quadro mais alto.

## 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](https://gradiently.design/pt-pt/guide/gradient-banding) explica a causa.

```css
.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 */
}
```

Paragens intermédias extra suavizam o esbatimento, uma ténue luz dourada acrescenta calor e uma camada de grão esconde os degraus que restem.

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](https://gradiently.design/pt-pt/guide/what-is-gradiently) pode compor uma campanha marinho inteira na voz do teu kit de marca.

## FAQ

### Qual é o código hex do azul-marinho?

A cor com nome em CSS `navy` é `#000080`. Versões mais suaves como `#172554` ou `#0b1630` costumam ficar melhor em ecrãs.

### Que cores combinam com um gradiente azul-marinho?

Dourado, cobre, marfim, ardósia e coral. Um único acento quente impede o marinho de parecer frio ou corporativo.

### O azul-marinho é bom para a marca de uma empresa?

Lê-se como sério e fiável, por isso assenta às finanças, ao direito e à educação. Como tantos concorrentes o usam, acrescenta luz ou um acento para continuares reconhecível.

### Porque é que o meu gradiente marinho mostra riscas?

Isso é banding, comum em esbatimentos escuros e subtis. Junta mais paragens, uma camada leve de grão e evita compressão JPEG forte.

### Posso usar texto dourado sobre marinho?

Sim, se o dourado for suficientemente claro. `#d4a64a` sobre `#0b1630` mede cerca de 8 para 1, o que passa para títulos e texto corrido.