# Teal, green, brown and dark purple linear gradient

Teal, green, brown and dark purple linear gradient with 7 colors: #2d8073, #96b863, #ba8e47, #55382d, #481f30, #7b3349, #d17931. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWizyAYq22S8QuSqHrl1DJII`
- Page: https://grabient.com/kWizyAYq22S8QuSqHrl1DJII
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark center, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 6.1 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 | `#2d8073` | `oklch(54.72% 0.0827 180.00)` | Elegant Silk | white, 4.7 to 1 |
| 2 | `#96b863` | `oklch(73.80% 0.1187 126.97)` | Green Pepper | black, 9.3 to 1 |
| 3 | `#ba8e47` | `oklch(67.38% 0.1034 77.73)` | Harvest Blessing | black, 7 to 1 |
| 4 | `#55382d` | `oklch(37.01% 0.0455 41.57)` | Bright Brown | white, 10.6 to 1 |
| 5 | `#481f30` | `oklch(30.29% 0.0657 355.62)` | Castro | white, 13.9 to 1 |
| 6 | `#7b3349` | `oklch(42.58% 0.1028 3.21)` | Rhododendron | white, 8.7 to 1 |
| 7 | `#d17931` | `oklch(66.14% 0.1378 56.36)` | Fired Up | black, 6.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #2d8073 0.0%, #96b863 16.7%, #ba8e47 33.3%, #55382d 50.0%, #481f30 66.7%, #7b3349 83.3%, #d17931 100.0%);
background: linear-gradient(90deg in oklch, oklch(54.72% 0.0827 180.00) 0.0%, oklch(73.80% 0.1187 126.97) 16.7%, oklch(67.38% 0.1034 77.73) 33.3%, oklch(37.01% 0.0455 41.57) 50.0%, oklch(30.29% 0.0657 355.62) 66.7%, oklch(42.58% 0.1028 3.21) 83.3%, oklch(66.14% 0.1378 56.36) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.547 | 0.083 | 180 |
| 2 | 0.776 | 0.125 | 98.6 |
| 3 | 0.37 | 0.045 | 41.6 |
| 4 | 0.331 | 0.084 | -13.4 |
| 5 | 0.661 | 0.138 | 56.4 |

## Other forms

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