# Turquoise gradient: tropical codes with depth

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

Bright turquoise on its own looks like a swimming pool icon. Give it a deep floor, a warm shore and a little light, and it becomes the sea off an island. Here is how, with codes.

## The short version

- A turquoise gradient blends bright greenish blues, and it looks most natural when it also includes a deeper blue and a light, almost white highlight.
- Turquoise is lighter and brighter than teal and greener than cyan; the CSS named colour turquoise is #40e0d0.
- Flat turquoise gradients look synthetic, so add depth with a navy floor, a pale highlight or a warm sand colour.
- White text fails on bright turquoise; use a deep navy such as #083344 for type instead.
- Sand, coral and white are the most natural partners for turquoise because they recall a beach.

A **turquoise gradient** blends bright, greenish blues, and the ones that feel truly tropical have three things: a pale highlight where the light hits, a clear turquoise body and a deeper blue underneath. Without that range, turquoise looks flat and synthetic. Below are codes for bright lagoons, turquoise with real depth and turquoise beside warm sand, followed by the CSS and the type colours that keep everything readable.

## Turquoise, teal, cyan and aqua compared

These four get used interchangeably, but they are different colours, and choosing the right one changes the mood. Turquoise is the brightest and most holiday of the group.

| Colour | Typical hex | How it reads |
| --- | --- | --- |
| Turquoise | `#40e0d0` | Bright, greenish, tropical, gemstone |
| Aqua | `#7fffd4` (aquamarine) | Pale, minty, light, watery |
| Cyan | `#00ffff` (CSS cyan) | Electric, cooler, digital |
| Teal | `#008080` (CSS teal) | Deeper, muted, calm, grown up |

Turquoise is lighter than teal and greener than cyan. For the deeper version, see the teal article.

