# Witch hazel and sage gradient

Analogous gray, tan and orange linear gradient with 32 colors: #526b52, #556e54, #597156, #5d7659, #637a5c, #687f5f, #6e8562, #758a65, #7b8e67, #829369, #8a986a, #939d6b, #9ca26b, #a5a76c, #afab6c, #b7af6c, #bfb26c, #c6b56c, #cdb96c, #d4bc6c, #dabf6c, #e0c16a, #e5c269, #eac267, #edc164, #f0bd60, #f2b95b, #f3b456, #f3af52, #f3aa4e, #f3a64c, #f4a34a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Analogous gray, tan and orange linear gradient
- Seed: `kWfyRnTpY-N-gvHpq744zM9g`
- Page: https://grabient.com/kWfyRnTpY-N-gvHpq744zM9g?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: pastel
- Hues: wide
- Contrast of its darkest and lightest colors: 3.4 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 | `#526b52` | `oklch(50.00% 0.0496 144.84)` | Daylight Jungle | white, 5.8 to 1 |
| 2 | `#556e54` | `oklch(50.93% 0.0504 143.77)` | Green Bayou | white, 5.6 to 1 |
| 3 | `#597156` | `oklch(52.17% 0.0512 142.44)` | Cactus | white, 5.3 to 1 |
| 4 | `#5d7659` | `oklch(53.64% 0.0522 140.87)` | Seaweed Tea | white, 5 to 1 |
| 5 | `#637a5c` | `oklch(55.28% 0.0535 139.06)` | Silver Willow Green | white, 4.6 to 1 |
| 6 | `#687f5f` | `oklch(57.02% 0.0549 136.99)` | Emerald City | black, 4.8 to 1 |
| 7 | `#6e8562` | `oklch(58.80% 0.0567 134.68)` | Bladerunner | black, 5.1 to 1 |
| 8 | `#758a65` | `oklch(60.56% 0.0588 132.13)` | Watercress Spice | black, 5.5 to 1 |
| 9 | `#7b8e67` | `oklch(62.22% 0.0613 129.31)` | Crispy Crunch | black, 5.9 to 1 |
| 10 | `#829369` | `oklch(63.94% 0.0643 125.95)` | Green Eyes | black, 6.3 to 1 |
| 11 | `#8a986a` | `oklch(65.75% 0.0677 122.10)` | Cactus Valley | black, 6.8 to 1 |
| 12 | `#939d6b` | `oklch(67.59% 0.0714 117.93)` | Alamosa Green | black, 7.2 to 1 |
| 13 | `#9ca26b` | `oklch(69.44% 0.0754 113.65)` | Dry Grass | black, 7.8 to 1 |
| 14 | `#a5a76c` | `oklch(71.23% 0.0795 109.43)` | Elf Slippers | black, 8.3 to 1 |
| 15 | `#afab6c` | `oklch(72.93% 0.0836 105.48)` | Wasabi Green | black, 8.8 to 1 |
| 16 | `#b7af6c` | `oklch(74.49% 0.0876 101.98)` | Summer Moss | black, 9.3 to 1 |
| 17 | `#bfb26c` | `oklch(75.89% 0.0915 99.10)` | Straw Hut | black, 9.8 to 1 |
| 18 | `#c6b56c` | `oklch(77.26% 0.0955 96.75)` | Canadian Maple | black, 10.2 to 1 |
| 19 | `#cdb96c` | `oklch(78.60% 0.0996 94.78)` | Trumpet | black, 10.7 to 1 |
| 20 | `#d4bc6c` | `oklch(79.85% 0.1037 93.07)` | Tookie Bird | black, 11.2 to 1 |
| 21 | `#dabf6c` | `oklch(80.97% 0.1078 91.49)` | Pineapple Wine | black, 11.6 to 1 |
| 22 | `#e0c16a` | `oklch(81.90% 0.1117 89.90)` | Highlight Gold | black, 11.9 to 1 |
| 23 | `#e5c269` | `oklch(82.60% 0.1155 88.19)` | Bountiful Gold | black, 12.2 to 1 |
| 24 | `#eac267` | `oklch(83.02% 0.1190 86.22)` | Quilt Gold | black, 12.3 to 1 |
| 25 | `#edc164` | `oklch(83.07% 0.1224 83.85)` | French Fry | black, 12.3 to 1 |
| 26 | `#f0bd60` | `oklch(82.69% 0.1256 81.09)` | Bright Idea | black, 12.1 to 1 |
| 27 | `#f2b95b` | `oklch(82.01% 0.1288 78.12)` | Crunch | black, 11.8 to 1 |
| 28 | `#f3b456` | `oklch(81.12% 0.1318 75.08)` | Golden Hour | black, 11.4 to 1 |
| 29 | `#f3af52` | `oklch(80.16% 0.1345 72.14)` | Deep Fried | black, 11 to 1 |
| 30 | `#f3aa4e` | `oklch(79.23% 0.1369 69.47)` | Pani Puri | black, 10.6 to 1 |
| 31 | `#f3a64c` | `oklch(78.46% 0.1390 67.23)` | O’Brien Orange | black, 10.3 to 1 |
| 32 | `#f4a34a` | `oklch(77.95% 0.1406 65.59)` | Troll Slayer Orange | black, 10.1 to 1 |

