# Navy, deep teal and mustard sequential data

The Navy, deep teal and mustard sequential data brings together dark blue, blue, teal, green, and yellow. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits information graphics and map mood boards. Its darkest tone is dark blue, and its lightest tone is yellow.

- Also called: Navy to green linear gradient
- Seed: `kWOCnKsJs8sOft1YPDscrk8g`
- Page: https://grabient.com/kWOCnKsJs8sOft1YPDscrk8g?steps=32&angle=315
- Drawn as: linear gradient, 32 steps, 315 degrees
- Kinds: dark to light, vivid
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 13.3 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 | `#181634` | `oklch(22.05% 0.0565 284.77)` | Lost in Sadness | white, 17.4 to 1 |
| 2 | `#1a1938` | `oklch(23.35% 0.0580 282.89)` | Nightwalker | white, 16.9 to 1 |
| 3 | `#1d1d3e` | `oklch(25.10% 0.0600 280.75)` | Nightwalker | white, 16.1 to 1 |
| 4 | `#202345` | `oklch(27.18% 0.0624 278.21)` | Black Market | white, 15.1 to 1 |
| 5 | `#23294d` | `oklch(29.48% 0.0650 275.17)` | Royal Curtsy | white, 14 to 1 |
| 6 | `#263055` | `oklch(31.89% 0.0677 271.51)` | Boatswain | white, 12.8 to 1 |
| 7 | `#28375d` | `oklch(34.31% 0.0704 267.11)` | Midnight Sleigh | white, 11.7 to 1 |
| 8 | `#293e65` | `oklch(36.61% 0.0728 261.86)` | Elmer’s Echo | white, 10.6 to 1 |
| 9 | `#28456b` | `oklch(38.69% 0.0749 255.61)` | Commodore | white, 9.7 to 1 |
| 10 | `#244c70` | `oklch(40.66% 0.0760 247.76)` | Blue Tang | white, 8.9 to 1 |
| 11 | `#1f5474` | `oklch(42.58% 0.0764 238.49)` | Midnight Sonata | white, 8.1 to 1 |
| 12 | `#195c75` | `oklch(44.49% 0.0766 228.31)` | Saltwater Denim | white, 7.4 to 1 |
| 13 | `#146375` | `oklch(46.38% 0.0770 217.69)` | Blue Enchantment | white, 6.8 to 1 |
| 14 | `#126b75` | `oklch(48.28% 0.0781 207.15)` | Toadstool Teal | white, 6.2 to 1 |
| 15 | `#147274` | `oklch(50.20% 0.0803 197.18)` | Greeny Glaze | white, 5.7 to 1 |
| 16 | `#197973` | `oklch(52.15% 0.0842 188.27)` | Hydra Turquoise | white, 5.2 to 1 |
| 17 | `#1c8072` | `oklch(54.15% 0.0902 180.80)` | Elegant Silk | white, 4.7 to 1 |
| 18 | `#1c8771` | `oklch(56.13% 0.0992 174.21)` | Summer Turquoise | black, 4.7 to 1 |
| 19 | `#1b8f6e` | `oklch(58.10% 0.1103 168.29)` | Observatory | black, 5.2 to 1 |
| 20 | `#1c976b` | `oklch(60.10% 0.1226 162.90)` | Rainforest | black, 5.6 to 1 |
| 21 | `#229e66` | `oklch(62.13% 0.1352 157.93)` | Surgeon | black, 6.1 to 1 |
| 22 | `#2ea660` | `oklch(64.22% 0.1469 153.25)` | Secret Garden | black, 6.7 to 1 |
| 23 | `#3dad5a` | `oklch(66.41% 0.1569 148.74)` | Devil’s Grass | black, 7.3 to 1 |
| 24 | `#4fb454` | `oklch(68.70% 0.1641 144.28)` | Artificial Turf | black, 7.9 to 1 |
| 25 | `#64bb4e` | `oklch(71.21% 0.1679 139.78)` | Range Land | black, 8.7 to 1 |
| 26 | `#79c24c` | `oklch(74.10% 0.1692 135.30)` | Conceptual | black, 9.6 to 1 |
| 27 | `#8eca4c` | `oklch(77.19% 0.1685 130.94)` | Lone Hunter | black, 10.6 to 1 |
| 28 | `#a2d24f` | `oklch(80.34% 0.1664 126.81)` | Burst of Lime | black, 11.8 to 1 |
| 29 | `#b5d955` | `oklch(83.38% 0.1637 123.02)` | Badass Grass | black, 13 to 1 |
| 30 | `#c5e05b` | `oklch(86.14% 0.1608 119.65)` | Queen of Gardens | black, 14.2 to 1 |
| 31 | `#d2e661` | `oklch(88.45% 0.1584 116.82)` | Maximum Green Yellow | black, 15.2 to 1 |
| 32 | `#dcea65` | `oklch(90.16% 0.1571 114.63)` | Mindaro | black, 16 to 1 |

