# Degradado azul marino: códigos oscuros y de confianza

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

El azul marino es el color de los uniformes, los bancos y los buenos trajes, y por eso puede parecerse a cualquier otro banco. Estos códigos conservan su confianza y pierden el aburrimiento.

## The short version

- Un degradado azul marino mezcla azules muy oscuros, normalmente de un marino casi negro a un azul real o índigo más vivo.
- El azul marino transmite seriedad, fiabilidad y solidez, y por eso lo usan tanto las finanzas, el derecho y la educación.
- Para que el azul marino no parezca genérico, añade una fuente de luz, inclínalo ligeramente hacia el violeta o el verde azulado, o combínalo con un acento metálico cálido como el oro o el cobre.
- El texto blanco y el gris claro se leen con facilidad sobre azul marino; el texto dorado también funciona si es lo bastante claro.
- Los degradados azul marino oscuros forman bandas con facilidad en imágenes comprimidas, así que añade un grano ligero y exporta a tamaño completo.

Un **degradado azul marino** mezcla azules profundos, normalmente de un marino casi negro como `#0b1630` a un azul real o índigo más vivo. Transmite calma, seriedad y fiabilidad, y hace que el texto blanco se vea nítido. El problema es que el azul marino está en todas partes en finanzas, derecho y diseño corporativo, así que un fundido marino plano suele parecer un valor por defecto. Los códigos de abajo dan al marino luz, temperatura y un acento, de modo que conserva la confianza y gana personalidad.

## Códigos clásicos de degradado azul marino

Son los de siempre, cercanos al azul marino puro, con solo el movimiento justo para que no parezcan un relleno liso. Son ideales para diapositivas, informes anuales, cabeceras de email y pies de página web.

- Marino clásico: `linear-gradient(180deg, #1e3a8a 0%, #0b1630 100%)`
- Marino tinta: `linear-gradient(135deg, #172554 0%, #0a0f24 100%)`
- Uniforme: `linear-gradient(160deg, #1e40af 0%, #172554 60%, #0b1022 100%)`
- Raya diplomática: `linear-gradient(90deg, #0f1d3a 0%, #1d3461 100%)`
- Banda iluminada: `linear-gradient(180deg, #0b1630 0%, #13254d 50%, #0b1630 100%)`

Cinco mezclas cercanas al marino. Sutiles a propósito: llevan texto, logotipos y gráficos sin competir.

| Nombre | Hex | Úsalo como |
| --- | --- | --- |
| Navy (nombre en CSS) | `#000080` | Solo de referencia; resulta duro en pantalla |
| Medianoche | `#0b1630` | La parada más oscura, casi negra |
| Marino profundo | `#172554` | Un fondo para texto blanco |
| Marino real | `#1e3a8a` | El extremo claro de una mezcla clásica |
| Azul real | `#1e40af` | Un toque de luz o reflejo |

Códigos hex de azul marino que se mezclan bien. El navy con nombre en CSS está muy saturado; las versiones más suaves se ven más refinadas.

## Degradados azul marino con un toque de color

Inclina el azul marino unos grados hacia el violeta y se vuelve noche y lujo; inclínalo hacia el verde azulado y se vuelve mar y tecnología. Cualquiera de los dos cambios hace que parezca elegido. El extremo más vivo debería seguir siendo lo bastante profundo para texto blanco en casi toda la superficie.

- De marino a índigo: `linear-gradient(135deg, #312e81 0%, #172554 50%, #0b1630 100%)`
- Violeta real: `linear-gradient(135deg, #4c1d95 0%, #1e3a8a 100%)`
- Marino y verde azulado: `linear-gradient(160deg, #0f766e 0%, #172554 60%, #0b1022 100%)`
- De eléctrico a marino: `linear-gradient(135deg, #2563eb 0%, #1e3a8a 45%, #0b1630 100%)`

Marino con inclinación. El índigo y el violeta son premium, el verde azulado es fresco, una esquina de azul vivo resulta técnica.

## Azul marino con oro, cobre o plata

