# Duotone navy to brown angular gradient

Duotone navy to brown angular gradient with 32 colors: #0c3b47, #143d43, #213f3e, #2e403b, #38413b, #3e433d, #42453c, #474838, #4e4932, #58482b, #604827, #664727, #6a4828, #6d4929, #6f4a2b, #704b2e, #724b32, #734b37, #744b3d, #734b43, #724b46, #704b46, #6d4b44, #694a40, #644a3c, #604938, #5b4834, #55472f, #4d462a, #444527, #3b4426, #344326. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaUyacMAS2LWWOA5GD4uZM8jUOxIuEseA`
- Page: https://grabient.com/kaUyacMAS2LWWOA5GD4uZM8jUOxIuEseA?style=angularGradient&steps=32
- Drawn as: angular gradient, 32 steps, 90 degrees
- Hues: wide
- Contrast of its darkest and lightest colors: 1.6 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 | `#0c3b47` | `oklch(32.68% 0.0524 219.37)` | Ghostlands Coal | white, 12.1 to 1 |
| 2 | `#143d43` | `oklch(33.36% 0.0458 208.37)` | Ghostlands Coal | white, 11.8 to 1 |
| 3 | `#213f3e` | `oklch(34.32% 0.0357 192.73)` | Sunken Cascades | white, 11.4 to 1 |
| 4 | `#2e403b` | `oklch(35.44% 0.0250 174.60)` | Darkest Spruce | white, 10.9 to 1 |
| 5 | `#38413b` | `oklch(36.59% 0.0162 156.12)` | Dead Sea Mud | white, 10.5 to 1 |
| 6 | `#3e433d` | `oklch(37.64% 0.0124 139.41)` | Deep Forest | white, 10.1 to 1 |
| 7 | `#42453c` | `oklch(38.56% 0.0156 124.75)` | Volcanic Stone Green | white, 9.7 to 1 |
| 8 | `#474838` | `oklch(39.45% 0.0247 110.05)` | Treasure Island | white, 9.3 to 1 |
| 9 | `#4e4932` | `oklch(40.32% 0.0368 96.04)` | Olive Leaf | white, 9 to 1 |
| 10 | `#58482b` | `oklch(41.14% 0.0490 83.48)` | Nightingale | white, 8.8 to 1 |
| 11 | `#604827` | `oklch(41.89% 0.0586 73.18)` | Nightingale | white, 8.5 to 1 |
| 12 | `#664727` | `oklch(42.58% 0.0636 66.03)` | Hickory Chips | white, 8.3 to 1 |
| 13 | `#6a4828` | `oklch(43.21% 0.0662 62.25)` | Hickory Chips | white, 8.1 to 1 |
| 14 | `#6d4929` | `oklch(43.80% 0.0673 60.49)` | Pickled Bean | white, 7.9 to 1 |
| 15 | `#6f4a2b` | `oklch(44.30% 0.0672 59.33)` | Pickled Bean | white, 7.8 to 1 |
| 16 | `#704b2e` | `oklch(44.72% 0.0666 57.33)` | Taj | white, 7.6 to 1 |
| 17 | `#724b32` | `oklch(45.03% 0.0656 53.07)` | Taj | white, 7.5 to 1 |
| 18 | `#734b37` | `oklch(45.29% 0.0635 46.28)` | Riding Boots | white, 7.5 to 1 |
| 19 | `#744b3d` | `oklch(45.46% 0.0606 38.57)` | Tiramisu | white, 7.4 to 1 |
| 20 | `#734b43` | `oklch(45.52% 0.0574 31.73)` | Minotaur Red | white, 7.4 to 1 |
| 21 | `#724b46` | `oklch(45.43% 0.0542 27.52)` | Rohwurst | white, 7.4 to 1 |
| 22 | `#704b46` | `oklch(45.16% 0.0515 27.61)` | Fireside | white, 7.5 to 1 |
| 23 | `#6d4b44` | `oklch(44.69% 0.0485 31.71)` | Fireside | white, 7.7 to 1 |
| 24 | `#694a40` | `oklch(44.05% 0.0454 38.69)` | Spanish Mustang | white, 7.8 to 1 |
| 25 | `#644a3c` | `oklch(43.29% 0.0426 47.65)` | Ship Steering Wheel | white, 8.1 to 1 |
| 26 | `#604938` | `oklch(42.46% 0.0406 57.66)` | Beauty Spot | white, 8.3 to 1 |
| 27 | `#5b4834` | `oklch(41.58% 0.0400 67.87)` | Mousy Brown | white, 8.6 to 1 |
| 28 | `#55472f` | `oklch(40.51% 0.0411 80.26)` | Punga | white, 9 to 1 |
| 29 | `#4d462a` | `oklch(39.28% 0.0435 94.68)` | Tinny Tin | white, 9.4 to 1 |
| 30 | `#444527` | `oklch(38.04% 0.0464 109.18)` | Tin Bitz | white, 9.9 to 1 |
| 31 | `#3b4426` | `oklch(36.97% 0.0492 121.81)` | Avocado Dark Green | white, 10.3 to 1 |
| 32 | `#344326` | `oklch(36.22% 0.0510 130.61)` | Ceylanite | white, 10.5 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #0c3b47 0.0%, #143d43 3.2%, #213f3e 6.5%, #2e403b 9.7%, #38413b 12.9%, #3e433d 16.1%, #42453c 19.4%, #474838 22.6%, #4e4932 25.8%, #58482b 29.0%, #604827 32.3%, #664727 35.5%, #6a4828 38.7%, #6d4929 41.9%, #6f4a2b 45.2%, #704b2e 48.4%, #724b32 51.6%, #734b37 54.8%, #744b3d 58.1%, #734b43 61.3%, #724b46 64.5%, #704b46 67.7%, #6d4b44 71.0%, #694a40 74.2%, #644a3c 77.4%, #604938 80.6%, #5b4834 83.9%, #55472f 87.1%, #4d462a 90.3%, #444527 93.5%, #3b4426 96.8%, #344326 100.0%);
background: conic-gradient(from 90deg in oklch, oklch(32.68% 0.0524 219.37) 0.0%, oklch(33.36% 0.0458 208.37) 3.2%, oklch(34.32% 0.0357 192.73) 6.5%, oklch(35.44% 0.0250 174.60) 9.7%, oklch(36.59% 0.0162 156.12) 12.9%, oklch(37.64% 0.0124 139.41) 16.1%, oklch(38.56% 0.0156 124.75) 19.4%, oklch(39.45% 0.0247 110.05) 22.6%, oklch(40.32% 0.0368 96.04) 25.8%, oklch(41.14% 0.0490 83.48) 29.0%, oklch(41.89% 0.0586 73.18) 32.3%, oklch(42.58% 0.0636 66.03) 35.5%, oklch(43.21% 0.0662 62.25) 38.7%, oklch(43.80% 0.0673 60.49) 41.9%, oklch(44.30% 0.0672 59.33) 45.2%, oklch(44.72% 0.0666 57.33) 48.4%, oklch(45.03% 0.0656 53.07) 51.6%, oklch(45.29% 0.0635 46.28) 54.8%, oklch(45.46% 0.0606 38.57) 58.1%, oklch(45.52% 0.0574 31.73) 61.3%, oklch(45.43% 0.0542 27.52) 64.5%, oklch(45.16% 0.0515 27.61) 67.7%, oklch(44.69% 0.0485 31.71) 71.0%, oklch(44.05% 0.0454 38.69) 74.2%, oklch(43.29% 0.0426 47.65) 77.4%, oklch(42.46% 0.0406 57.66) 80.6%, oklch(41.58% 0.0400 67.87) 83.9%, oklch(40.51% 0.0411 80.26) 87.1%, oklch(39.28% 0.0435 94.68) 90.3%, oklch(38.04% 0.0464 109.18) 93.5%, oklch(36.97% 0.0492 121.81) 96.8%, oklch(36.22% 0.0510 130.61) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.327 | 0.052 | 219.4 |
| 2 | 0.378 | 0.012 | 136.9 |
| 3 | 0.421 | 0.061 | 70.4 |
| 4 | 0.449 | 0.066 | 55.6 |
| 5 | 0.453 | 0.052 | 27 |
| 6 | 0.417 | 0.04 | 66.1 |
| 7 | 0.362 | 0.051 | 130.6 |

## In these collections

- [Alpine copper kitchen](https://grabient.com/alpine-copper-kitchen)
- [Dark muted gradients](https://grabient.com/dark-muted-gradients)

## Other forms

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