# Gray, green and brown linear swatches

Gray, green and brown linear swatches with 5 colors: #c6cdc1, #81a069, #3e7841, #00381f, #2e1201. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kW1Q1eVR8_8ImQWmG0FnBQzY`
- Page: https://grabient.com/kW1Q1eVR8_8ImQWmG0FnBQzY?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: light to dark
- Hues: analogous
- Contrast of its darkest and lightest colors: 10.7 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 | `#c6cdc1` | `oklch(83.86% 0.0179 132.19)` | Silver Grass | black, 12.8 to 1 |
| 2 | `#81a069` | `oklch(66.93% 0.0854 132.19)` | Pickle | black, 7.1 to 1 |
| 3 | `#3e7841` | `oklch(51.97% 0.1047 144.87)` | Cucumber Queen | white, 5.2 to 1 |
| 4 | `#00381f` | `oklch(29.93% 0.0707 157.47)` | Off-Road Green | white, 13.2 to 1 |
| 5 | `#2e1201` | `oklch(22.05% 0.0551 51.87)` | Shadow Play | white, 17.4 to 1 |

## CSS

```css
background: linear-gradient(90deg, #c6cdc1 0.000% 20.000%, #81a069 20.000% 40.000%, #3e7841 40.000% 60.000%, #00381f 60.000% 80.000%, #2e1201 80.000% 100.000%);
background: linear-gradient(90deg, oklch(83.86% 0.0179 132.19) 0.000% 20.000%, oklch(66.93% 0.0854 132.19) 20.000% 40.000%, oklch(51.97% 0.1047 144.87) 40.000% 60.000%, oklch(29.93% 0.0707 157.47) 60.000% 80.000%, oklch(22.05% 0.0551 51.87) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.839 | 0.018 | 132.2 |
| 2 | 0.669 | 0.085 | 132.2 |
| 3 | 0.52 | 0.105 | 144.9 |
| 4 | 0.299 | 0.074 | 157.5 |
| 5 | 0.22 | 0.055 | 51.9 |

## In these collections

- [Forest swatches](https://grabient.com/forest-swatches)

## Other forms

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