# Navy, teal and orange linear gradient

Navy, teal and orange linear gradient with 40 colors: #061c24, #082029, #0a2730, #0d2e39, #103743, #14404f, #174b5b, #1a5667, #1d6173, #1e6c7e, #1c7788, #18818f, #108993, #049193, #00968e, #139b83, #319d71, #509c5a, #6e983c, #8a900e, #9f8600, #ae7c00, #bc7100, #c86300, #cb5a23, #cb5431, #c85135, #c4502f, #bc501f, #b05300, #9d5a00, #8a5e00, #776000, #636100, #4b6116, #345f2c, #1f5c3a, #0d5843, #035448, #02504b. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUNhegy6S8kq5rKxmNHg`
- Page: https://grabient.com/kUNhegy6S8kq5rKxmNHg?steps=40&angle=135
- Drawn as: linear gradient, 40 steps, 135 degrees
- Kinds: light center, vivid, multicolor
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 5.2 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 | `#061c24` | `oklch(21.26% 0.0317 225.70)` | Black Stallion | white, 17.5 to 1 |
| 2 | `#082029` | `oklch(23.05% 0.0348 224.81)` | Crow Feather | white, 16.7 to 1 |
| 3 | `#0a2730` | `oklch(25.42% 0.0386 224.23)` | Black Box | white, 15.6 to 1 |
| 4 | `#0d2e39` | `oklch(28.26% 0.0431 223.82)` | Black Chasm | white, 14.3 to 1 |
| 5 | `#103743` | `oklch(31.47% 0.0482 223.43)` | Firmament Blue | white, 12.7 to 1 |
| 6 | `#14404f` | `oklch(34.94% 0.0537 222.92)` | Cold and Dark | white, 11.1 to 1 |
| 7 | `#174b5b` | `oklch(38.57% 0.0595 222.14)` | Ethereal Dance | white, 9.5 to 1 |
| 8 | `#1a5667` | `oklch(42.24% 0.0656 220.96)` | Corsair | white, 8.1 to 1 |
| 9 | `#1d6173` | `oklch(45.86% 0.0718 219.22)` | Holiday Velvet | white, 6.9 to 1 |
| 10 | `#1e6c7e` | `oklch(49.32% 0.0779 216.78)` | Allports | white, 6 to 1 |
| 11 | `#1c7788` | `oklch(52.51% 0.0840 213.50)` | Biscay Bay | white, 5.2 to 1 |
| 12 | `#18818f` | `oklch(55.34% 0.0899 209.24)` | Pagoda Blue | white, 4.6 to 1 |
| 13 | `#108993` | `oklch(57.68% 0.0955 203.84)` | Tuscana Blue | black, 5 to 1 |
| 14 | `#049193` | `oklch(59.45% 0.1006 197.17)` | Common Teal | black, 5.4 to 1 |
| 15 | `#00968e` | `oklch(60.72% 0.1055 188.19)` | Reef Encounter | black, 5.7 to 1 |
| 16 | `#139b83` | `oklch(61.66% 0.1116 176.37)` | Reptilian Green | black, 6 to 1 |
| 17 | `#319d71` | `oklch(62.32% 0.1177 162.33)` | Bulma Hair | black, 6.1 to 1 |
| 18 | `#509c5a` | `oklch(62.70% 0.1241 146.67)` | Clover Patch | black, 6.2 to 1 |
| 19 | `#6e983c` | `oklch(62.84% 0.1304 130.02)` | Lattice Green | black, 6.2 to 1 |
| 20 | `#8a900e` | `oklch(62.78% 0.1366 112.98)` | Old Asparagus | black, 6 to 1 |
| 21 | `#9f8600` | `oklch(62.53% 0.1287 96.16)` | Captain Kirk | black, 5.9 to 1 |
| 22 | `#ae7c00` | `oklch(62.12% 0.1286 80.18)` | Brown Butter | black, 5.7 to 1 |
| 23 | `#bc7100` | `oklch(61.58% 0.1374 65.66)` | Sweet Mulled Cider | black, 5.4 to 1 |
| 24 | `#c86300` | `oklch(60.93% 0.1542 53.21)` | Kvass | black, 5.2 to 1 |
| 25 | `#cb5a23` | `oklch(60.21% 0.1579 43.47)` | Bright Delight | black, 5 to 1 |
| 26 | `#cb5431` | `oklch(59.45% 0.1589 37.00)` | Bronze Satin | black, 4.8 to 1 |
| 27 | `#c85135` | `oklch(58.66% 0.1585 34.43)` | Fox | black, 4.6 to 1 |
| 28 | `#c4502f` | `oklch(57.71% 0.1561 36.23)` | Trinidad | white, 4.6 to 1 |
| 29 | `#bc501f` | `oklch(56.48% 0.1518 42.02)` | Roland-Garros | white, 4.8 to 1 |
| 30 | `#b05300` | `oklch(55.01% 0.1431 51.13)` | Mahogany Finish | white, 5.1 to 1 |
| 31 | `#9d5a00` | `oklch(53.35% 0.1217 62.98)` | Sepia Wash | white, 5.3 to 1 |
| 32 | `#8a5e00` | `oklch(51.57% 0.1079 76.92)` | Rat Brown | white, 5.7 to 1 |
| 33 | `#776000` | `oklch(49.71% 0.1017 92.30)` | Spicy Mustard | white, 6 to 1 |
| 34 | `#636100` | `oklch(47.83% 0.1034 108.49)` | Green Brown | white, 6.4 to 1 |
| 35 | `#4b6116` | `oklch(45.97% 0.1026 124.82)` | Camouflage Green | white, 6.9 to 1 |
| 36 | `#345f2c` | `oklch(44.20% 0.0937 140.68)` | Deep Into the Wood | white, 7.4 to 1 |
| 37 | `#1f5c3a` | `oklch(42.56% 0.0853 155.43)` | Greenbriar | white, 7.9 to 1 |
| 38 | `#0d5843` | `oklch(41.11% 0.0780 168.42)` | Billiard Table | white, 8.4 to 1 |
| 39 | `#035448` | `oklch(39.90% 0.0719 179.02)` | Breathe Deeply | white, 8.9 to 1 |
| 40 | `#02504b` | `oklch(38.98% 0.0675 186.60)` | Action Green | white, 9.2 to 1 |