Pocos fondos admiten mejor un acento metálico que el azul marino. El oro sobre marino es tradicional y festivo; el cobre es más cálido y moderno; la plata es fría y discreta. Mantén el metal pequeño, como una luz en una esquina o una línea fina, para que el marino siga haciendo la mayor parte del trabajo. Los [degradados dorados](https://gradiently.design/es/guide/gold-gradient-design) y los [degradados plateados](https://gradiently.design/es/guide/silver-gradient) muestran el lado metálico en detalle.

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

El metal, pequeño y en un solo lugar. El ojo va primero ahí y después a tus palabras.

- Medianoche: #0b1630
- Marino profundo: #172554
- Marino real: #1e3a8a
- Oro viejo: #d4a64a
- Marfil: #f8f6f1
- Pizarra: #94a3b8

Un sistema marino y dorado: tres marinos, un acento dorado, marfil para el texto y pizarra para el detalle secundario.

## Degradados azul marino de medianoche para la noche y el lujo

Las mezclas radiales recuerdan un cielo tras la puesta de sol o una sala con poca luz. Van bien con invitaciones de gala, bares de hotel, joyería, relojes y radio nocturna. Para la versión estrellada, consulta los [degradados de cielo nocturno](https://gradiently.design/es/guide/night-sky-gradient).

- Tras la puesta de sol: `radial-gradient(ellipse at 50% 0%, #1e40af 0%, #172554 40%, #070b18 100%)`
- Sala de terciopelo: `radial-gradient(circle at 30% 70%, #312e81 0%, #0b1630 55%, #05070f 100%)`
- Resplandor urbano: `radial-gradient(ellipse at 50% 110%, #3b82f6 0%, #1e3a8a 25%, #0b1630 60%, #05070f 100%)`

Marino con una luz suave. La parada más oscura es casi negra, pero el azul evita que se sienta vacía.

## Dónde se ganan su sitio los degradados azul marino

El azul marino rinde al máximo donde importan más las palabras que la imagen, porque da al texto un fondo sereno y de alto contraste. Algunos usos para copiar:

- **Diapositivas de 1920×1080:** «Marino clásico» para las separatas de sección, con una línea dorada bajo cada título.
- **Banner de perfil de LinkedIn de 1584×396:** «Marino y verde azulado» de izquierda a derecha, lo más oscuro detrás de tu foto.
- **Cabecera de email de 1200×600:** «Marino tinta» con un titular en marfil, para que la cabecera ya encaje en bandejas de entrada en modo oscuro.
- **Invitaciones de graduación y premios:** «Luz dorada sobre marino» impreso en un folleto A5.
- **Gráficos y paneles:** un fondo azul marino profundo hace fáciles de distinguir los colores vivos de los datos.

## Cómo hacer que el azul marino parezca menos corporativo

### Parece como cualquier banco

- `#000080` plano con un logotipo blanco
- Un fundido recto de arriba abajo
- Botones de azul medio vivo
- Foto de archivo de un apretón de manos

### Parece meditado

- Un marino suavizado con inclinación al violeta o al verde azulado
- Luz que viene de un solo lugar
- Un acento cálido: oro, cobre o coral
- Un grano fino que lo hace parecer impreso

Ninguno de estos cambios cuesta confianza. Solo hacen que la marca se reconozca de un vistazo, algo importante cuando todos los competidores usan el mismo azul. [Los activos de marca distintivos](https://gradiently.design/es/guide/distinctive-brand-assets) explican por qué el reconocimiento viene de poseer algo que nadie más usa. Una prueba útil: tapa tu logotipo y pregúntate si alguien aún sabría que el diseño es tuyo. Con un fundido marino plano, la respuesta casi siempre es no.

Una imagen de enlace de LinkedIn de una firma de planificación financiera con texto blanco sobre un degradado azul marino iluminado desde una esquina

Una imagen de enlace de LinkedIn sobre un marino profundo con una luz cálida. Seria, no anónima.

El mismo diseño de planificación financiera como publicación vertical sobre el degradado azul marino

El mismo diseño como publicación vertical, con la luz movida para ajustarse al formato más alto.

## CSS de degradado azul marino sin banding

Las mezclas oscuras y sutiles son donde más se nota el banding: ves escalones visibles en lugar de un fundido suave, sobre todo cuando una plataforma vuelve a comprimir tu imagen. En la web, unas paradas extra y una capa de grano lo disimulan. El [banding en degradados](https://gradiently.design/es/guide/gradient-banding) explica la 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 */
}
```

Unas paradas intermedias extra suavizan el fundido, una tenue luz dorada aporta calidez y una capa de grano oculta los escalones que queden.

El texto es la parte fácil con el azul marino. El blanco y el marfil superan el contraste con holgura en todos los marinos de arriba, y el oro viejo `#d4a64a` se lee a unos 8 a 1 sobre medianoche, así que sirve para títulos. Lo que hay que vigilar es el azul vivo: un azul medio como `#3b82f6` detrás de texto blanco baja a unos 3,7 a 1. En Gradiently, la tinta automática se ocupa de esto línea a línea, eligiendo el texto de la propia paleta del Mark, y el [Designer](https://gradiently.design/es/guide/what-is-gradiently) puede maquetar toda una campaña marino con la voz de tu kit de marca.

## FAQ

### ¿Cuál es el código hex del azul marino?

El color CSS `navy` es `#000080`. Versiones más suaves como `#172554` o `#0b1630` suelen verse mejor en pantalla.

### ¿Qué colores combinan con un degradado azul marino?

Oro, cobre, marfil, pizarra y coral. Un único acento cálido evita que el azul marino parezca frío o corporativo.

### ¿Es bueno el azul marino para la marca de una empresa?

Transmite seriedad y fiabilidad, así que va bien con finanzas, derecho y educación. Como lo usan tantos competidores, añade luz o un acento para seguir siendo reconocible.

### ¿Por qué mi degradado azul marino muestra rayas?

Es banding, habitual en fundidos oscuros y sutiles. Añade más paradas, una capa de grano ligera y evita una compresión JPEG fuerte.

### ¿Puedo usar texto dorado sobre azul marino?

Sí, si el dorado es lo bastante claro. `#d4a64a` sobre `#0b1630` mide unos 8 a 1, lo que supera el contraste para títulos y texto de cuerpo.