## CSS

```css
background: linear-gradient(45deg, #526b52 0.0%, #556e54 3.2%, #597156 6.5%, #5d7659 9.7%, #637a5c 12.9%, #687f5f 16.1%, #6e8562 19.4%, #758a65 22.6%, #7b8e67 25.8%, #829369 29.0%, #8a986a 32.3%, #939d6b 35.5%, #9ca26b 38.7%, #a5a76c 41.9%, #afab6c 45.2%, #b7af6c 48.4%, #bfb26c 51.6%, #c6b56c 54.8%, #cdb96c 58.1%, #d4bc6c 61.3%, #dabf6c 64.5%, #e0c16a 67.7%, #e5c269 71.0%, #eac267 74.2%, #edc164 77.4%, #f0bd60 80.6%, #f2b95b 83.9%, #f3b456 87.1%, #f3af52 90.3%, #f3aa4e 93.5%, #f3a64c 96.8%, #f4a34a 100.0%);
background: linear-gradient(45deg in oklch, oklch(50.00% 0.0496 144.84) 0.0%, oklch(50.93% 0.0504 143.77) 3.2%, oklch(52.17% 0.0512 142.44) 6.5%, oklch(53.64% 0.0522 140.87) 9.7%, oklch(55.28% 0.0535 139.06) 12.9%, oklch(57.02% 0.0549 136.99) 16.1%, oklch(58.80% 0.0567 134.68) 19.4%, oklch(60.56% 0.0588 132.13) 22.6%, oklch(62.22% 0.0613 129.31) 25.8%, oklch(63.94% 0.0643 125.95) 29.0%, oklch(65.75% 0.0677 122.10) 32.3%, oklch(67.59% 0.0714 117.93) 35.5%, oklch(69.44% 0.0754 113.65) 38.7%, oklch(71.23% 0.0795 109.43) 41.9%, oklch(72.93% 0.0836 105.48) 45.2%, oklch(74.49% 0.0876 101.98) 48.4%, oklch(75.89% 0.0915 99.10) 51.6%, oklch(77.26% 0.0955 96.75) 54.8%, oklch(78.60% 0.0996 94.78) 58.1%, oklch(79.85% 0.1037 93.07) 61.3%, oklch(80.97% 0.1078 91.49) 64.5%, oklch(81.90% 0.1117 89.90) 67.7%, oklch(82.60% 0.1155 88.19) 71.0%, oklch(83.02% 0.1190 86.22) 74.2%, oklch(83.07% 0.1224 83.85) 77.4%, oklch(82.69% 0.1256 81.09) 80.6%, oklch(82.01% 0.1288 78.12) 83.9%, oklch(81.12% 0.1318 75.08) 87.1%, oklch(80.16% 0.1345 72.14) 90.3%, oklch(79.23% 0.1369 69.47) 93.5%, oklch(78.46% 0.1390 67.23) 96.8%, oklch(77.95% 0.1406 65.59) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.5 | 0.05 | 144.8 |
| 2 | 0.618 | 0.061 | 130 |
| 3 | 0.752 | 0.09 | 100.5 |
| 4 | 0.831 | 0.12 | 85.7 |
| 5 | 0.78 | 0.141 | 65.6 |

## In these collections

- [Witchy color palette](https://grabient.com/witchy-color-palette)

## Other forms

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