# Navy, turquoise and gold heatmap palette

The Navy, turquoise and gold heatmap palette brings together dark blue, blue, teal, green, and pale orange. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits information graphics and map mood boards. Its darkest tone is dark blue, and its lightest tone is pale orange.

- Also called: Navy, teal, green and beige linear gradient
- Seed: `kWOiW7xg2-Ngou1gMjXcpE7o`
- Page: https://grabient.com/kWOiW7xg2-Ngou1gMjXcpE7o?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: dark to light, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 12.6 to 1

## Colors

The name most people give each color, and the text color that reads on it with its contrast.

| Stop | Hex | OKLCH | Name | Text on it |
| --- | --- | --- | --- | --- |
| 1 | `#101c34` | `oklch(22.83% 0.0510 263.67)` | Trapped Darkness | white, 17 to 1 |
| 2 | `#16223b` | `oklch(25.55% 0.0492 262.66)` | Cool Balaclavas Are Forever | white, 15.7 to 1 |
| 3 | `#1f2c43` | `oklch(29.32% 0.0462 261.51)` | Eternal Darkness | white, 13.9 to 1 |
| 4 | `#2b384e` | `oklch(33.82% 0.0426 260.14)` | Cool Air of Debonair | white, 11.8 to 1 |
| 5 | `#374559` | `oklch(38.71% 0.0390 258.50)` | Soulful | white, 9.7 to 1 |
| 6 | `#455366` | `oklch(43.69% 0.0361 256.52)` | Into the Stratosphere | white, 7.8 to 1 |
| 7 | `#526072` | `oklch(48.42% 0.0346 254.15)` | Da Blues | white, 6.4 to 1 |
| 8 | `#5c6c7f` | `oklch(52.57% 0.0351 251.33)` | China Blue | white, 5.3 to 1 |
| 9 | `#63768a` | `oklch(55.85% 0.0383 248.01)` | Always Indigo | white, 4.6 to 1 |
| 10 | `#667f95` | `oklch(58.52% 0.0447 244.46)` | Grey Blueberry | black, 5 to 1 |
| 11 | `#6587a0` | `oklch(60.79% 0.0538 240.69)` | Seal Pup | black, 5.5 to 1 |
| 12 | `#628fab` | `oklch(62.74% 0.0646 236.57)` | Treasure Map Waters | black, 6 to 1 |
| 13 | `#5b96b4` | `oklch(64.44% 0.0764 231.95)` | Pass Time Blue | black, 6.4 to 1 |
| 14 | `#519dbc` | `oklch(65.94% 0.0881 226.69)` | Rushing Rapids | black, 6.8 to 1 |
| 15 | `#43a4c1` | `oklch(67.32% 0.0989 220.64)` | Oasis Spring | black, 7.3 to 1 |
| 16 | `#31abc3` | `oklch(68.63% 0.1080 213.66)` | Moonstone | black, 7.7 to 1 |
| 17 | `#1db2c0` | `oklch(69.90% 0.1149 205.47)` | Lago Blue | black, 8.1 to 1 |
| 18 | `#00b8b9` | `oklch(70.88% 0.1209 195.39)` | Swagger | black, 8.5 to 1 |
| 19 | `#00bdac` | `oklch(71.62% 0.1269 183.85)` | Verditer | black, 8.8 to 1 |
| 20 | `#25c09b` | `oklch(72.21% 0.1333 171.50)` | First Post | black, 9 to 1 |
| 21 | `#49c187` | `oklch(72.77% 0.1376 158.94)` | Garish Green | black, 9.2 to 1 |
| 22 | `#67c073` | `oklch(73.39% 0.1402 146.79)` | Bermudagrass | black, 9.3 to 1 |
| 23 | `#82bf61` | `oklch(74.19% 0.1407 135.68)` | Hillside Grove | black, 9.5 to 1 |
| 24 | `#98be57` | `oklch(75.27% 0.1387 126.22)` | Early Spring | black, 9.8 to 1 |
| 25 | `#abbf56` | `oklch(76.74% 0.1332 118.59)` | Sapling | black, 10.3 to 1 |
| 26 | `#bbc15e` | `oklch(78.61% 0.1234 112.00)` | Avocado Cream | black, 10.9 to 1 |
| 27 | `#c9c56d` | `oklch(80.74% 0.1105 106.30)` | Siskin Green | black, 11.6 to 1 |
| 28 | `#d4ca7f` | `oklch(82.99% 0.0958 101.42)` | Spring Grass | black, 12.5 to 1 |
| 29 | `#ddcf92` | `oklch(85.20% 0.0808 97.27)` | Bongo Skin | black, 13.4 to 1 |
| 30 | `#e3d5a3` | `oklch(87.23% 0.0668 93.74)` | Bakelite | black, 14.3 to 1 |
| 31 | `#e8dab2` | `oklch(88.93% 0.0550 90.77)` | Rainforest Dew | black, 15 to 1 |
| 32 | `#ebddbc` | `oklch(90.16% 0.0469 88.25)` | Salt Steppe | black, 15.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #101c34 0.0%, #16223b 3.2%, #1f2c43 6.5%, #2b384e 9.7%, #374559 12.9%, #455366 16.1%, #526072 19.4%, #5c6c7f 22.6%, #63768a 25.8%, #667f95 29.0%, #6587a0 32.3%, #628fab 35.5%, #5b96b4 38.7%, #519dbc 41.9%, #43a4c1 45.2%, #31abc3 48.4%, #1db2c0 51.6%, #00b8b9 54.8%, #00bdac 58.1%, #25c09b 61.3%, #49c187 64.5%, #67c073 67.7%, #82bf61 71.0%, #98be57 74.2%, #abbf56 77.4%, #bbc15e 80.6%, #c9c56d 83.9%, #d4ca7f 87.1%, #ddcf92 90.3%, #e3d5a3 93.5%, #e8dab2 96.8%, #ebddbc 100.0%);
background: linear-gradient(90deg in oklch, oklch(22.83% 0.0510 263.67) 0.0%, oklch(25.55% 0.0492 262.66) 3.2%, oklch(29.32% 0.0462 261.51) 6.5%, oklch(33.82% 0.0426 260.14) 9.7%, oklch(38.71% 0.0390 258.50) 12.9%, oklch(43.69% 0.0361 256.52) 16.1%, oklch(48.42% 0.0346 254.15) 19.4%, oklch(52.57% 0.0351 251.33) 22.6%, oklch(55.85% 0.0383 248.01) 25.8%, oklch(58.52% 0.0447 244.46) 29.0%, oklch(60.79% 0.0538 240.69) 32.3%, oklch(62.74% 0.0646 236.57) 35.5%, oklch(64.44% 0.0764 231.95) 38.7%, oklch(65.94% 0.0881 226.69) 41.9%, oklch(67.32% 0.0989 220.64) 45.2%, oklch(68.63% 0.1080 213.66) 48.4%, oklch(69.90% 0.1149 205.47) 51.6%, oklch(70.88% 0.1209 195.39) 54.8%, oklch(71.62% 0.1269 183.85) 58.1%, oklch(72.21% 0.1333 171.50) 61.3%, oklch(72.77% 0.1376 158.94) 64.5%, oklch(73.39% 0.1402 146.79) 67.7%, oklch(74.19% 0.1407 135.68) 71.0%, oklch(75.27% 0.1387 126.22) 74.2%, oklch(76.74% 0.1332 118.59) 77.4%, oklch(78.61% 0.1234 112.00) 80.6%, oklch(80.74% 0.1105 106.30) 83.9%, oklch(82.99% 0.0958 101.42) 87.1%, oklch(85.20% 0.0808 97.27) 90.3%, oklch(87.23% 0.0668 93.74) 93.5%, oklch(88.93% 0.0550 90.77) 96.8%, oklch(90.16% 0.0469 88.25) 100.0%);
```

## Keyframes

5 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees.

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.228 | 0.051 | 263.7 |
| 2 | 0.551 | 0.037 | 248.9 |
| 3 | 0.693 | 0.112 | 209.8 |
| 4 | 0.756 | 0.138 | 124.2 |
| 5 | 0.902 | 0.047 | 88.3 |

## In these collections

- [Heatmap gradients](https://grabient.com/heatmap-gradients)
- [Oil slick colors](https://grabient.com/oil-slick-colors)

## Other forms

- [JSON](https://grabient.com/kWOiW7xg2-Ngou1gMjXcpE7o.json?steps=32)
- [PNG](https://grabient.com/kWOiW7xg2-Ngou1gMjXcpE7o.png?steps=32)
- [SVG](https://grabient.com/kWOiW7xg2-Ngou1gMjXcpE7o.svg?steps=32)
- [CSS](https://grabient.com/kWOiW7xg2-Ngou1gMjXcpE7o.css?steps=32)
- [ASE](https://grabient.com/kWOiW7xg2-Ngou1gMjXcpE7o.ase?steps=32)
- [GPL](https://grabient.com/kWOiW7xg2-Ngou1gMjXcpE7o.gpl?steps=32)
- [GRD](https://grabient.com/kWOiW7xg2-Ngou1gMjXcpE7o.grd?steps=32)
- [Design tokens](https://grabient.com/kWOiW7xg2-Ngou1gMjXcpE7o.tokens.json?steps=32)
- [Social card](https://grabient.com/api/og?seed=kWOiW7xg2-Ngou1gMjXcpE7o&steps=32)
- [Palettes like this one](https://grabient.com/palettes?q=kWOiW7xg2-Ngou1gMjXcpE7o)
- [Guide for agents](https://grabient.com/llms.txt)