# Navy, beige, orange and brown linear gradient

Navy, beige, orange and brown linear gradient with 7 colors: #001e44, #1235bd, #5e9bf6, #aad9a9, #fba885, #d56e00, #8f3c00. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYPUm1utBBGMoPJqnSq1sG_7qzPs`
- Page: https://grabient.com/kYPUm1utBBGMoPJqnSq1sG_7qzPs
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: light center, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 10.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 | `#001e44` | `oklch(24.03% 0.0804 255.44)` | Midnight Mirage | white, 16.5 to 1 |
| 2 | `#1235bd` | `oklch(41.56% 0.2124 265.25)` | Blue Screen of Death | white, 9.2 to 1 |
| 3 | `#5e9bf6` | `oklch(68.88% 0.1496 258.33)` | Blue Chaos | black, 7.4 to 1 |
| 4 | `#aad9a9` | `oklch(83.88% 0.0819 144.61)` | Fizz | black, 13.1 to 1 |
| 5 | `#fba885` | `oklch(80.45% 0.1090 43.61)` | Peach Fizz | black, 11 to 1 |
| 6 | `#d56e00` | `oklch(64.55% 0.1591 55.40)` | Marmalade | black, 6 to 1 |
| 7 | `#8f3c00` | `oklch(46.06% 0.1274 46.99)` | Espresso Martini | white, 7.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #001e44 0.0%, #1235bd 16.7%, #5e9bf6 33.3%, #aad9a9 50.0%, #fba885 66.7%, #d56e00 83.3%, #8f3c00 100.0%);
background: linear-gradient(90deg in oklch, oklch(24.03% 0.0804 255.44) 0.0%, oklch(41.56% 0.2124 265.25) 16.7%, oklch(68.88% 0.1496 258.33) 33.3%, oklch(83.88% 0.0819 144.61) 50.0%, oklch(80.45% 0.1090 43.61) 66.7%, oklch(64.55% 0.1591 55.40) 83.3%, oklch(46.06% 0.1274 46.99) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.24 | 0.101 | 255.2 |
| 2 | 0.461 | 0.22 | 264.7 |
| 3 | 0.78 | 0.11 | 236.2 |
| 4 | 0.839 | 0.08 | 56.6 |
| 5 | 0.681 | 0.181 | 56.6 |
| 6 | 0.461 | 0.141 | 47.1 |

## In these collections

- [Blue and orange swatches](https://grabient.com/blue-and-orange-swatches)
- [Split complementary swatches](https://grabient.com/split-complementary-swatches)

## Other forms

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