# Analogous gray, olive and brown angular gradient

Analogous gray, olive and brown angular gradient with 32 colors: #928284, #8f7c7b, #8a746c, #816d5b, #75674b, #69623f, #5e5d35, #56582a, #4f521d, #4a4d0f, #464901, #434600, #414300, #414100, #414000, #433f03, #463f03, #4b4002, #524101, #594300, #614501, #694802, #734b01, #7c5000, #875500, #915a01, #9b5f0a, #a46419, #ae6b28, #b67234, #be783f, #c37c46. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kang4HPhNKjEfwWuGz7tZ-88QqPpSqT6g`
- Page: https://grabient.com/kang4HPhNKjEfwWuGz7tZ-88QqPpSqT6g?style=angularGradient&steps=32&angle=135
- Drawn as: angular gradient, 32 steps, 135 degrees
- Kinds: vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.2 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 | `#928284` | `oklch(62.20% 0.0193 9.84)` | Venetian | black, 5.7 to 1 |
| 2 | `#8f7c7b` | `oklch(60.41% 0.0236 22.74)` | Warplock Bronze Metal | black, 5.3 to 1 |
| 3 | `#8a746c` | `oklch(57.85% 0.0296 41.63)` | Brown Rose | black, 4.8 to 1 |
| 4 | `#816d5b` | `oklch(54.89% 0.0367 62.87)` | Kaffee | white, 4.9 to 1 |
| 5 | `#75674b` | `oklch(51.89% 0.0441 82.83)` | Khemri Brown | white, 5.5 to 1 |
| 6 | `#69623f` | `oklch(49.21% 0.0513 97.89)` | Bronze Medal | white, 6.1 to 1 |
| 7 | `#5e5d35` | `oklch(46.90% 0.0584 106.32)` | Basque Green | white, 6.7 to 1 |
| 8 | `#56582a` | `oklch(44.63% 0.0664 110.72)` | Soldier Green | white, 7.4 to 1 |
| 9 | `#4f521d` | `oklch(42.49% 0.0744 112.37)` | Private Green | white, 8.1 to 1 |
| 10 | `#4a4d0f` | `oklch(40.59% 0.0812 112.48)` | Scorzonera Brown | white, 8.8 to 1 |
| 11 | `#464901` | `oklch(39.01% 0.0859 112.28)` | No Emissions Green | white, 9.4 to 1 |
| 12 | `#434600` | `oklch(37.83% 0.0840 112.41)` | Green Not Found | white, 9.9 to 1 |
| 13 | `#414300` | `oklch(36.95% 0.0817 111.78)` | Green Not Found | white, 10.3 to 1 |
| 14 | `#414100` | `oklch(36.36% 0.0796 110.35)` | Green Not Found | white, 10.5 to 1 |
| 15 | `#414000` | `oklch(36.07% 0.0776 108.22)` | Green Not Found | white, 10.7 to 1 |
| 16 | `#433f03` | `oklch(36.09% 0.0748 105.47)` | Xanthophobia | white, 10.7 to 1 |
| 17 | `#463f03` | `oklch(36.44% 0.0746 102.05)` | Xanthophobia | white, 10.6 to 1 |
| 18 | `#4b4002` | `oklch(37.17% 0.0757 97.36)` | Xanthophobia | white, 10.3 to 1 |
| 19 | `#524101` | `oklch(38.21% 0.0778 91.88)` | Roman Bronze | white, 9.9 to 1 |
| 20 | `#594300` | `oklch(39.52% 0.0807 86.29)` | Sugarloaf Brown | white, 9.4 to 1 |
| 21 | `#614501` | `oklch(41.03% 0.0842 81.26)` | Mud Brown | white, 8.9 to 1 |
| 22 | `#694802` | `oklch(42.71% 0.0883 77.39)` | Violin Brown | white, 8.3 to 1 |
| 23 | `#734b01` | `oklch(44.68% 0.0939 74.53)` | Antique Bronze | white, 7.6 to 1 |
| 24 | `#7c5000` | `oklch(46.91% 0.1003 72.24)` | Medium Brown | white, 6.9 to 1 |
| 25 | `#875500` | `oklch(49.27% 0.1065 70.35)` | Spear Shaft | white, 6.3 to 1 |
| 26 | `#915a01` | `oklch(51.64% 0.1127 68.57)` | Charlie Brown | white, 5.7 to 1 |
| 27 | `#9b5f0a` | `oklch(53.92% 0.1161 66.55)` | Soft Tone Ink | white, 5.2 to 1 |
| 28 | `#a46419` | `oklch(56.35% 0.1172 64.24)` | Cockatrice Brown | white, 4.7 to 1 |
| 29 | `#ae6b28` | `oklch(58.91% 0.1167 61.86)` | Inca Gold | black, 4.9 to 1 |
| 30 | `#b67234` | `oklch(61.37% 0.1153 59.61)` | Copper | black, 5.4 to 1 |
| 31 | `#be783f` | `oklch(63.47% 0.1138 57.71)` | Cray | black, 5.9 to 1 |
| 32 | `#c37c46` | `oklch(64.96% 0.1130 56.34)` | Caramel Toffee | black, 6.2 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #928284 0.0%, #8f7c7b 3.2%, #8a746c 6.5%, #816d5b 9.7%, #75674b 12.9%, #69623f 16.1%, #5e5d35 19.4%, #56582a 22.6%, #4f521d 25.8%, #4a4d0f 29.0%, #464901 32.3%, #434600 35.5%, #414300 38.7%, #414100 41.9%, #414000 45.2%, #433f03 48.4%, #463f03 51.6%, #4b4002 54.8%, #524101 58.1%, #594300 61.3%, #614501 64.5%, #694802 67.7%, #734b01 71.0%, #7c5000 74.2%, #875500 77.4%, #915a01 80.6%, #9b5f0a 83.9%, #a46419 87.1%, #ae6b28 90.3%, #b67234 93.5%, #be783f 96.8%, #c37c46 100.0%);
background: conic-gradient(from 135deg in oklch, oklch(62.20% 0.0193 9.84) 0.0%, oklch(60.41% 0.0236 22.74) 3.2%, oklch(57.85% 0.0296 41.63) 6.5%, oklch(54.89% 0.0367 62.87) 9.7%, oklch(51.89% 0.0441 82.83) 12.9%, oklch(49.21% 0.0513 97.89) 16.1%, oklch(46.90% 0.0584 106.32) 19.4%, oklch(44.63% 0.0664 110.72) 22.6%, oklch(42.49% 0.0744 112.37) 25.8%, oklch(40.59% 0.0812 112.48) 29.0%, oklch(39.01% 0.0859 112.28) 32.3%, oklch(37.83% 0.0840 112.41) 35.5%, oklch(36.95% 0.0817 111.78) 38.7%, oklch(36.36% 0.0796 110.35) 41.9%, oklch(36.07% 0.0776 108.22) 45.2%, oklch(36.09% 0.0748 105.47) 48.4%, oklch(36.44% 0.0746 102.05) 51.6%, oklch(37.17% 0.0757 97.36) 54.8%, oklch(38.21% 0.0778 91.88) 58.1%, oklch(39.52% 0.0807 86.29) 61.3%, oklch(41.03% 0.0842 81.26) 64.5%, oklch(42.71% 0.0883 77.39) 67.7%, oklch(44.68% 0.0939 74.53) 71.0%, oklch(46.91% 0.1003 72.24) 74.2%, oklch(49.27% 0.1065 70.35) 77.4%, oklch(51.64% 0.1127 68.57) 80.6%, oklch(53.92% 0.1161 66.55) 83.9%, oklch(56.35% 0.1172 64.24) 87.1%, oklch(58.91% 0.1167 61.86) 90.3%, oklch(61.37% 0.1153 59.61) 93.5%, oklch(63.47% 0.1138 57.71) 96.8%, oklch(64.96% 0.1130 56.34) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.622 | 0.019 | 9.8 |
| 2 | 0.488 | 0.052 | 99.7 |
| 3 | 0.386 | 0.087 | 112.3 |
| 4 | 0.362 | 0.074 | 103.9 |
| 5 | 0.421 | 0.087 | 78.5 |
| 6 | 0.535 | 0.116 | 66.9 |
| 7 | 0.65 | 0.113 | 56.3 |

## In these collections

- [Earth tone gradients](https://grabient.com/earth-tone-gradients)

## Other forms

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