## CSS

```css
background: linear-gradient(135deg, #061c24 0.0%, #082029 2.6%, #0a2730 5.1%, #0d2e39 7.7%, #103743 10.3%, #14404f 12.8%, #174b5b 15.4%, #1a5667 17.9%, #1d6173 20.5%, #1e6c7e 23.1%, #1c7788 25.6%, #18818f 28.2%, #108993 30.8%, #049193 33.3%, #00968e 35.9%, #139b83 38.5%, #319d71 41.0%, #509c5a 43.6%, #6e983c 46.2%, #8a900e 48.7%, #9f8600 51.3%, #ae7c00 53.8%, #bc7100 56.4%, #c86300 59.0%, #cb5a23 61.5%, #cb5431 64.1%, #c85135 66.7%, #c4502f 69.2%, #bc501f 71.8%, #b05300 74.4%, #9d5a00 76.9%, #8a5e00 79.5%, #776000 82.1%, #636100 84.6%, #4b6116 87.2%, #345f2c 89.7%, #1f5c3a 92.3%, #0d5843 94.9%, #035448 97.4%, #02504b 100.0%);
background: linear-gradient(135deg in oklch, oklch(21.26% 0.0317 225.70) 0.0%, oklch(23.05% 0.0348 224.81) 2.6%, oklch(25.42% 0.0386 224.23) 5.1%, oklch(28.26% 0.0431 223.82) 7.7%, oklch(31.47% 0.0482 223.43) 10.3%, oklch(34.94% 0.0537 222.92) 12.8%, oklch(38.57% 0.0595 222.14) 15.4%, oklch(42.24% 0.0656 220.96) 17.9%, oklch(45.86% 0.0718 219.22) 20.5%, oklch(49.32% 0.0779 216.78) 23.1%, oklch(52.51% 0.0840 213.50) 25.6%, oklch(55.34% 0.0899 209.24) 28.2%, oklch(57.68% 0.0955 203.84) 30.8%, oklch(59.45% 0.1006 197.17) 33.3%, oklch(60.72% 0.1055 188.19) 35.9%, oklch(61.66% 0.1116 176.37) 38.5%, oklch(62.32% 0.1177 162.33) 41.0%, oklch(62.70% 0.1241 146.67) 43.6%, oklch(62.84% 0.1304 130.02) 46.2%, oklch(62.78% 0.1366 112.98) 48.7%, oklch(62.53% 0.1287 96.16) 51.3%, oklch(62.12% 0.1286 80.18) 53.8%, oklch(61.58% 0.1374 65.66) 56.4%, oklch(60.93% 0.1542 53.21) 59.0%, oklch(60.21% 0.1579 43.47) 61.5%, oklch(59.45% 0.1589 37.00) 64.1%, oklch(58.66% 0.1585 34.43) 66.7%, oklch(57.71% 0.1561 36.23) 69.2%, oklch(56.48% 0.1518 42.02) 71.8%, oklch(55.01% 0.1431 51.13) 74.4%, oklch(53.35% 0.1217 62.98) 76.9%, oklch(51.57% 0.1079 76.92) 79.5%, oklch(49.71% 0.1017 92.30) 82.1%, oklch(47.83% 0.1034 108.49) 84.6%, oklch(45.97% 0.1026 124.82) 87.2%, oklch(44.20% 0.0937 140.68) 89.7%, oklch(42.56% 0.0853 155.43) 92.3%, oklch(41.11% 0.0780 168.42) 94.9%, oklch(39.90% 0.0719 179.02) 97.4%, oklch(38.98% 0.0675 186.60) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.213 | 0.032 | 225.7 |
| 2 | 0.594 | 0.101 | 197.2 |
| 3 | 0.587 | 0.158 | 34.4 |
| 4 | 0.39 | 0.068 | 186.6 |

## In these collections

- [Teal and orange](https://grabient.com/teal-and-orange)

## Other forms

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