# Gray, navy, tan and black linear gradient

Gray, navy, tan and black linear gradient with 7 colors: #879071, #0d2938, #1b424c, #d9c59f, #837d5c, #1b362c, #030a16. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWoiJWlw_QemUKu1j8UkgtO4`
- Page: https://grabient.com/kWoiJWlw_QemUKu1j8UkgtO4
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center
- Hues: two-hue
- Contrast of its darkest and lightest colors: 11.7 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 | `#879071` | `oklch(63.78% 0.0469 121.64)` | Battleship Green | black, 6.2 to 1 |
| 2 | `#0d2938` | `oklch(26.83% 0.0430 232.95)` | Murky Depths | white, 15 to 1 |
| 3 | `#1b424c` | `oklch(35.49% 0.0465 217.22)` | Winter Waves | white, 10.9 to 1 |
| 4 | `#d9c59f` | `oklch(83.07% 0.0551 83.60)` | Afternoon Stroll | black, 12.4 to 1 |
| 5 | `#837d5c` | `oklch(58.73% 0.0478 98.86)` | Dried Herb | black, 5 to 1 |
| 6 | `#1b362c` | `oklch(30.81% 0.0381 168.84)` | Medium Jungle Green | white, 13 to 1 |
| 7 | `#030a16` | `oklch(14.17% 0.0303 254.79)` | Dark Rift | white, 19.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #879071 0.0%, #0d2938 16.7%, #1b424c 33.3%, #d9c59f 50.0%, #837d5c 66.7%, #1b362c 83.3%, #030a16 100.0%);
background: linear-gradient(90deg in oklch, oklch(63.78% 0.0469 121.64) 0.0%, oklch(26.83% 0.0430 232.95) 16.7%, oklch(35.49% 0.0465 217.22) 33.3%, oklch(83.07% 0.0551 83.60) 50.0%, oklch(58.73% 0.0478 98.86) 66.7%, oklch(30.81% 0.0381 168.84) 83.3%, oklch(14.17% 0.0303 254.79) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.638 | 0.047 | 121.6 |
| 2 | 0.181 | 0.043 | 261.1 |
| 3 | 0.831 | 0.055 | 83.6 |
| 4 | 0.421 | 0.043 | 128 |
| 5 | 0.142 | 0.03 | 254.8 |

## In these collections

- [Navy and gold swatches](https://grabient.com/navy-and-gold-swatches)

## Other forms

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