# Degradados verde y azul: códigos frescos y naturales

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

El verde que se encuentra con el azul es el color del agua poco profunda sobre la arena, de un lago bajo los pinos, de las auroras boreales. Por eso la pareja resulta tan natural. Así la mantienes.

## The short version

- Un degradado verde y azul mezcla tonos fríos vecinos como el esmeralda #10b981, el verde azulado #0d9488 y el azul cielo #0284c7, con verde azulado o aguamarina en el medio.
- Como el verde y el azul son contiguos en el círculo cromático, la mezcla se mantiene limpia y parece natural porque refleja el agua, el hielo y el cielo.
- Los verdes vivos y las aguamarinas son demasiado claros para texto blanco, así que usa una tinta verde azulado profundo en las versiones claras y blanco o menta en las oscuras.
- Los degradados verde y azul oscuros transmiten calma y confianza, mientras que las versiones claras transmiten frescura y limpieza.
- La pareja va bien con viajes, bienestar, finanzas, marcas de aire libre y tecnología, y un acento cálido como arena o coral evita que parezca fría.

Un **degradado verde y azul** mezcla dos vecinos fríos: verdes como el esmeralda `#10b981` o la menta `#a7f3d0` y azules como `#0284c7` o el cielo `#bae6fd`, con el verde azulado y la aguamarina haciendo de puente. La mezcla se mantiene limpia porque no hay punto gris entre los dos tonos. Se siente natural porque lo has visto toda la vida en el agua, el hielo y el cielo. Los códigos de aquí siguen cuatro paisajes, con los colores de texto que se leen en cada uno y CSS para modo claro y oscuro.

## Por qué el verde y el azul se ven naturales juntos

