# Dark green, gray, brown and teal linear gradient

Dark green, gray, brown and teal linear gradient with 7 colors: #004733, #d1d3c6, #cac5c0, #3d1c12, #551e16, #856115, #63be9e. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWWjZ2fwA26KUOc0IkCXaTOo`
- Page: https://grabient.com/kWWjZ2fwA26KUOc0IkCXaTOo
- Drawn as: linear gradient, 7 steps, 90 degrees
- Kinds: dark center
- Hues: two-hue
- Contrast of its darkest and lightest colors: 10 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 | `#004733` | `oklch(35.44% 0.0736 165.89)` | UP Forest Green | white, 10.7 to 1 |
| 2 | `#d1d3c6` | `oklch(86.26% 0.0180 116.23)` | Filmy Green | black, 13.8 to 1 |
| 3 | `#cac5c0` | `oklch(82.69% 0.0094 68.68)` | In the Shadows | black, 12.2 to 1 |
| 4 | `#3d1c12` | `oklch(27.17% 0.0551 38.07)` | Délicieux au Chocolat | white, 15.2 to 1 |
| 5 | `#551e16` | `oklch(31.74% 0.0838 30.63)` | Peaty Brown | white, 13.2 to 1 |
| 6 | `#856115` | `oklch(51.65% 0.0986 80.69)` | Rat Brown | white, 5.6 to 1 |
| 7 | `#63be9e` | `oklch(73.62% 0.1006 168.05)` | Peppermint Fresh | black, 9.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #004733 0.0%, #d1d3c6 16.7%, #cac5c0 33.3%, #3d1c12 50.0%, #551e16 66.7%, #856115 83.3%, #63be9e 100.0%);
background: linear-gradient(90deg in oklch, oklch(35.44% 0.0736 165.89) 0.0%, oklch(86.26% 0.0180 116.23) 16.7%, oklch(82.69% 0.0094 68.68) 33.3%, oklch(27.17% 0.0551 38.07) 50.0%, oklch(31.74% 0.0838 30.63) 66.7%, oklch(51.65% 0.0986 80.69) 83.3%, oklch(73.62% 0.1006 168.05) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.354 | 0.074 | 165.9 |
| 2 | 1 | 0 | 89.9 |
| 3 | 0.272 | 0.055 | 38.1 |
| 4 | 0.409 | 0.094 | 43.4 |
| 5 | 0.736 | 0.101 | 168.1 |

## Other forms

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