# Complementary navy, gray and brown linear gradient

Complementary navy, gray and brown linear gradient with 14 colors: #000b16, #011525, #0f2535, #1d3a45, #3a554f, #616c58, #7f7f5c, #9a8c56, #ac8f4b, #b1873f, #aa792f, #976420, #774810, #5f3505. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYJCCrJg8_UONMvUITuSyc-C-ePq`
- Page: https://grabient.com/kYJCCrJg8_UONMvUITuSyc-C-ePq?steps=14
- Drawn as: linear gradient, 14 steps, 90 degrees
- Kinds: light center, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 6.4 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 | `#000b16` | `oklch(14.22% 0.0335 241.57)` | Black Knight | white, 19.8 to 1 |
| 2 | `#011525` | `oklch(18.74% 0.0434 243.58)` | Creeping Death | white, 18.5 to 1 |
| 3 | `#0f2535` | `oklch(25.45% 0.0422 243.66)` | Celestial Canvas | white, 15.7 to 1 |
| 4 | `#1d3a45` | `oklch(33.19% 0.0400 223.31)` | Astral Nomad | white, 11.9 to 1 |
| 5 | `#3a554f` | `oklch(42.68% 0.0345 177.13)` | Bistro Green | white, 8 to 1 |
| 6 | `#616c58` | `oklch(51.68% 0.0343 131.63)` | Royal Orchard | white, 5.5 to 1 |
| 7 | `#7f7f5c` | `oklch(58.56% 0.0496 107.83)` | Wild Ginseng | black, 5 to 1 |
| 8 | `#9a8c56` | `oklch(63.96% 0.0748 95.73)` | Sabo Garden | black, 6.2 to 1 |
| 9 | `#ac8f4b` | `oklch(66.29% 0.0936 86.37)` | Golden Years | black, 6.8 to 1 |
| 10 | `#b1873f` | `oklch(65.05% 0.1035 79.26)` | Butterscotch Ripple | black, 6.4 to 1 |
| 11 | `#aa792f` | `oklch(61.15% 0.1076 74.38)` | Chai Tea | black, 5.4 to 1 |
| 12 | `#976420` | `oklch(54.61% 0.1041 69.43)` | Olivia | white, 5 to 1 |
| 13 | `#774810` | `oklch(44.82% 0.0923 64.93)` | Hairy Brown | white, 7.6 to 1 |
| 14 | `#5f3505` | `oklch(37.40% 0.0827 61.88)` | Chocolate Fantasies | white, 10.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #000b16 0.0%, #011525 7.7%, #0f2535 15.4%, #1d3a45 23.1%, #3a554f 30.8%, #616c58 38.5%, #7f7f5c 46.2%, #9a8c56 53.8%, #ac8f4b 61.5%, #b1873f 69.2%, #aa792f 76.9%, #976420 84.6%, #774810 92.3%, #5f3505 100.0%);
background: linear-gradient(90deg in oklch, oklch(14.22% 0.0335 241.57) 0.0%, oklch(18.74% 0.0434 243.58) 7.7%, oklch(25.45% 0.0422 243.66) 15.4%, oklch(33.19% 0.0400 223.31) 23.1%, oklch(42.68% 0.0345 177.13) 30.8%, oklch(51.68% 0.0343 131.63) 38.5%, oklch(58.56% 0.0496 107.83) 46.2%, oklch(63.96% 0.0748 95.73) 53.8%, oklch(66.29% 0.0936 86.37) 61.5%, oklch(65.05% 0.1035 79.26) 69.2%, oklch(61.15% 0.1076 74.38) 76.9%, oklch(54.61% 0.1041 69.43) 84.6%, oklch(44.82% 0.0923 64.93) 92.3%, oklch(37.40% 0.0827 61.88) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.142 | 0.044 | 240.5 |
| 2 | 0.299 | 0.041 | 235.2 |
| 3 | 0.531 | 0.036 | 125.3 |
| 4 | 0.661 | 0.091 | 88.3 |
| 5 | 0.591 | 0.107 | 72.4 |
| 6 | 0.374 | 0.083 | 61.9 |

## In these collections

- [Vintage gradients](https://grabient.com/vintage-gradients)
- [Navy and gold](https://grabient.com/navy-and-gold)

## Other forms

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