# Complementary brown, gray and blue linear gradient

Complementary brown, gray and blue linear gradient with 32 colors: #73361c, #7b3d22, #864729, #935332, #a1603c, #ae6d47, #b97a51, #c1855b, #c79168, #cd9c76, #d1a783, #d3b18e, #d4b997, #d3c09d, #cec6a3, #c7cca9, #becfb0, #b5d1b7, #acd1bd, #a4cfc0, #9acbc1, #8dc7bf, #7fc1bd, #70bbb9, #62b3b6, #58abb2, #50a0ab, #4b94a3, #478798, #447b8e, #427084, #40697d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYaEQe0aNBOaTwrokcrWJ3Dz-Uw0`
- Page: https://grabient.com/kYaEQe0aNBOaTwrokcrWJ3Dz-Uw0?steps=32&angle=315
- Drawn as: linear gradient, 32 steps, 315 degrees
- Kinds: light center
- Hues: complementary
- Contrast of its darkest and lightest colors: 5.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 | `#73361c` | `oklch(40.94% 0.0937 42.89)` | Rosewood Brown | white, 9.2 to 1 |
| 2 | `#7b3d22` | `oklch(43.45% 0.0945 43.86)` | Kara Cha Brown | white, 8.2 to 1 |
| 3 | `#864729` | `oklch(46.95% 0.0960 45.07)` | Two Cents | white, 7.1 to 1 |
| 4 | `#935332` | `oklch(51.09% 0.0976 46.56)` | Chelsea Gem | white, 5.9 to 1 |
| 5 | `#a1603c` | `oklch(55.48% 0.0987 48.34)` | Desert Soil | white, 4.9 to 1 |
| 6 | `#ae6d47` | `oklch(59.75% 0.0987 50.46)` | Pale Cordovan | black, 5 to 1 |
| 7 | `#b97a51` | `oklch(63.51% 0.0971 52.92)` | Cattle Drive | black, 5.9 to 1 |
| 8 | `#c1855b` | `oklch(66.74% 0.0929 55.34)` | Fall Foliage | black, 6.7 to 1 |
| 9 | `#c79168` | `oklch(69.91% 0.0863 57.23)` | Butterum | black, 7.6 to 1 |
| 10 | `#cd9c76` | `oklch(72.93% 0.0782 59.26)` | Fresh Croissant | black, 8.6 to 1 |
| 11 | `#d1a783` | `oklch(75.70% 0.0697 62.13)` | Maple Tan | black, 9.5 to 1 |
| 12 | `#d3b18e` | `oklch(78.12% 0.0618 66.56)` | Ligonier Tan | black, 10.4 to 1 |
| 13 | `#d4b997` | `oklch(80.08% 0.0555 73.24)` | Bruin Spice | black, 11.2 to 1 |
| 14 | `#d3c09d` | `oklch(81.51% 0.0516 83.14)` | Gold Wash | black, 11.8 to 1 |
| 15 | `#cec6a3` | `oklch(82.53% 0.0487 97.02)` | Sand Trail | black, 12.2 to 1 |
| 16 | `#c7cca9` | `oklch(83.15% 0.0468 113.43)` | Baize Green | black, 12.6 to 1 |
| 17 | `#becfb0` | `oklch(83.39% 0.0459 130.77)` | Apple Ice | black, 12.7 to 1 |
| 18 | `#b5d1b7` | `oklch(83.25% 0.0460 147.42)` | Lime Taffy | black, 12.7 to 1 |
| 19 | `#acd1bd` | `oklch(82.75% 0.0471 161.79)` | Misty Jade | black, 12.5 to 1 |
| 20 | `#a4cfc0` | `oklch(81.88% 0.0494 172.44)` | Swimming Pool Green | black, 12.2 to 1 |
| 21 | `#9acbc1` | `oklch(80.54% 0.0542 180.13)` | Jamaica Bay | black, 11.7 to 1 |
| 22 | `#8dc7bf` | `oklch(78.76% 0.0609 185.82)` | Holiday Turquoise | black, 11 to 1 |
| 23 | `#7fc1bd` | `oklch(76.65% 0.0681 190.21)` | Gentle Wave | black, 10.3 to 1 |
| 24 | `#70bbb9` | `oklch(74.28% 0.0748 193.97)` | Earth Eclipse | black, 9.4 to 1 |
| 25 | `#62b3b6` | `oklch(71.76% 0.0796 197.81)` | Aqueduct | black, 8.6 to 1 |
| 26 | `#58abb2` | `oklch(69.15% 0.0814 202.40)` | Aquarelle | black, 7.8 to 1 |
| 27 | `#50a0ab` | `oklch(66.02% 0.0798 207.62)` | Basilica Blue | black, 6.9 to 1 |
| 28 | `#4b94a3` | `oklch(62.42% 0.0758 213.00)` | Teal Trinket | black, 6 to 1 |
| 29 | `#478798` | `oklch(58.68% 0.0704 218.22)` | Turquesa | black, 5.1 to 1 |
| 30 | `#447b8e` | `oklch(55.14% 0.0647 222.99)` | Jelly Bean | white, 4.7 to 1 |
| 31 | `#427084` | `oklch(52.14% 0.0597 227.00)` | Am I Blue? | white, 5.3 to 1 |
| 32 | `#40697d` | `oklch(50.00% 0.0565 229.94)` | Ocean Storm | white, 5.9 to 1 |

