# Navy teal olive diagonal

Tritone blue, teal and olive linear gradient with 48 colors: #2354b7, #2153b4, #1f52b1, #1e51ad, #1c50a8, #1b4ea3, #1a4c9e, #194a98, #184892, #16468d, #154387, #144181, #133f7b, #113d75, #103c70, #0e3a6a, #0d3966, #0b3761, #0a375d, #08365a, #073657, #053655, #033754, #013953, #003a52, #003d52, #004052, #004453, #004854, #004d55, #005356, #005957, #005f58, #006658, #116c56, #227254, #317851, #407d4e, #4e824a, #5d8745, #6b8b40, #798e3b, #869137, #929433, #9d9630, #a7982e, #b0992d, #b79a2d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Tritone blue, teal and olive linear gradient
- Seed: `kSeHi6qZk8tguLy`
- Page: https://grabient.com/kSeHi6qZk8tguLy?steps=48&angle=45
- Drawn as: linear gradient, 48 steps, 45 degrees
- Kinds: dark center, vivid, cool, multicolor
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 4.5 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 | `#2354b7` | `oklch(47.24% 0.1654 262.27)` | Cerulean Blue | white, 6.9 to 1 |
| 2 | `#2153b4` | `oklch(46.86% 0.1630 261.73)` | Blizzy Blueberry | white, 7 to 1 |
| 3 | `#1f52b1` | `oklch(46.35% 0.1601 261.28)` | Blizzy Blueberry | white, 7.2 to 1 |
| 4 | `#1e51ad` | `oklch(45.73% 0.1566 260.90)` | Aarhusian Sky | white, 7.4 to 1 |
| 5 | `#1c50a8` | `oklch(45.00% 0.1527 260.57)` | The Blues Brothers | white, 7.6 to 1 |
| 6 | `#1b4ea3` | `oklch(44.19% 0.1484 260.26)` | Sea of Tears | white, 7.8 to 1 |
| 7 | `#1a4c9e` | `oklch(43.31% 0.1438 259.97)` | Sea of Tears | white, 8.1 to 1 |
| 8 | `#194a98` | `oklch(42.38% 0.1389 259.65)` | Cascade Twilight | white, 8.4 to 1 |
| 9 | `#184892` | `oklch(41.41% 0.1338 259.31)` | Nuit Blanche | white, 8.8 to 1 |
| 10 | `#16468d` | `oklch(40.41% 0.1285 258.91)` | Mondrian Blue | white, 9.1 to 1 |
| 11 | `#154387` | `oklch(39.41% 0.1231 258.44)` | Pacific Depths | white, 9.5 to 1 |
| 12 | `#144181` | `oklch(38.41% 0.1176 257.87)` | Bracing Blue | white, 9.9 to 1 |
| 13 | `#133f7b` | `oklch(37.43% 0.1122 257.20)` | Twilight Blue | white, 10.3 to 1 |
| 14 | `#113d75` | `oklch(36.49% 0.1068 256.39)` | Ashenvale Nights | white, 10.7 to 1 |
| 15 | `#103c70` | `oklch(35.60% 0.1015 255.42)` | Tardis Blue | white, 11.1 to 1 |
| 16 | `#0e3a6a` | `oklch(34.78% 0.0964 254.28)` | Ateneo Blue | white, 11.4 to 1 |
| 17 | `#0d3966` | `oklch(34.05% 0.0916 252.95)` | Lost in Space | white, 11.7 to 1 |
| 18 | `#0b3761` | `oklch(33.41% 0.0871 251.41)` | Lost in Space | white, 12 to 1 |
| 19 | `#0a375d` | `oklch(32.88% 0.0829 249.63)` | Incremental Blue | white, 12.2 to 1 |
| 20 | `#08365a` | `oklch(32.48% 0.0791 247.60)` | Incremental Blue | white, 12.4 to 1 |
| 21 | `#073657` | `oklch(32.22% 0.0758 245.30)` | Incremental Blue | white, 12.5 to 1 |
| 22 | `#053655` | `oklch(32.13% 0.0731 242.70)` | Incremental Blue | white, 12.5 to 1 |
| 23 | `#033754` | `oklch(32.20% 0.0709 239.79)` | Incremental Blue | white, 12.4 to 1 |
| 24 | `#013953` | `oklch(32.47% 0.0694 236.54)` | Gibraltar Sea | white, 12.3 to 1 |
| 25 | `#003a52` | `oklch(32.95% 0.0681 232.99)` | Gibraltar Sea | white, 12 to 1 |
| 26 | `#003d52` | `oklch(33.66% 0.0662 228.75)` | Duskwood | white, 11.7 to 1 |
| 27 | `#004052` | `oklch(34.59% 0.0649 223.92)` | Maniac Mansion | white, 11.2 to 1 |
| 28 | `#004453` | `oklch(35.72% 0.0644 218.57)` | Crab Nebula | white, 10.7 to 1 |
| 29 | `#004854` | `oklch(37.03% 0.0647 212.76)` | Midnight Green | white, 10.1 to 1 |
| 30 | `#004d55` | `oklch(38.51% 0.0660 206.54)` | Watercolour Blue | white, 9.5 to 1 |
| 31 | `#005356` | `oklch(40.12% 0.0682 199.98)` | Ice Dark Turquoise | white, 8.8 to 1 |
| 32 | `#005957` | `oklch(41.85% 0.0717 193.13)` | Deep Sea Green | white, 8.2 to 1 |
| 33 | `#005f58` | `oklch(43.68% 0.0766 186.06)` | Tidal Pool | white, 7.5 to 1 |
| 34 | `#006658` | `oklch(45.59% 0.0834 178.83)` | Dancing Dragonfly | white, 6.9 to 1 |
| 35 | `#116c56` | `oklch(47.56% 0.0874 171.50)` | Teal Dark Green | white, 6.3 to 1 |
| 36 | `#227254` | `oklch(49.57% 0.0909 164.12)` | Green Velvet | white, 5.8 to 1 |
| 37 | `#317851` | `oklch(51.59% 0.0945 156.74)` | Canadian Pine | white, 5.3 to 1 |
| 38 | `#407d4e` | `oklch(53.62% 0.0982 149.44)` | Kemp Kelly | white, 4.9 to 1 |
| 39 | `#4e824a` | `oklch(55.62% 0.1018 142.26)` | Tarmac Green | black, 4.6 to 1 |
| 40 | `#5d8745` | `oklch(57.58% 0.1055 135.27)` | Beatnik | black, 5 to 1 |
| 41 | `#6b8b40` | `oklch(59.48% 0.1090 128.52)` | Makrut Lime | black, 5.3 to 1 |
| 42 | `#798e3b` | `oklch(61.29% 0.1123 122.09)` | Sassy Grass | black, 5.7 to 1 |
| 43 | `#869137` | `oklch(63.00% 0.1155 116.01)` | Wasabi Nuts | black, 6.1 to 1 |
| 44 | `#929433` | `oklch(64.59% 0.1185 110.36)` | Appletini | black, 6.5 to 1 |
| 45 | `#9d9630` | `oklch(66.03% 0.1211 105.20)` | Art Nouveau Green | black, 6.8 to 1 |
| 46 | `#a7982e` | `oklch(67.31% 0.1234 100.57)` | Pestulance | black, 7.1 to 1 |
| 47 | `#b0992d` | `oklch(68.40% 0.1253 96.55)` | High Strung | black, 7.4 to 1 |
| 48 | `#b79a2d` | `oklch(69.29% 0.1268 93.19)` | Sahara | black, 7.6 to 1 |

