# Gray, teal and brown angular gradient

Gray, teal and brown angular gradient with 32 colors: #d8c5b4, #d3c4b1, #cbc2ae, #c2c0ac, #b9bcaa, #b1b9a7, #a9b5a4, #a0b19f, #96ad9b, #8ca897, #83a393, #7b9e8f, #73998a, #6c9485, #658f7f, #5f897a, #5a8475, #567e70, #52786b, #507266, #4e6d60, #4e6859, #506250, #545d49, #585743, #5a533f, #5e4f3b, #634b34, #6b472c, #744325, #7b3e1f, #813a1d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `ka1BcuYgnHdaQRDKk0CPw6_DeNNe3prug`
- Page: https://grabient.com/ka1BcuYgnHdaQRDKk0CPw6_DeNNe3prug?style=angularGradient&steps=32
- Drawn as: angular gradient, 32 steps, 90 degrees
- Kinds: light to dark, neutral
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 4.9 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 | `#d8c5b4` | `oklch(83.46% 0.0317 64.69)` | Brazilian Sand | black, 12.5 to 1 |
| 2 | `#d3c4b1` | `oklch(82.68% 0.0306 73.38)` | Casual Khaki | black, 12.2 to 1 |
| 3 | `#cbc2ae` | `oklch(81.61% 0.0289 85.88)` | Tuft | black, 11.8 to 1 |
| 4 | `#c2c0ac` | `oklch(80.32% 0.0271 100.21)` | Swing Sage | black, 11.3 to 1 |
| 5 | `#b9bcaa` | `oklch(78.90% 0.0259 114.38)` | Softened Green | black, 10.8 to 1 |
| 6 | `#b1b9a7` | `oklch(77.41% 0.0260 126.43)` | Matt Sage | black, 10.3 to 1 |
| 7 | `#a9b5a4` | `oklch(75.87% 0.0278 135.78)` | Stormy Day | black, 9.8 to 1 |
| 8 | `#a0b19f` | `oklch(74.17% 0.0312 144.12)` | Drizzle | black, 9.2 to 1 |
| 9 | `#96ad9b` | `oklch(72.38% 0.0353 151.41)` | Scotland Road | black, 8.7 to 1 |
| 10 | `#8ca897` | `oklch(70.54% 0.0396 157.61)` | Peaslake | black, 8.1 to 1 |
| 11 | `#83a393` | `oklch(68.71% 0.0432 162.62)` | Aspen Aura | black, 7.6 to 1 |
| 12 | `#7b9e8f` | `oklch(66.91% 0.0458 166.30)` | Regal View | black, 7.1 to 1 |
| 13 | `#73998a` | `oklch(65.08% 0.0482 168.44)` | Silent Sage | black, 6.6 to 1 |
| 14 | `#6c9485` | `oklch(63.23% 0.0503 169.42)` | Up North | black, 6.2 to 1 |
| 15 | `#658f7f` | `oklch(61.39% 0.0518 169.62)` | Stanford Green | black, 5.7 to 1 |
| 16 | `#5f897a` | `oklch(59.56% 0.0524 169.42)` | Privet Hedge | black, 5.3 to 1 |
| 17 | `#5a8475` | `oklch(57.76% 0.0519 169.42)` | Idyllic Island | black, 4.9 to 1 |
| 18 | `#567e70` | `oklch(55.91% 0.0500 170.39)` | Fuchsite Green | black, 4.6 to 1 |
| 19 | `#52786b` | `oklch(54.06% 0.0472 171.20)` | Wishard | white, 4.9 to 1 |
| 20 | `#507266` | `oklch(52.28% 0.0441 170.45)` | Bridgewater | white, 5.3 to 1 |
| 21 | `#4e6d60` | `oklch(50.62% 0.0413 166.73)` | Green Beret | white, 5.7 to 1 |
| 22 | `#4e6859` | `oklch(49.12% 0.0393 158.54)` | Kale Green | white, 6.1 to 1 |
| 23 | `#506250` | `oklch(47.71% 0.0365 144.37)` | Pasture Green | white, 6.5 to 1 |
| 24 | `#545d49` | `oklch(46.40% 0.0334 126.25)` | Haute Green | white, 6.9 to 1 |
| 25 | `#585743` | `oklch(45.23% 0.0315 106.91)` | Second Nature | white, 7.3 to 1 |
| 26 | `#5a533f` | `oklch(44.28% 0.0322 89.09)` | Ivy Green | white, 7.6 to 1 |
| 27 | `#5e4f3b` | `oklch(43.61% 0.0370 75.46)` | Oak Plank | white, 7.9 to 1 |
| 28 | `#634b34` | `oklch(43.30% 0.0480 65.26)` | Black Power | white, 8 to 1 |
| 29 | `#6b472c` | `oklch(43.28% 0.0636 57.03)` | Pumpernickel | white, 8.1 to 1 |
| 30 | `#744325` | `oklch(43.43% 0.0806 50.50)` | Bull Shot | white, 8.1 to 1 |
| 31 | `#7b3e1f` | `oklch(43.61% 0.0958 45.40)` | Kara Cha Brown | white, 8.2 to 1 |
| 32 | `#813a1d` | `oklch(43.70% 0.1061 41.44)` | Dusky Orange | white, 8.2 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #d8c5b4 0.0%, #d3c4b1 3.2%, #cbc2ae 6.5%, #c2c0ac 9.7%, #b9bcaa 12.9%, #b1b9a7 16.1%, #a9b5a4 19.4%, #a0b19f 22.6%, #96ad9b 25.8%, #8ca897 29.0%, #83a393 32.3%, #7b9e8f 35.5%, #73998a 38.7%, #6c9485 41.9%, #658f7f 45.2%, #5f897a 48.4%, #5a8475 51.6%, #567e70 54.8%, #52786b 58.1%, #507266 61.3%, #4e6d60 64.5%, #4e6859 67.7%, #506250 71.0%, #545d49 74.2%, #585743 77.4%, #5a533f 80.6%, #5e4f3b 83.9%, #634b34 87.1%, #6b472c 90.3%, #744325 93.5%, #7b3e1f 96.8%, #813a1d 100.0%);
background: conic-gradient(from 90deg in oklch, oklch(83.46% 0.0317 64.69) 0.0%, oklch(82.68% 0.0306 73.38) 3.2%, oklch(81.61% 0.0289 85.88) 6.5%, oklch(80.32% 0.0271 100.21) 9.7%, oklch(78.90% 0.0259 114.38) 12.9%, oklch(77.41% 0.0260 126.43) 16.1%, oklch(75.87% 0.0278 135.78) 19.4%, oklch(74.17% 0.0312 144.12) 22.6%, oklch(72.38% 0.0353 151.41) 25.8%, oklch(70.54% 0.0396 157.61) 29.0%, oklch(68.71% 0.0432 162.62) 32.3%, oklch(66.91% 0.0458 166.30) 35.5%, oklch(65.08% 0.0482 168.44) 38.7%, oklch(63.23% 0.0503 169.42) 41.9%, oklch(61.39% 0.0518 169.62) 45.2%, oklch(59.56% 0.0524 169.42) 48.4%, oklch(57.76% 0.0519 169.42) 51.6%, oklch(55.91% 0.0500 170.39) 54.8%, oklch(54.06% 0.0472 171.20) 58.1%, oklch(52.28% 0.0441 170.45) 61.3%, oklch(50.62% 0.0413 166.73) 64.5%, oklch(49.12% 0.0393 158.54) 67.7%, oklch(47.71% 0.0365 144.37) 71.0%, oklch(46.40% 0.0334 126.25) 74.2%, oklch(45.23% 0.0315 106.91) 77.4%, oklch(44.28% 0.0322 89.09) 80.6%, oklch(43.61% 0.0370 75.46) 83.9%, oklch(43.30% 0.0480 65.26) 87.1%, oklch(43.28% 0.0636 57.03) 90.3%, oklch(43.43% 0.0806 50.50) 93.5%, oklch(43.61% 0.0958 45.40) 96.8%, oklch(43.70% 0.1061 41.44) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.835 | 0.032 | 64.7 |
| 2 | 0.772 | 0.026 | 128.1 |
| 3 | 0.681 | 0.044 | 164 |
| 4 | 0.587 | 0.052 | 169.3 |
| 5 | 0.496 | 0.04 | 161.9 |
| 6 | 0.437 | 0.036 | 77.4 |
| 7 | 0.437 | 0.106 | 41.4 |

## In these collections

- [Vintage gradients](https://grabient.com/vintage-gradients)
- [Cape daisy sea breeze](https://grabient.com/cape-daisy-sea-breeze)
- [Alpine copper kitchen](https://grabient.com/alpine-copper-kitchen)

## Other forms

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