El verde y el azul son [colores análogos](https://gradiently.design/es/guide/analogous-colors): están uno al lado del otro en el círculo, así que cada paso entre ellos es un color real, sobre todo verde azulado y aguamarina. La naturaleza muestra esta pareja constantemente, desde los mares poco profundos donde el agua azul corre sobre algas verdes y arena hasta los lagos glaciares y los bosques de pinos reflejados en aguas quietas. Tomar prestado de esas escenas es la forma más fácil de que el degradado resulte calmado y no corporativo.

- Tinta verde azulado profundo: #042f2e
- Pino: #065f46
- Esmeralda: #10b981
- Verde azulado: #0d9488
- Aguamarina: #22d3ee
- Azul lago: #0284c7
- Menta: #a7f3d0
- Cielo: #bae6fd

La gama del verde al azul con una tinta profunda para el texto. El verde azulado y la aguamarina son los colores puente que mantienen continua la mezcla.

## Laguna: degradados aguamarina y verde vivos

El agua tropical poco profunda es sobre todo aguamarina, con verde donde es más somera y azul donde se hace más honda. Estos degradados transmiten brillo de vacaciones. Añade una parada de arena cálida si quieres que parezcan una playa y no una piscina.

- Laguna: `linear-gradient(180deg, #a5f3fc 0%, #2dd4bf 50%, #0891b2 100%)`
- Arrecife: `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`
- Banco de arena: `linear-gradient(0deg, #fde68a 0%, #5eead4 30%, #0ea5e9 100%)`

Degradados verde y azul vivos. El tercero añade arena abajo, lo que calienta todo el encuadre. [Degradados océano](https://gradiently.design/es/guide/ocean-gradient) tiene más.

## Lago de pinos: degradados verde y azul profundos

El verde oscuro que desemboca en azul oscuro resulta silencioso, caro y fiable. Piensa en un lago de bosque al anochecer o en el color de una botella antigua. Sostienen bien el texto blanco y van con finanzas, equipamiento de exterior, arquitectura y cualquier marca que quiera sentirse estable.

- Lago de pinos: `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`
- Verde azulado a la luz de la luna: `radial-gradient(circle at 80% 20%, #0d9488 0%, #134e4a 40%, #031418 80%)`
- De botella a marino: `linear-gradient(135deg, #064e3b 0%, #115e59 50%, #1e3a8a 100%)`

Verde y azul oscuros. Estos muestran banding con facilidad en imágenes comprimidas, así que añade un grano fino antes de exportar.

## Glaciar: degradados de menta pálida y cielo

Aclara la pareja del todo y obtienes hielo glaciar y mañanas frías: limpio, aireado y muy calmado. Sirven para sanidad, cuidado de la piel, limpieza y apps de productividad. Pueden parecer clínicos, así que un toque de blanco cálido ayuda.

- Glaciar: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%)`
- Mañana fría: `linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 50%, #e0f2fe 100%)`
- Hielo al sol: `radial-gradient(circle at 25% 25%, #fefce8 0%, #d1fae5 45%, #bae6fd 100%)`

Verde y azul pálidos. La tinta verde azulado profundo se lee en todos. [Degradados menta](https://gradiently.design/es/guide/mint-gradient) profundiza más en el verde.

## Aurora: verde y azul sobre un cielo nocturno

Las auroras boreales son luz verde y azul sobre negro, por eso los degradados aurora están entre los fondos oscuros más queridos. Mantén el color en bandas suaves y deja que el fondo oscuro ocupe casi todo el encuadre. [Degradados aurora](https://gradiently.design/es/guide/aurora-gradients) cubre la técnica completa.

- Aurora: `radial-gradient(ellipse at 30% 30%, #34d399 0%, #0f766e 30%, #0b1e3a 65%, #030712 90%)`
- Banda de luz: `linear-gradient(170deg, #030712 0%, #064e3b 40%, #0e7490 70%, #030712 100%)`
- Remolino polar: `conic-gradient(from 210deg at 60% 40%, #030712, #10b981, #0ea5e9, #030712)`

Verde y azul sobre casi negro. La menta y la aguamarina son colores de texto llamativos sobre estos.

## Colores de texto sobre degradados verde y azul

El esmeralda y la aguamarina son sorprendentemente claros, así que el texto blanco sobre las versiones vivas suele fallar. La tinta verde azulado profundo funciona en mezclas claras y mantiene todo en una familia; el blanco y la menta se leen bien en las oscuras. Los ratios de abajo usan la fórmula WCAG. [Texto sobre un degradado](https://gradiently.design/es/guide/text-on-gradient) muestra qué hacer cuando una línea cruza ambos extremos.

| Fondo | Texto | Contraste | Veredicto |
| --- | --- | --- | --- |
| Esmeralda `#10b981` | Blanco | 2,5:1 | No cumple |
| Aguamarina `#22d3ee` | Blanco | 1,8:1 | No cumple |
| Verde azulado `#0d9488` | Blanco | 3,7:1 | Solo titulares grandes |
| Menta `#a7f3d0` | Verde azulado profundo `#042f2e` | 11,3:1 | Excelente |
| Pino `#065f46` | Blanco | 7,7:1 | Excelente |
| Noche `#04202a` | Menta aguamarina `#5eead4` | 11,4:1 | Excelente, el color como tinta |

En una mezcla de verde y azul, el extremo verde suele ser el más claro, así que comprueba ahí el contraste primero.

Una publicación vertical de viajes con letras verde azulado profundo sobre un degradado vivo de aguamarina y verde

Una publicación de agencia de viajes en tonos vivos de laguna, con texto verde azulado profundo.

Una imagen de enlace horizontal para una app de finanzas con letras blancas sobre un degradado de verde oscuro a marino

Una imagen de enlace de LinkedIn de pino a marino para una app de finanzas.

## Cómo calentar una paleta verde y azul

El verde y el azul son fríos los dos, así que toda una marca en ellos puede sentirse distante. Un acento cálido lo arregla. La arena, el coral y el dorado suave están al otro lado del círculo respecto al verde azulado, así que úsalos junto al degradado, en un botón, un logotipo o una franja en un borde, y no mezclados con él. [Colores complementarios](https://gradiently.design/es/guide/complementary-colors) explica por qué mezclar a través del círculo da gris.

### Evita

- Verde azulado mezclado directamente con coral
- Texto blanco sobre esmeralda o aguamarina
- Todas las superficies en colores fríos
- Verde saturado sobre azul saturado a plena intensidad

### Haz

- Coral o arena junto al degradado como acento
- Tinta verde azulado profundo en mezclas claras
- Un blanco cálido o crema para paneles y texto
- Un color al frente y el otro de apoyo

## CSS del degradado verde y azul para modo claro y oscuro

```css
.hero {
  background-color: #ecfdf5;
  background-image: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%);
  color: #042f2e;
}

@media (prefers-color-scheme: dark) {
  .hero {
    background-color: #031418;
    background-image:
      radial-gradient(ellipse at 30% 25%, #0d9488 0%, transparent 50%),
      linear-gradient(160deg, #022c22 0%, #0c4a6e 100%);
    color: #ecfeff;
  }
}
```

Glaciar en modo claro, lago de pinos en modo oscuro. Mismos tonos, así que la marca sigue sintiéndose como una sola cosa.

Emparejar una versión clara y otra oscura del mismo verde y azul es una forma limpia de que el cambio de tema parezca diseñado y no simplemente invertido. [Degradados en modo oscuro](https://gradiently.design/es/guide/dark-mode-gradients) profundiza más. En Gradiently, un Mark se renderiza en cada tamaño que diseñas y elige tinta clara u oscura línea a línea a partir de su propia paleta, así que tanto los brillos de laguna como los oscuros de pino mantienen legibles sus palabras.

## FAQ

### ¿Cuál es un buen código de degradado verde y azul?

Una opción viva es `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`. Para algo más oscuro y calmado, prueba `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`.

### ¿Combinan el verde y el azul?

Sí. Son vecinos en el círculo cromático, con el verde azulado y la aguamarina entre ambos, así que la mezcla se mantiene limpia y se siente natural.

### ¿Qué color hay entre el verde y el azul?

El verde azulado, alrededor de `#0d9488`, con la aguamarina y el turquesa como parientes más brillantes.

### ¿Qué color de texto va sobre un degradado verde y azul?

Verde azulado profundo como `#042f2e` en las versiones claras, y blanco o menta en las oscuras. El blanco sobre esmeralda o aguamarina vivos no cumple el contraste.

### ¿Qué significa un degradado verde y azul para una marca?

Suele transmitir calma, frescura y confianza, porque evoca el agua, el cielo y las plantas. Las versiones oscuras se sienten estables; las claras, limpias.