## CSS

```css
background: linear-gradient(45deg, #2354b7 0.0%, #2153b4 2.1%, #1f52b1 4.3%, #1e51ad 6.4%, #1c50a8 8.5%, #1b4ea3 10.6%, #1a4c9e 12.8%, #194a98 14.9%, #184892 17.0%, #16468d 19.1%, #154387 21.3%, #144181 23.4%, #133f7b 25.5%, #113d75 27.7%, #103c70 29.8%, #0e3a6a 31.9%, #0d3966 34.0%, #0b3761 36.2%, #0a375d 38.3%, #08365a 40.4%, #073657 42.6%, #053655 44.7%, #033754 46.8%, #013953 48.9%, #003a52 51.1%, #003d52 53.2%, #004052 55.3%, #004453 57.4%, #004854 59.6%, #004d55 61.7%, #005356 63.8%, #005957 66.0%, #005f58 68.1%, #006658 70.2%, #116c56 72.3%, #227254 74.5%, #317851 76.6%, #407d4e 78.7%, #4e824a 80.9%, #5d8745 83.0%, #6b8b40 85.1%, #798e3b 87.2%, #869137 89.4%, #929433 91.5%, #9d9630 93.6%, #a7982e 95.7%, #b0992d 97.9%, #b79a2d 100.0%);
background: linear-gradient(45deg in oklch, oklch(47.24% 0.1654 262.27) 0.0%, oklch(46.86% 0.1630 261.73) 2.1%, oklch(46.35% 0.1601 261.28) 4.3%, oklch(45.73% 0.1566 260.90) 6.4%, oklch(45.00% 0.1527 260.57) 8.5%, oklch(44.19% 0.1484 260.26) 10.6%, oklch(43.31% 0.1438 259.97) 12.8%, oklch(42.38% 0.1389 259.65) 14.9%, oklch(41.41% 0.1338 259.31) 17.0%, oklch(40.41% 0.1285 258.91) 19.1%, oklch(39.41% 0.1231 258.44) 21.3%, oklch(38.41% 0.1176 257.87) 23.4%, oklch(37.43% 0.1122 257.20) 25.5%, oklch(36.49% 0.1068 256.39) 27.7%, oklch(35.60% 0.1015 255.42) 29.8%, oklch(34.78% 0.0964 254.28) 31.9%, oklch(34.05% 0.0916 252.95) 34.0%, oklch(33.41% 0.0871 251.41) 36.2%, oklch(32.88% 0.0829 249.63) 38.3%, oklch(32.48% 0.0791 247.60) 40.4%, oklch(32.22% 0.0758 245.30) 42.6%, oklch(32.13% 0.0731 242.70) 44.7%, oklch(32.20% 0.0709 239.79) 46.8%, oklch(32.47% 0.0694 236.54) 48.9%, oklch(32.95% 0.0681 232.99) 51.1%, oklch(33.66% 0.0662 228.75) 53.2%, oklch(34.59% 0.0649 223.92) 55.3%, oklch(35.72% 0.0644 218.57) 57.4%, oklch(37.03% 0.0647 212.76) 59.6%, oklch(38.51% 0.0660 206.54) 61.7%, oklch(40.12% 0.0682 199.98) 63.8%, oklch(41.85% 0.0717 193.13) 66.0%, oklch(43.68% 0.0766 186.06) 68.1%, oklch(45.59% 0.0834 178.83) 70.2%, oklch(47.56% 0.0874 171.50) 72.3%, oklch(49.57% 0.0909 164.12) 74.5%, oklch(51.59% 0.0945 156.74) 76.6%, oklch(53.62% 0.0982 149.44) 78.7%, oklch(55.62% 0.1018 142.26) 80.9%, oklch(57.58% 0.1055 135.27) 83.0%, oklch(59.48% 0.1090 128.52) 85.1%, oklch(61.29% 0.1123 122.09) 87.2%, oklch(63.00% 0.1155 116.01) 89.4%, oklch(64.59% 0.1185 110.36) 91.5%, oklch(66.03% 0.1211 105.20) 93.6%, oklch(67.31% 0.1234 100.57) 95.7%, oklch(68.40% 0.1253 96.55) 97.9%, oklch(69.29% 0.1268 93.19) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.472 | 0.165 | 262.3 |
| 2 | 0.327 | 0.069 | 234.8 |
| 3 | 0.693 | 0.127 | 93.2 |

## In these collections

- [Yellow and blue gradients](https://grabient.com/yellow-and-blue-gradients)

## Other forms

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