# Black, brown, navy and tan linear gradient

Black, brown, navy and tan linear gradient with 7 colors: #07090f, #2b1225, #914e2f, #704b61, #222830, #093f50, #b49b54. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYJAm9IRXJ0gmxuoBS8pZM9Viira`
- Page: https://grabient.com/kYJAm9IRXJ0gmxuoBS8pZM9Viira
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark
- Hues: two-hue
- 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 | `#07090f` | `oklch(14.17% 0.0124 265.78)` | Narwhal Grey | white, 19.8 to 1 |
| 2 | `#2b1225` | `oklch(22.79% 0.0509 335.79)` | Black Cherry | white, 17.2 to 1 |
| 3 | `#914e2f` | `oklch(49.90% 0.1008 44.49)` | Khaki Brown | white, 6.2 to 1 |
| 4 | `#704b61` | `oklch(46.14% 0.0605 342.73)` | Prussian Plum | white, 7.3 to 1 |
| 5 | `#222830` | `oklch(27.56% 0.0168 255.49)` | Infinity | white, 14.7 to 1 |
| 6 | `#093f50` | `oklch(34.25% 0.0597 224.79)` | Duskwood | white, 11.4 to 1 |
| 7 | `#b49b54` | `oklch(69.69% 0.0951 90.36)` | Viva Las Vegas | black, 7.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #07090f 0.0%, #2b1225 16.7%, #914e2f 33.3%, #704b61 50.0%, #222830 66.7%, #093f50 83.3%, #b49b54 100.0%);
background: linear-gradient(90deg in oklch, oklch(14.17% 0.0124 265.78) 0.0%, oklch(22.79% 0.0509 335.79) 16.7%, oklch(49.90% 0.1008 44.49) 33.3%, oklch(46.14% 0.0605 342.73) 50.0%, oklch(27.56% 0.0168 255.49) 66.7%, oklch(34.25% 0.0597 224.79) 83.3%, oklch(69.69% 0.0951 90.36) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.142 | 0.012 | 265.8 |
| 2 | 0.26 | 0.059 | 349.3 |
| 3 | 0.567 | 0.106 | 408.4 |
| 4 | 0.315 | 0.014 | 266.8 |
| 5 | 0.295 | 0.052 | 244.6 |
| 6 | 0.697 | 0.095 | 90.4 |

## Other forms

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