If your brand wants calm and serious, you probably want [teal gradients](https://gradiently.design/guide/teal-gradient) instead. If it wants holiday, energy and warmth, stay here.

## Bright tropical turquoise gradients

These are the postcard blends: shallow water over white sand. Each includes a pale stop so the turquoise has something to glow against, and none of them runs into grey.

- Shallow water: `linear-gradient(180deg, #e6fffb 0%, #40e0d0 100%)`
- Lagoon: `linear-gradient(135deg, #a7f3d0 0%, #40e0d0 50%, #06b6d4 100%)`
- Sunlit cove: `radial-gradient(circle at 35% 30%, #f0fdfa 0%, #5eead4 35%, #22d3ee 100%)`
- Turquoise to sky: `linear-gradient(120deg, #40e0d0 0%, #38bdf8 100%)`
- Reef edge: `linear-gradient(160deg, #99f6e4 0%, #2dd4bf 45%, #0ea5e9 100%)`
- Aquamarine: `linear-gradient(135deg, #7fffd4 0%, #40e0d0 100%)`

Six bright turquoise blends. A pale or white stop is what makes each one feel lit.

## How to give a turquoise gradient depth

Real tropical water is never one colour. It is pale over sand, turquoise over shallow reef and deep blue where it drops away. Copy that structure and your gradient stops looking like a flat fill.

1. **Choose a floor** Pick a deep blue for the darkest part, such as `#0c4a6e` or `#083344`. It anchors the turquoise and gives it something to shine against.
2. **Set the body** Use your turquoise, around `#2dd4bf` to `#40e0d0`, across the largest area, usually the middle or top.
3. **Add a highlight** Place a small, near white stop such as `#ecfeff` where the light would hit. A radial gradient in one corner works well.
4. **Warm one edge** Optionally run a sand colour along the bottom or a corner, so the cool blend has a warm shore.
5. **Finish the surface** Add light grain so the bright colours don't band when the platform compresses your image. [Grainy gradients](https://gradiently.design/guide/grainy-gradients) has the method.

- Drop off: `linear-gradient(180deg, #5eead4 0%, #0891b2 55%, #083344 100%)`
- Light through water: `radial-gradient(circle at 70% 20%, #ecfeff 0%, #40e0d0 25%, #0e7490 65%, #082f49 100%)`
- Turquoise to cobalt: `linear-gradient(135deg, #2dd4bf 0%, #1e40af 100%)`
- Glowing deep: `radial-gradient(ellipse at 50% 120%, #40e0d0 0%, #0e7490 35%, #0b1e3a 80%)`

Turquoise with a deep blue floor. These suit travel, diving, drinks and night time beach events.

## Turquoise and sand gradients

The most natural partner for turquoise is the beach itself: warm sand, coral and white. These colours sit across the wheel from turquoise, so blend them only where the saturation is low, through pale stops, or keep them as separate areas. That way you get a shoreline rather than a grey smear. [Summer colour palettes](https://gradiently.design/guide/summer-color-palettes) has more holiday combinations.

- Shoreline: `linear-gradient(180deg, #40e0d0 0%, #a5f3fc 55%, #fef3c7 75%, #f5deb3 100%)`
- Sand to sea: `linear-gradient(135deg, #f5e6cc 0%, #e6fffb 50%, #40e0d0 100%)`
- Coral on turquoise: `radial-gradient(circle at 85% 85%, #fda4af 0%, transparent 30%), linear-gradient(160deg, #5eead4 0%, #0891b2 100%)`

Turquoise meets sand through a pale middle, so the two warm and cool sides never turn grey.

- Foam: #ecfeff
- Turquoise: #40e0d0
- Reef blue: #0891b2
- Deep water: #083344
- Sand: #f5deb3
- Coral: #fb7185

A complete tropical palette: foam, two blues, a deep ink, sand and one coral accent.

## Where a turquoise gradient works best

Turquoise is loud, so it earns its place where people already expect holiday, water or fun. A few uses where it beats every other colour:

- **Travel and hotels:** a 1080×1920 story with "Drop off" behind a single line like "Three nights in Lisbon".
- **Swim schools and pools:** a pale "Shallow water" background for timetables, with deep navy type.
- **Smoothie bars and juice brands:** "Lagoon" with one coral price sticker, which pops because it sits opposite turquoise.
- **Summer menus and festival posters:** "Shoreline" on an A4 poster, sea at the top and sand where the details go.
- **Jewellery:** turquoise is also a stone, so a deep "Light through water" behind silver or gold product shots feels right.

Avoid it for anything that needs to feel quiet or formal. A law firm or a funeral director will be better served by teal or navy.

## Turquoise gradient CSS with light

Layering two radial highlights over a linear base gives the impression of sunlight through water. It is light to render and needs no image. The syntax is explained in [CSS radial gradients](https://gradiently.design/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;
}
```

Foam light at the top left, turquoise in the middle and deep water at the bottom. Set headlines in the upper half, in deep water ink.

## Text on a turquoise gradient

Turquoise is much lighter than it looks. White on `#40e0d0` measures about 1.6 to 1, which nobody can read comfortably in sunlight on a phone. Deep water `#083344` on the same turquoise measures about 8 to 1. Use dark navy type across the bright areas, and only switch to white where the gradient has fallen to a deep blue. For the full rules, see [colour contrast and accessibility](https://gradiently.design/guide/color-contrast-accessibility).

A watersports event post with pale text washing out against a bright turquoise gradient

Light words on bright turquoise wash out the moment someone looks at them outdoors.

The same event post with clear deep coloured text on a calmer area of the turquoise gradient

The same post with the type colour and the calm zone chosen for the words.

This is exactly what a Gradiently Mark does by itself: its calmest region moves behind the words and Auto ink picks light or dark type per line from the Mark's own colours. Travel and hospitality teams who post every day can find more ideas in [travel agency social media](https://gradiently.design/guide/travel-agency-social-media).

## FAQ

### What is the hex code for turquoise?

The CSS named colour `turquoise` is `#40e0d0`. Slightly deeper versions such as `#2dd4bf` are also widely used.

### What colours go with a turquoise gradient?

Deep navy, white, sand and coral. Navy gives depth, white gives light, and sand or coral add warmth when kept out of the main blend.

### Is turquoise the same as teal?

No. Turquoise is lighter, brighter and more tropical; teal is deeper and more muted. Both sit between blue and green.

### Can I use white text on turquoise?

Not on bright turquoise, where white fails contrast badly. Use deep navy type, or move white text to the darkest blue part of the gradient.

### How do I make a turquoise gradient look less flat?

Add a deep blue floor, a near white highlight and light grain. Those three steps make it read as water rather than a flat fill.