# Degradado turquesa: códigos tropicales con profundidad

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

El turquesa brillante, solo, parece el icono de una piscina. Dale un fondo profundo, una orilla cálida y un poco de luz, y se convierte en el mar de una isla. Así se hace, con códigos.

## The short version

- Un degradado turquesa mezcla azules verdosos brillantes y resulta más natural si incluye también un azul más profundo y un reflejo claro, casi blanco.
- El turquesa es más claro y brillante que el verde azulado y más verde que el cian; el color CSS turquoise es #40e0d0.
- Los degradados turquesa planos parecen sintéticos, así que añade profundidad con un fondo azul marino, un reflejo pálido o un color arena cálido.
- El texto blanco no funciona sobre turquesa brillante; usa en su lugar un azul marino profundo como #083344.
- Arena, coral y blanco son los compañeros más naturales del turquesa porque recuerdan a una playa.

Un **degradado turquesa** mezcla azules brillantes y verdosos, y los que resultan de verdad tropicales tienen tres cosas: un reflejo pálido donde da la luz, un cuerpo turquesa limpio y un azul más profundo debajo. Sin ese rango, el turquesa se ve plano y sintético. Abajo tienes códigos para lagunas brillantes, turquesa con profundidad real y turquesa junto a arena cálida, seguidos del CSS y de los colores de texto que lo mantienen todo legible.

## Turquesa, verde azulado, cian y aguamarina comparados

Estos cuatro se usan como si fueran lo mismo, pero son colores distintos, y elegir el adecuado cambia el ambiente. El turquesa es el más brillante y el más vacacional del grupo.

| Color | Hex típico | Qué transmite |
| --- | --- | --- |
| Turquesa | `#40e0d0` | Brillante, verdoso, tropical, piedra preciosa |
| Aguamarina | `#7fffd4` (aquamarine) | Pálido, mentolado, ligero, acuoso |
| Cian | `#00ffff` (cyan de CSS) | Eléctrico, más frío, digital |
| Verde azulado | `#008080` (teal de CSS) | Más profundo, apagado, sereno, maduro |

El turquesa es más claro que el verde azulado y más verde que el cian. Para la versión más profunda, consulta el artículo sobre el verde azulado.

