# Navy, brown and tan linear gradient

Navy, brown and tan linear gradient with 7 colors: #354b62, #614049, #7d5b2f, #b78a3b, #e7dbb3, #d1b494, #7a2633. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWZyKwt5RTVQoQx1DUFMyq3A`
- Page: https://grabient.com/kWZyKwt5RTVQoQx1DUFMyq3A
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, muted, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 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 | `#354b62` | `oklch(40.55% 0.0469 248.20)` | Bluedgeons | white, 8.9 to 1 |
| 2 | `#614049` | `oklch(41.11% 0.0486 1.51)` | Catawba Grape | white, 9 to 1 |
| 3 | `#7d5b2f` | `oklch(49.62% 0.0748 71.53)` | Breen | white, 6.1 to 1 |
| 4 | `#b78a3b` | `oklch(66.14% 0.1102 78.42)` | Tinsel | black, 6.6 to 1 |
| 5 | `#e7dbb3` | `oklch(89.11% 0.0539 93.13)` | Rainforest Dew | black, 15.1 to 1 |
| 6 | `#d1b494` | `oklch(78.65% 0.0544 68.67)` | Baker’s Bread | black, 10.6 to 1 |
| 7 | `#7a2633` | `oklch(40.16% 0.1171 15.01)` | Amaranth Blossom | white, 9.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #354b62 0.0%, #614049 16.7%, #7d5b2f 33.3%, #b78a3b 50.0%, #e7dbb3 66.7%, #d1b494 83.3%, #7a2633 100.0%);
background: linear-gradient(90deg in oklch, oklch(40.55% 0.0469 248.20) 0.0%, oklch(41.11% 0.0486 1.51) 16.7%, oklch(49.62% 0.0748 71.53) 33.3%, oklch(66.14% 0.1102 78.42) 50.0%, oklch(89.11% 0.0539 93.13) 66.7%, oklch(78.65% 0.0544 68.67) 83.3%, oklch(40.16% 0.1171 15.01) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.406 | 0.047 | 248.2 |
| 2 | 0.437 | 0.055 | 412 |
| 3 | 0.661 | 0.11 | 438.4 |
| 4 | 0.921 | 0.036 | 450 |
| 5 | 0.402 | 0.117 | 375 |

## In these collections

- [Library card nostalgia](https://grabient.com/library-card-nostalgia)

## Other forms

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