# Duotone brown to navy linear gradient

Duotone brown to navy linear gradient with 32 colors: #845b24, #875b22, #8c5c1e, #925c19, #975c13, #9b5c0d, #9e5b08, #a05a04, #a15901, #a15700, #a15500, #9f5300, #9d5000, #9a4d00, #974a01, #924602, #8d4302, #873f00, #803c00, #793800, #723300, #6a2e02, #612a08, #57270d, #4e2311, #451e14, #3e1917, #37141b, #2f0f21, #250c27, #1b0a2b, #13092c. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kagEAyxCq_EMuvy8rD9MSU_qKVPUXGDSA`
- Page: https://grabient.com/kagEAyxCq_EMuvy8rD9MSU_qKVPUXGDSA?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: light to dark, vivid, warm
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 3.5 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 | `#845b24` | `oklch(50.39% 0.0882 71.02)` | Hot Curry | white, 6 to 1 |
| 2 | `#875b22` | `oklch(50.86% 0.0922 70.03)` | Grizzly | white, 5.8 to 1 |
| 3 | `#8c5c1e` | `oklch(51.56% 0.0981 68.64)` | Afghan Carpet | white, 5.7 to 1 |
| 4 | `#925c19` | `oklch(52.34% 0.1048 67.02)` | Afghan Carpet | white, 5.5 to 1 |
| 5 | `#975c13` | `oklch(53.04% 0.1112 65.36)` | Sepia Wash | white, 5.4 to 1 |
| 6 | `#9b5c0d` | `oklch(53.50% 0.1164 63.84)` | Sepia Wash | white, 5.3 to 1 |
| 7 | `#9e5b08` | `oklch(53.69% 0.1201 62.52)` | Soft Tone Ink | white, 5.3 to 1 |
| 8 | `#a05a04` | `oklch(53.73% 0.1231 61.25)` | Soft Tone Ink | white, 5.3 to 1 |
| 9 | `#a15901` | `oklch(53.63% 0.1254 60.01)` | Windsor Brown | white, 5.3 to 1 |
| 10 | `#a15700` | `oklch(53.37% 0.1267 58.77)` | Windsor Brown | white, 5.4 to 1 |
| 11 | `#a15500` | `oklch(52.94% 0.1272 57.61)` | Windsor Brown | white, 5.5 to 1 |
| 12 | `#9f5300` | `oklch(52.34% 0.1274 56.48)` | Fresh Cinnamon | white, 5.6 to 1 |
| 13 | `#9d5000` | `oklch(51.57% 0.1272 55.34)` | Burnt Bagel | white, 5.8 to 1 |
| 14 | `#9a4d00` | `oklch(50.63% 0.1265 54.28)` | Burnt Bagel | white, 6.1 to 1 |
| 15 | `#974a01` | `oklch(49.54% 0.1247 53.26)` | Brownie | white, 6.4 to 1 |
| 16 | `#924602` | `oklch(48.31% 0.1225 52.38)` | Parasite Brown | white, 6.7 to 1 |
| 17 | `#8d4302` | `oklch(46.93% 0.1200 51.75)` | Otterly Brown | white, 7.1 to 1 |
| 18 | `#873f00` | `oklch(45.37% 0.1172 51.68)` | Gryphonne Sepia Wash | white, 7.6 to 1 |
| 19 | `#803c00` | `oklch(43.65% 0.1124 51.91)` | Hazelnut Chocolate | white, 8.2 to 1 |
| 20 | `#793800` | `oklch(41.82% 0.1078 51.85)` | Red Beech | white, 8.8 to 1 |
| 21 | `#723300` | `oklch(39.90% 0.1040 51.02)` | Bay Brown | white, 9.6 to 1 |
| 22 | `#6a2e02` | `oklch(37.91% 0.0997 49.16)` | Cold Press Coffee | white, 10.4 to 1 |
| 23 | `#612a08` | `oklch(35.75% 0.0911 47.41)` | Count Chocula | white, 11.3 to 1 |
| 24 | `#57270d` | `oklch(33.45% 0.0808 45.36)` | Fudge Brownie | white, 12.3 to 1 |
| 25 | `#4e2311` | `oklch(31.14% 0.0707 41.84)` | Tobi Brown | white, 13.4 to 1 |
| 26 | `#451e14` | `oklch(28.90% 0.0623 35.68)` | Barbecue Sauce | white, 14.4 to 1 |
| 27 | `#3e1917` | `oklch(26.83% 0.0574 25.66)` | Rustic Red | white, 15.4 to 1 |
| 28 | `#37141b` | `oklch(24.78% 0.0564 9.08)` | Tamarind | white, 16.4 to 1 |
| 29 | `#2f0f21` | `oklch(22.74% 0.0581 347.68)` | Black Cherry | white, 17.3 to 1 |
| 30 | `#250c27` | `oklch(20.85% 0.0611 325.15)` | Inside | white, 18 to 1 |
| 31 | `#1b0a2b` | `oklch(19.26% 0.0643 305.20)` | Midnight Monarch | white, 18.6 to 1 |
| 32 | `#13092c` | `oklch(18.11% 0.0661 291.52)` | Quiet Abyss | white, 18.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #845b24 0.0%, #875b22 3.2%, #8c5c1e 6.5%, #925c19 9.7%, #975c13 12.9%, #9b5c0d 16.1%, #9e5b08 19.4%, #a05a04 22.6%, #a15901 25.8%, #a15700 29.0%, #a15500 32.3%, #9f5300 35.5%, #9d5000 38.7%, #9a4d00 41.9%, #974a01 45.2%, #924602 48.4%, #8d4302 51.6%, #873f00 54.8%, #803c00 58.1%, #793800 61.3%, #723300 64.5%, #6a2e02 67.7%, #612a08 71.0%, #57270d 74.2%, #4e2311 77.4%, #451e14 80.6%, #3e1917 83.9%, #37141b 87.1%, #2f0f21 90.3%, #250c27 93.5%, #1b0a2b 96.8%, #13092c 100.0%);
background: linear-gradient(90deg in oklch, oklch(50.39% 0.0882 71.02) 0.0%, oklch(50.86% 0.0922 70.03) 3.2%, oklch(51.56% 0.0981 68.64) 6.5%, oklch(52.34% 0.1048 67.02) 9.7%, oklch(53.04% 0.1112 65.36) 12.9%, oklch(53.50% 0.1164 63.84) 16.1%, oklch(53.69% 0.1201 62.52) 19.4%, oklch(53.73% 0.1231 61.25) 22.6%, oklch(53.63% 0.1254 60.01) 25.8%, oklch(53.37% 0.1267 58.77) 29.0%, oklch(52.94% 0.1272 57.61) 32.3%, oklch(52.34% 0.1274 56.48) 35.5%, oklch(51.57% 0.1272 55.34) 38.7%, oklch(50.63% 0.1265 54.28) 41.9%, oklch(49.54% 0.1247 53.26) 45.2%, oklch(48.31% 0.1225 52.38) 48.4%, oklch(46.93% 0.1200 51.75) 51.6%, oklch(45.37% 0.1172 51.68) 54.8%, oklch(43.65% 0.1124 51.91) 58.1%, oklch(41.82% 0.1078 51.85) 61.3%, oklch(39.90% 0.1040 51.02) 64.5%, oklch(37.91% 0.0997 49.16) 67.7%, oklch(35.75% 0.0911 47.41) 71.0%, oklch(33.45% 0.0808 45.36) 74.2%, oklch(31.14% 0.0707 41.84) 77.4%, oklch(28.90% 0.0623 35.68) 80.6%, oklch(26.83% 0.0574 25.66) 83.9%, oklch(24.78% 0.0564 9.08) 87.1%, oklch(22.74% 0.0581 347.68) 90.3%, oklch(20.85% 0.0611 325.15) 93.5%, oklch(19.26% 0.0643 305.20) 96.8%, oklch(18.11% 0.0661 291.52) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.504 | 0.088 | 71 |
| 2 | 0.535 | 0.117 | 63.6 |
| 3 | 0.528 | 0.128 | 57.3 |
| 4 | 0.476 | 0.121 | 52 |
| 5 | 0.386 | 0.102 | 49.9 |
| 6 | 0.272 | 0.058 | 27.7 |
| 7 | 0.181 | 0.066 | -68.5 |

## In these collections

- [Dark multicolor gradients](https://grabient.com/dark-multicolor-gradients)

## Other forms

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