## CSS

```css
background: linear-gradient(315deg, #73361c 0.0%, #7b3d22 3.2%, #864729 6.5%, #935332 9.7%, #a1603c 12.9%, #ae6d47 16.1%, #b97a51 19.4%, #c1855b 22.6%, #c79168 25.8%, #cd9c76 29.0%, #d1a783 32.3%, #d3b18e 35.5%, #d4b997 38.7%, #d3c09d 41.9%, #cec6a3 45.2%, #c7cca9 48.4%, #becfb0 51.6%, #b5d1b7 54.8%, #acd1bd 58.1%, #a4cfc0 61.3%, #9acbc1 64.5%, #8dc7bf 67.7%, #7fc1bd 71.0%, #70bbb9 74.2%, #62b3b6 77.4%, #58abb2 80.6%, #50a0ab 83.9%, #4b94a3 87.1%, #478798 90.3%, #447b8e 93.5%, #427084 96.8%, #40697d 100.0%);
background: linear-gradient(315deg in oklch, oklch(40.94% 0.0937 42.89) 0.0%, oklch(43.45% 0.0945 43.86) 3.2%, oklch(46.95% 0.0960 45.07) 6.5%, oklch(51.09% 0.0976 46.56) 9.7%, oklch(55.48% 0.0987 48.34) 12.9%, oklch(59.75% 0.0987 50.46) 16.1%, oklch(63.51% 0.0971 52.92) 19.4%, oklch(66.74% 0.0929 55.34) 22.6%, oklch(69.91% 0.0863 57.23) 25.8%, oklch(72.93% 0.0782 59.26) 29.0%, oklch(75.70% 0.0697 62.13) 32.3%, oklch(78.12% 0.0618 66.56) 35.5%, oklch(80.08% 0.0555 73.24) 38.7%, oklch(81.51% 0.0516 83.14) 41.9%, oklch(82.53% 0.0487 97.02) 45.2%, oklch(83.15% 0.0468 113.43) 48.4%, oklch(83.39% 0.0459 130.77) 51.6%, oklch(83.25% 0.0460 147.42) 54.8%, oklch(82.75% 0.0471 161.79) 58.1%, oklch(81.88% 0.0494 172.44) 61.3%, oklch(80.54% 0.0542 180.13) 64.5%, oklch(78.76% 0.0609 185.82) 67.7%, oklch(76.65% 0.0681 190.21) 71.0%, oklch(74.28% 0.0748 193.97) 74.2%, oklch(71.76% 0.0796 197.81) 77.4%, oklch(69.15% 0.0814 202.40) 80.6%, oklch(66.02% 0.0798 207.62) 83.9%, oklch(62.42% 0.0758 213.00) 87.1%, oklch(58.68% 0.0704 218.22) 90.3%, oklch(55.14% 0.0647 222.99) 93.5%, oklch(52.14% 0.0597 227.00) 96.8%, oklch(50.00% 0.0565 229.94) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.409 | 0.094 | 42.9 |
| 2 | 0.642 | 0.096 | 53.5 |
| 3 | 0.807 | 0.054 | 76.7 |
| 4 | 0.823 | 0.048 | 168.6 |
| 5 | 0.697 | 0.081 | 201.4 |
| 6 | 0.5 | 0.056 | 229.9 |

## In these collections

- [Weathered garden gradients](https://grabient.com/weathered-garden-gradients)
- [Beach gradients](https://grabient.com/beach-gradients)
- [Coastal gradients](https://grabient.com/coastal-gradients)
- [Desktop wallpaper gradients](https://grabient.com/desktop-wallpaper-gradients)

## Other forms

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