# Brown, gray, teal and navy linear gradient

Brown, gray, teal and navy linear gradient with 32 colors: #a87655, #a67c5a, #a48463, #a18c6f, #9e937a, #9c9882, #989b87, #929e8a, #8aa08f, #80a196, #76a19c, #6e9fa0, #649ca1, #5998a0, #4c939e, #3f8d9c, #348698, #297e93, #1f758d, #156b86, #0b617e, #045876, #014e6d, #004463, #003a5a, #013050, #002746, #001e3c, #001531, #000c27, #00061f, #000319. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kamzkm1gtFdWRyrLHcJuB9B6KaQgOlEGg`
- Page: https://grabient.com/kamzkm1gtFdWRyrLHcJuB9B6KaQgOlEGg?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: light center, vivid, cool
- Hues: complementary
- Contrast of its darkest and lightest colors: 7.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 | `#a87655` | `oklch(61.02% 0.0785 54.14)` | New England Roast | black, 5.4 to 1 |
| 2 | `#a67c5a` | `oklch(62.00% 0.0712 59.54)` | Café au Lait | black, 5.6 to 1 |
| 3 | `#a48463` | `oklch(63.45% 0.0603 66.72)` | Crumbling Cork | black, 6 to 1 |
| 4 | `#a18c6f` | `oklch(65.07% 0.0483 75.63)` | Arava | black, 6.4 to 1 |
| 5 | `#9e937a` | `oklch(66.55% 0.0377 86.22)` | Desert Shadows | black, 6.8 to 1 |
| 6 | `#9c9882` | `oklch(67.60% 0.0309 98.44)` | Pebble | black, 7.2 to 1 |
| 7 | `#989b87` | `oklch(68.14% 0.0293 113.54)` | Lemongrass | black, 7.3 to 1 |
| 8 | `#929e8a` | `oklch(68.42% 0.0312 132.44)` | Charcoal Tint | black, 7.4 to 1 |
| 9 | `#8aa08f` | `oklch(68.43% 0.0354 152.73)` | Hillside View | black, 7.5 to 1 |
| 10 | `#80a196` | `oklch(68.16% 0.0409 171.92)` | Australian Jade | black, 7.4 to 1 |
| 11 | `#76a19c` | `oklch(67.58% 0.0465 187.54)` | Delaware Blue Hen | black, 7.3 to 1 |
| 12 | `#6e9fa0` | `oklch(66.69% 0.0520 197.69)` | Delaware Blue Hen | black, 7 to 1 |
| 13 | `#649ca1` | `oklch(65.47% 0.0588 203.65)` | Beach Blue | black, 6.7 to 1 |
| 14 | `#5998a0` | `oklch(63.96% 0.0662 206.91)` | Star City | black, 6.4 to 1 |
| 15 | `#4c939e` | `oklch(62.18% 0.0734 208.91)` | Teal Trinket | black, 5.9 to 1 |
| 16 | `#3f8d9c` | `oklch(60.15% 0.0792 211.07)` | Scooter | black, 5.5 to 1 |
| 17 | `#348698` | `oklch(57.88% 0.0829 214.45)` | Precious Stone | black, 5 to 1 |
| 18 | `#297e93` | `oklch(55.26% 0.0852 217.84)` | Valley of Glaciers | white, 4.6 to 1 |
| 19 | `#1f758d` | `oklch(52.37% 0.0862 221.04)` | Enamel Blue | white, 5.2 to 1 |
| 20 | `#156b86` | `oklch(49.30% 0.0864 224.18)` | Saxony Blue | white, 6 to 1 |
| 21 | `#0b617e` | `oklch(46.17% 0.0860 227.36)` | Blue Sapphire | white, 6.9 to 1 |
| 22 | `#045876` | `oklch(43.06% 0.0851 230.70)` | Broadway | white, 7.9 to 1 |
| 23 | `#014e6d` | `oklch(39.84% 0.0832 234.20)` | Gemstone Blue | white, 9.1 to 1 |
| 24 | `#004463` | `oklch(36.52% 0.0806 237.78)` | Lush Aqua | white, 10.5 to 1 |
| 25 | `#003a5a` | `oklch(33.17% 0.0775 241.34)` | Gibraltar Sea | white, 12 to 1 |
| 26 | `#013050` | `oklch(29.85% 0.0742 244.80)` | Indigo Black | white, 13.6 to 1 |
| 27 | `#002746` | `oklch(26.63% 0.0712 248.06)` | Rhapsody in Blue | white, 15.2 to 1 |
| 28 | `#001e3c` | `oklch(23.22% 0.0678 251.37)` | Midnight Mirage | white, 16.8 to 1 |
| 29 | `#001531` | `oklch(19.67% 0.0641 254.71)` | Squid’s Ink | white, 18.2 to 1 |
| 30 | `#000c27` | `oklch(16.32% 0.0604 257.98)` | Void | white, 19.3 to 1 |
| 31 | `#00061f` | `oklch(13.47% 0.0572 260.71)` | Melanophobia | white, 20 to 1 |
| 32 | `#000319` | `oklch(11.43% 0.0550 262.51)` | Hadopelagic Water | white, 20.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #a87655 0.0%, #a67c5a 3.2%, #a48463 6.5%, #a18c6f 9.7%, #9e937a 12.9%, #9c9882 16.1%, #989b87 19.4%, #929e8a 22.6%, #8aa08f 25.8%, #80a196 29.0%, #76a19c 32.3%, #6e9fa0 35.5%, #649ca1 38.7%, #5998a0 41.9%, #4c939e 45.2%, #3f8d9c 48.4%, #348698 51.6%, #297e93 54.8%, #1f758d 58.1%, #156b86 61.3%, #0b617e 64.5%, #045876 67.7%, #014e6d 71.0%, #004463 74.2%, #003a5a 77.4%, #013050 80.6%, #002746 83.9%, #001e3c 87.1%, #001531 90.3%, #000c27 93.5%, #00061f 96.8%, #000319 100.0%);
background: linear-gradient(90deg in oklch, oklch(61.02% 0.0785 54.14) 0.0%, oklch(62.00% 0.0712 59.54) 3.2%, oklch(63.45% 0.0603 66.72) 6.5%, oklch(65.07% 0.0483 75.63) 9.7%, oklch(66.55% 0.0377 86.22) 12.9%, oklch(67.60% 0.0309 98.44) 16.1%, oklch(68.14% 0.0293 113.54) 19.4%, oklch(68.42% 0.0312 132.44) 22.6%, oklch(68.43% 0.0354 152.73) 25.8%, oklch(68.16% 0.0409 171.92) 29.0%, oklch(67.58% 0.0465 187.54) 32.3%, oklch(66.69% 0.0520 197.69) 35.5%, oklch(65.47% 0.0588 203.65) 38.7%, oklch(63.96% 0.0662 206.91) 41.9%, oklch(62.18% 0.0734 208.91) 45.2%, oklch(60.15% 0.0792 211.07) 48.4%, oklch(57.88% 0.0829 214.45) 51.6%, oklch(55.26% 0.0852 217.84) 54.8%, oklch(52.37% 0.0862 221.04) 58.1%, oklch(49.30% 0.0864 224.18) 61.3%, oklch(46.17% 0.0860 227.36) 64.5%, oklch(43.06% 0.0851 230.70) 67.7%, oklch(39.84% 0.0832 234.20) 71.0%, oklch(36.52% 0.0806 237.78) 74.2%, oklch(33.17% 0.0775 241.34) 77.4%, oklch(29.85% 0.0742 244.80) 80.6%, oklch(26.63% 0.0712 248.06) 83.9%, oklch(23.22% 0.0678 251.37) 87.1%, oklch(19.67% 0.0641 254.71) 90.3%, oklch(16.32% 0.0604 257.98) 93.5%, oklch(13.47% 0.0572 260.71) 96.8%, oklch(11.43% 0.0550 262.51) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.61 | 0.079 | 54.1 |
| 2 | 0.677 | 0.03 | 100.6 |
| 3 | 0.673 | 0.048 | 191.5 |
| 4 | 0.591 | 0.081 | 212.7 |
| 5 | 0.441 | 0.085 | 229.6 |
| 6 | 0.272 | 0.072 | 247.5 |
| 7 | 0.114 | 0.055 | 262.3 |

## In these collections

- [App background gradients](https://grabient.com/app-background-gradients)
- [Coastal gradients](https://grabient.com/coastal-gradients)
- [Retro gradients](https://grabient.com/retro-gradients)
- [Desktop wallpaper gradients](https://grabient.com/desktop-wallpaper-gradients)

## Other forms

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