## CSS

```css
background: linear-gradient(315deg, #181634 0.0%, #1a1938 3.2%, #1d1d3e 6.5%, #202345 9.7%, #23294d 12.9%, #263055 16.1%, #28375d 19.4%, #293e65 22.6%, #28456b 25.8%, #244c70 29.0%, #1f5474 32.3%, #195c75 35.5%, #146375 38.7%, #126b75 41.9%, #147274 45.2%, #197973 48.4%, #1c8072 51.6%, #1c8771 54.8%, #1b8f6e 58.1%, #1c976b 61.3%, #229e66 64.5%, #2ea660 67.7%, #3dad5a 71.0%, #4fb454 74.2%, #64bb4e 77.4%, #79c24c 80.6%, #8eca4c 83.9%, #a2d24f 87.1%, #b5d955 90.3%, #c5e05b 93.5%, #d2e661 96.8%, #dcea65 100.0%);
background: linear-gradient(315deg in oklch, oklch(22.05% 0.0565 284.77) 0.0%, oklch(23.35% 0.0580 282.89) 3.2%, oklch(25.10% 0.0600 280.75) 6.5%, oklch(27.18% 0.0624 278.21) 9.7%, oklch(29.48% 0.0650 275.17) 12.9%, oklch(31.89% 0.0677 271.51) 16.1%, oklch(34.31% 0.0704 267.11) 19.4%, oklch(36.61% 0.0728 261.86) 22.6%, oklch(38.69% 0.0749 255.61) 25.8%, oklch(40.66% 0.0760 247.76) 29.0%, oklch(42.58% 0.0764 238.49) 32.3%, oklch(44.49% 0.0766 228.31) 35.5%, oklch(46.38% 0.0770 217.69) 38.7%, oklch(48.28% 0.0781 207.15) 41.9%, oklch(50.20% 0.0803 197.18) 45.2%, oklch(52.15% 0.0842 188.27) 48.4%, oklch(54.15% 0.0902 180.80) 51.6%, oklch(56.13% 0.0992 174.21) 54.8%, oklch(58.10% 0.1103 168.29) 58.1%, oklch(60.10% 0.1226 162.90) 61.3%, oklch(62.13% 0.1352 157.93) 64.5%, oklch(64.22% 0.1469 153.25) 67.7%, oklch(66.41% 0.1569 148.74) 71.0%, oklch(68.70% 0.1641 144.28) 74.2%, oklch(71.21% 0.1679 139.78) 77.4%, oklch(74.10% 0.1692 135.30) 80.6%, oklch(77.19% 0.1685 130.94) 83.9%, oklch(80.34% 0.1664 126.81) 87.1%, oklch(83.38% 0.1637 123.02) 90.3%, oklch(86.14% 0.1608 119.65) 93.5%, oklch(88.45% 0.1584 116.82) 96.8%, oklch(90.16% 0.1571 114.63) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.22 | 0.056 | 284.8 |
| 2 | 0.382 | 0.074 | 257.3 |
| 3 | 0.531 | 0.087 | 184.4 |
| 4 | 0.693 | 0.165 | 143.2 |
| 5 | 0.902 | 0.157 | 114.6 |

## In these collections

- [Sequential data gradients](https://grabient.com/sequential-data-gradients)

## Other forms

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