# Gray, brown and purple angular gradient

Gray, brown and purple angular gradient with 32 colors: #789bae, #8993b0, #9d8ba0, #a38989, #9d8b7b, #9a8b6e, #9b8b57, #a38736, #ae8000, #b27c00, #b67800, #b87420, #b5733f, #b37052, #b76b60, #bb6478, #b66097, #aa5fb1, #9f5eb7, #995baa, #955692, #905178, #884d61, #804949, #73472e, #61481b, #524615, #504014, #56361e, #543035, #473148, #3a344e. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcqiOmUg1Xs-1QHNoruS7W176dxSxGEsK5CtA`
- Page: https://grabient.com/kcqiOmUg1Xs-1QHNoruS7W176dxSxGEsK5CtA?style=angularGradient&steps=32&angle=45
- Drawn as: angular gradient, 32 steps, 45 degrees
- Kinds: light to dark, warm
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.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 | `#789bae` | `oklch(66.93% 0.0482 233.44)` | Bay’s Water | black, 7 to 1 |
| 2 | `#8993b0` | `oklch(66.55% 0.0438 269.07)` | Cool Grey | black, 6.8 to 1 |
| 3 | `#9d8ba0` | `oklch(66.00% 0.0366 321.47)` | Berry Cream | black, 6.6 to 1 |
| 4 | `#a38989` | `oklch(65.38% 0.0312 16.92)` | Tin Pink | black, 6.4 to 1 |
| 5 | `#9d8b7b` | `oklch(64.79% 0.0322 61.70)` | Light Mahogany | black, 6.3 to 1 |
| 6 | `#9a8b6e` | `oklch(64.29% 0.0452 84.68)` | Urban Safari | black, 6.3 to 1 |
| 7 | `#9b8b57` | `oklch(63.82% 0.0724 91.91)` | Goldbrown | black, 6.2 to 1 |
| 8 | `#a38736` | `oklch(63.38% 0.1050 89.62)` | Dried Tobacco | black, 6 to 1 |
| 9 | `#ae8000` | `oklch(62.95% 0.1294 83.18)` | Murder Mustard | black, 5.9 to 1 |
| 10 | `#b27c00` | `oklch(62.54% 0.1304 77.88)` | Golden Brown | black, 5.7 to 1 |
| 11 | `#b67800` | `oklch(62.16% 0.1324 72.98)` | Golden Brown | black, 5.6 to 1 |
| 12 | `#b87420` | `oklch(61.81% 0.1255 66.08)` | Fireside Chat | black, 5.5 to 1 |
| 13 | `#b5733f` | `oklch(61.47% 0.1071 56.91)` | Saucy Gold | black, 5.4 to 1 |
| 14 | `#b37052` | `oklch(61.12% 0.0958 45.27)` | Sunburn | black, 5.3 to 1 |
| 15 | `#b76b60` | `oklch(60.86% 0.0990 29.12)` | Water Persimmon | black, 5.2 to 1 |
| 16 | `#bb6478` | `oklch(60.81% 0.1133 6.27)` | Slate Rose | black, 5.1 to 1 |
| 17 | `#b66097` | `oklch(60.69% 0.1310 342.46)` | Spring Crocus | black, 5.1 to 1 |
| 18 | `#aa5fb1` | `oklch(60.19% 0.1446 323.76)` | Royalty Loyalty | black, 4.9 to 1 |
| 19 | `#9f5eb7` | `oklch(59.03% 0.1464 316.05)` | Trunks Hair | black, 4.7 to 1 |
| 20 | `#995baa` | `oklch(57.12% 0.1354 318.90)` | Heath Spotted Orchid | white, 4.7 to 1 |
| 21 | `#955692` | `oklch(54.71% 0.1172 328.84)` | Àn Zǐ Purple | white, 5.2 to 1 |
| 22 | `#905178` | `oklch(52.10% 0.0977 343.14)` | Sugar Plum | white, 5.7 to 1 |
| 23 | `#884d61` | `oklch(49.55% 0.0827 359.06)` | Red Shrivel | white, 6.4 to 1 |
| 24 | `#804949` | `oklch(47.08% 0.0752 20.21)` | Tuscan Red | white, 7 to 1 |
| 25 | `#73472e` | `oklch(44.46% 0.0716 50.18)` | Broomstick | white, 7.8 to 1 |
| 26 | `#61481b` | `oklch(41.91% 0.0699 78.69)` | Mud Brown | white, 8.5 to 1 |
| 27 | `#524615` | `oklch(39.65% 0.0680 95.27)` | Sugarloaf Brown | white, 9.3 to 1 |
| 28 | `#504014` | `oklch(37.90% 0.0643 89.25)` | Smoked Oak Brown | white, 10 to 1 |
| 29 | `#56361e` | `oklch(36.57% 0.0592 57.03)` | Kuro Brown | white, 10.8 to 1 |
| 30 | `#543035` | `oklch(35.56% 0.0537 11.20)` | Joyful Ruby | white, 11.3 to 1 |
| 31 | `#473148` | `oklch(34.81% 0.0488 326.03)` | Acai Berry | white, 11.6 to 1 |
| 32 | `#3a344e` | `oklch(34.25% 0.0455 295.79)` | Chrysomela Goettingensis | white, 11.8 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #789bae 0.0%, #8993b0 3.2%, #9d8ba0 6.5%, #a38989 9.7%, #9d8b7b 12.9%, #9a8b6e 16.1%, #9b8b57 19.4%, #a38736 22.6%, #ae8000 25.8%, #b27c00 29.0%, #b67800 32.3%, #b87420 35.5%, #b5733f 38.7%, #b37052 41.9%, #b76b60 45.2%, #bb6478 48.4%, #b66097 51.6%, #aa5fb1 54.8%, #9f5eb7 58.1%, #995baa 61.3%, #955692 64.5%, #905178 67.7%, #884d61 71.0%, #804949 74.2%, #73472e 77.4%, #61481b 80.6%, #524615 83.9%, #504014 87.1%, #56361e 90.3%, #543035 93.5%, #473148 96.8%, #3a344e 100.0%);
background: conic-gradient(from 45deg in oklch, oklch(66.93% 0.0482 233.44) 0.0%, oklch(66.55% 0.0438 269.07) 3.2%, oklch(66.00% 0.0366 321.47) 6.5%, oklch(65.38% 0.0312 16.92) 9.7%, oklch(64.79% 0.0322 61.70) 12.9%, oklch(64.29% 0.0452 84.68) 16.1%, oklch(63.82% 0.0724 91.91) 19.4%, oklch(63.38% 0.1050 89.62) 22.6%, oklch(62.95% 0.1294 83.18) 25.8%, oklch(62.54% 0.1304 77.88) 29.0%, oklch(62.16% 0.1324 72.98) 32.3%, oklch(61.81% 0.1255 66.08) 35.5%, oklch(61.47% 0.1071 56.91) 38.7%, oklch(61.12% 0.0958 45.27) 41.9%, oklch(60.86% 0.0990 29.12) 45.2%, oklch(60.81% 0.1133 6.27) 48.4%, oklch(60.69% 0.1310 342.46) 51.6%, oklch(60.19% 0.1446 323.76) 54.8%, oklch(59.03% 0.1464 316.05) 58.1%, oklch(57.12% 0.1354 318.90) 61.3%, oklch(54.71% 0.1172 328.84) 64.5%, oklch(52.10% 0.0977 343.14) 67.7%, oklch(49.55% 0.0827 359.06) 71.0%, oklch(47.08% 0.0752 20.21) 74.2%, oklch(44.46% 0.0716 50.18) 77.4%, oklch(41.91% 0.0699 78.69) 80.6%, oklch(39.65% 0.0680 95.27) 83.9%, oklch(37.90% 0.0643 89.25) 87.1%, oklch(36.57% 0.0592 57.03) 90.3%, oklch(35.56% 0.0537 11.20) 93.5%, oklch(34.81% 0.0488 326.03) 96.8%, oklch(34.25% 0.0455 295.79) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.669 | 0.048 | 233.4 |
| 2 | 0.646 | 0.036 | 434.2 |
| 3 | 0.626 | 0.146 | 438.4 |
| 4 | 0.61 | 0.095 | 401.5 |
| 5 | 0.594 | 0.147 | 316.9 |
| 6 | 0.492 | 0.081 | 361.3 |
| 7 | 0.386 | 0.066 | 455.4 |
| 8 | 0.343 | 0.045 | 295.8 |

## In these collections

- [Vintage gradients](https://grabient.com/vintage-gradients)

## Other forms

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