Si tu marca busca calma y seriedad, probablemente te convengan más los [degradados verde azulado](https://gradiently.design/es/guide/teal-gradient). Si busca vacaciones, energía y calidez, quédate aquí.

## Degradados turquesa tropicales y brillantes

Son las mezclas de postal: agua poco profunda sobre arena blanca. Cada una incluye una parada pálida para que el turquesa tenga algo contra lo que brillar, y ninguna acaba en gris.

- Agua poco profunda: `linear-gradient(180deg, #e6fffb 0%, #40e0d0 100%)`
- Laguna: `linear-gradient(135deg, #a7f3d0 0%, #40e0d0 50%, #06b6d4 100%)`
- Cala soleada: `radial-gradient(circle at 35% 30%, #f0fdfa 0%, #5eead4 35%, #22d3ee 100%)`
- De turquesa a cielo: `linear-gradient(120deg, #40e0d0 0%, #38bdf8 100%)`
- Borde del arrecife: `linear-gradient(160deg, #99f6e4 0%, #2dd4bf 45%, #0ea5e9 100%)`
- Aguamarina: `linear-gradient(135deg, #7fffd4 0%, #40e0d0 100%)`

Seis mezclas turquesa brillantes. Una parada pálida o blanca es lo que hace que cada una parezca iluminada.

## Cómo dar profundidad a un degradado turquesa

El agua tropical de verdad nunca es de un solo color. Es pálida sobre la arena, turquesa sobre el arrecife poco profundo y azul oscuro donde el fondo cae. Copia esa estructura y tu degradado dejará de parecer un relleno plano.

1. **Elige un fondo** Escoge un azul profundo para la parte más oscura, como `#0c4a6e` o `#083344`. Ancla el turquesa y le da algo contra lo que brillar.
2. **Define el cuerpo** Usa tu turquesa, entre `#2dd4bf` y `#40e0d0`, en la mayor parte de la superficie, normalmente el centro o la parte superior.
3. **Añade un reflejo** Coloca una parada pequeña, casi blanca, como `#ecfeff`, donde daría la luz. Un degradado radial en una esquina funciona bien.
4. **Calienta un borde** Si quieres, pasa un color arena por la parte inferior o por una esquina, para que la mezcla fría tenga una orilla cálida.
5. **Termina la superficie** Añade un grano ligero para que los colores brillantes no formen bandas cuando la plataforma comprima tu imagen. Los [degradados con grano](https://gradiently.design/es/guide/grainy-gradients) explican el método.

- Desnivel: `linear-gradient(180deg, #5eead4 0%, #0891b2 55%, #083344 100%)`
- Luz a través del agua: `radial-gradient(circle at 70% 20%, #ecfeff 0%, #40e0d0 25%, #0e7490 65%, #082f49 100%)`
- De turquesa a cobalto: `linear-gradient(135deg, #2dd4bf 0%, #1e40af 100%)`
- Profundidad luminosa: `radial-gradient(ellipse at 50% 120%, #40e0d0 0%, #0e7490 35%, #0b1e3a 80%)`

Turquesa con un fondo azul profundo. Van bien con viajes, buceo, bebidas y eventos de playa de noche.

## Degradados turquesa y arena

El compañero más natural del turquesa es la propia playa: arena cálida, coral y blanco. Estos colores quedan frente al turquesa en el círculo cromático, así que mézclalos solo donde la saturación sea baja, a través de paradas pálidas, o déjalos como zonas separadas. Así consigues una orilla y no una mancha gris. Las [paletas de colores de verano](https://gradiently.design/es/guide/summer-color-palettes) tienen más combinaciones vacacionales.

- Orilla: `linear-gradient(180deg, #40e0d0 0%, #a5f3fc 55%, #fef3c7 75%, #f5deb3 100%)`
- De arena a mar: `linear-gradient(135deg, #f5e6cc 0%, #e6fffb 50%, #40e0d0 100%)`
- Coral sobre turquesa: `radial-gradient(circle at 85% 85%, #fda4af 0%, transparent 30%), linear-gradient(160deg, #5eead4 0%, #0891b2 100%)`

El turquesa se encuentra con la arena a través de un centro pálido, así que los lados cálido y frío nunca se vuelven grises.

- Espuma: #ecfeff
- Turquesa: #40e0d0
- Azul arrecife: #0891b2
- Aguas profundas: #083344
- Arena: #f5deb3
- Coral: #fb7185

Una paleta tropical completa: espuma, dos azules, una tinta profunda, arena y un acento coral.

## Dónde funciona mejor un degradado turquesa

El turquesa es llamativo, así que se gana su sitio donde la gente ya espera vacaciones, agua o diversión. Algunos usos en los que supera a cualquier otro color:

- **Viajes y hoteles:** una story de 1080×1920 con «Desnivel» detrás de una sola frase como «Tres noches en Lisboa».
- **Escuelas de natación y piscinas:** un fondo pálido de «Agua poco profunda» para horarios, con texto azul marino profundo.
- **Bares de batidos y marcas de zumos:** «Laguna» con una pegatina de precio coral, que destaca porque está frente al turquesa.
- **Cartas de verano y carteles de festivales:** «Orilla» en un cartel A4, el mar arriba y la arena donde van los detalles.
- **Joyería:** el turquesa también es una piedra, así que un «Luz a través del agua» profundo detrás de fotos de producto en plata u oro queda justo.

Evítalo para todo lo que deba sentirse tranquilo o formal. A un despacho de abogados o a una funeraria les irá mejor con verde azulado o azul marino.

## CSS de degradado turquesa con luz

Superponer dos reflejos radiales sobre una base lineal da la impresión de luz del sol a través del agua. Es ligero de renderizar y no necesita imagen. La sintaxis se explica en [degradados radiales en CSS](https://gradiently.design/es/guide/css-radial-gradient).

```css
.section-tropical {
  background-color: #0891b2; /* fallback */
  background-image:
    radial-gradient(circle at 20% 15%, rgb(236 254 255 / 0.9) 0%, transparent 30%),
    radial-gradient(circle at 80% 40%, rgb(64 224 208 / 0.8) 0%, transparent 45%),
    linear-gradient(180deg, #5eead4 0%, #0891b2 60%, #083344 100%);
  color: #083344;
}
```

Luz de espuma arriba a la izquierda, turquesa en el centro y agua profunda abajo. Coloca los titulares en la mitad superior, con tinta de agua profunda.

## Texto sobre un degradado turquesa

El turquesa es mucho más claro de lo que parece. El blanco sobre `#40e0d0` mide unos 1,6 a 1, algo que nadie puede leer con comodidad al sol en un móvil. El agua profunda `#083344` sobre el mismo turquesa mide unos 8 a 1. Usa texto azul marino oscuro en las zonas brillantes y cambia a blanco solo donde el degradado haya caído a un azul profundo. Para las reglas completas, consulta [contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility).

Una publicación de un evento de deportes acuáticos con texto pálido que se desvanece sobre un degradado turquesa brillante

Las palabras claras sobre turquesa brillante se desvanecen en cuanto alguien las mira al aire libre.

La misma publicación del evento con texto oscuro y nítido sobre una zona más tranquila del degradado turquesa

La misma publicación con el color del texto y la zona tranquila elegidos para las palabras.

Esto es exactamente lo que hace por sí solo un Mark de Gradiently: su región más tranquila se mueve detrás de las palabras y la tinta automática elige texto claro u oscuro en cada línea a partir de los propios colores del Mark. Los equipos de viajes y hostelería que publican a diario encontrarán más ideas en [redes sociales para agencias de viajes](https://gradiently.design/es/guide/travel-agency-social-media).

## FAQ

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

El color CSS `turquoise` es `#40e0d0`. También se usan mucho versiones algo más profundas, como `#2dd4bf`.

### ¿Qué colores combinan con un degradado turquesa?

Azul marino profundo, blanco, arena y coral. El azul marino da profundidad, el blanco da luz, y la arena o el coral aportan calidez si se mantienen fuera de la mezcla principal.

### ¿Es el turquesa lo mismo que el verde azulado?

No. El turquesa es más claro, más brillante y más tropical; el verde azulado es más profundo y apagado. Ambos están entre el azul y el verde.

### ¿Puedo usar texto blanco sobre turquesa?

No sobre turquesa brillante, donde el blanco suspende el contraste con claridad. Usa texto azul marino profundo, o lleva el texto blanco a la parte azul más oscura del degradado.

### ¿Cómo hago que un degradado turquesa se vea menos plano?

Añade un fondo azul profundo, un reflejo casi blanco y un grano ligero. Con esos tres pasos se lee como agua y no como un relleno plano.