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

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

O azul-marinho é a cor de uniformes, bancos e bons ternos, e é justamente por isso que ele pode parecer igual ao de todo banco. Estes códigos mantêm a confiança e perdem o tédio.

## The short version

- Um degradê azul-marinho mistura azuis bem escuros, em geral de um marinho quase preto até um azul royal ou índigo mais vivo.
- O azul-marinho transmite seriedade, confiança e tradição, por isso finanças, direito e educação o usam tanto.
- Para o marinho não parecer genérico, acrescente uma fonte de luz, incline-o um pouco para o violeta ou o verde-azulado, ou combine-o com um acento metálico quente, como dourado ou cobre.
- Texto branco e cinza claro se lê bem sobre o marinho; texto dourado também funciona, se o dourado for claro o bastante.
- Degradês marinho escuros formam faixas com facilidade em imagens comprimidas, então use um grão leve e exporte no tamanho real.

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.

- 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 de giz: `linear-gradient(90deg, #0f1d3a 0%, #1d3461 100%)`
- Faixa iluminada: `linear-gradient(180deg, #0b1630 0%, #13254d 50%, #0b1630 100%)`

Cinco misturas próximas do marinho. Sutis de propósito: sustentam texto, logotipos e gráficos sem competir com eles.

| Nome | Hex | Use como |
| --- | --- | --- |
| Marinho (nome CSS) | `#000080` | Só como referência; fica agressivo nas telas |
| Meia-noite | `#0b1630` | O tom mais escuro, quase preto |
| 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 ponto de luz |

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

## 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 para índigo: `linear-gradient(135deg, #312e81 0%, #172554 50%, #0b1630 100%)`
- Violeta royal: `linear-gradient(135deg, #4c1d95 0%, #1e3a8a 100%)`
- Marinho e verde-azulado: `linear-gradient(160deg, #0f766e 0%, #172554 60%, #0b1022 100%)`
- Elétrico para marinho: `linear-gradient(135deg, #2563eb 0%, #1e3a8a 45%, #0b1630 100%)`

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

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

- 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%)`
- Borda prateada: `linear-gradient(135deg, #e5e7eb 0%, #94a3b8 20%, #1e3a8a 55%, #0b1630 100%)`

O metal fica pequeno e em um só lugar. O olhar vai primeiro para ele e depois para as suas 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 detalhes secundários.

## 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](https://gradiently.design/pt-br/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. O tom mais escuro fica perto do preto, mas o azul evita que pareça vazio.

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

### Parece todo banco

- `#000080` chapado com um logotipo branco
- Um degradê reto de cima para baixo
- Botões em azul médio vivo
- Foto de banco de imagens de um aperto de mão

### Parece pensado

- Um marinho suavizado, inclinado para o violeta ou o verde-azulado
- Luz vindo de um só lugar
- Um acento quente: dourado, cobre ou coral
- Um grão fino que dá aspecto de impresso

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

Imagem de link do LinkedIn de uma empresa de planejamento financeiro, com texto branco sobre um degradê marinho iluminado por um canto

Uma imagem de link do LinkedIn em marinho profundo com uma luz quente. Séria, mas não anônima.

O mesmo design de planejamento financeiro como post vertical sobre o degradê marinho

O mesmo design como post vertical, com a luz movida para se adaptar ao quadro mais alto.

## 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](https://gradiently.design/pt-br/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 */
}
```

Paradas extras no meio suavizam a transição, uma luz dourada leve dá calor e uma camada de grão esconde os degraus que sobrarem.

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

## FAQ

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

A cor nomeada `navy` do CSS é `#000080`. Versões mais suaves, como `#172554` ou `#0b1630`, costumam ficar melhores nas telas.

### Que cores combinam com um degradê azul-marinho?

Dourado, cobre, marfim, ardósia e coral. Um único acento quente evita que o marinho pareça frio ou corporativo.

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

Ele transmite seriedade e confiança, então combina com finanças, direito e educação. Como muitos concorrentes o usam, acrescente luz ou um acento para continuar reconhecível.

### Por que meu degradê marinho mostra listras?

Isso é banding, comum em transições escuras e sutis. Use mais paradas, uma camada leve de grão e evite compressão JPEG forte.

### Posso usar texto dourado sobre azul-marinho?

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