# Rain Green Warm Amber Soft Grass Green

These linear swatch bands move through rain green, warm amber, soft grass green, leaf green, and sunlit gold in its saved order. The complete composition keeps the lighter and darker areas distinct while preserving a balanced route through the named palette.

- Also called: Analogous teal, tan, green and yellow linear swatches
- Seed: `kWfCp33am0OafRjTnsL7q45g`
- Page: https://grabient.com/kWfCp33am0OafRjTnsL7q45g?style=linearSwatches&steps=5&angle=135
- Drawn as: linear swatches, 5 steps, 135 degrees
- Kinds: pastel
- Hues: wide
- Contrast of its darkest and lightest colors: 4.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 | `#3d6b5a` | `oklch(48.82% 0.0579 168.05)` | June Ivy | white, 6.1 to 1 |
| 2 | `#d99c54` | `oklch(73.62% 0.1144 68.71)` | Ceremonial Gold | black, 8.7 to 1 |
| 3 | `#b7c98b` | `oklch(80.71% 0.0854 121.55)` | Marsh Fern | black, 11.7 to 1 |
| 4 | `#6fa073` | `oklch(65.75% 0.0841 146.91)` | Growth | black, 6.9 to 1 |
| 5 | `#f1d26c` | `oklch(87.01% 0.1268 93.02)` | Yellow Cream | black, 14.1 to 1 |

## CSS

```css
background: linear-gradient(135deg, #3d6b5a 0.000% 20.000%, #d99c54 20.000% 40.000%, #b7c98b 40.000% 60.000%, #6fa073 60.000% 80.000%, #f1d26c 80.000% 100.000%);
background: linear-gradient(135deg, oklch(48.82% 0.0579 168.05) 0.000% 20.000%, oklch(73.62% 0.1144 68.71) 20.000% 40.000%, oklch(80.71% 0.0854 121.55) 40.000% 60.000%, oklch(65.75% 0.0841 146.91) 60.000% 80.000%, oklch(87.01% 0.1268 93.02) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.488 | 0.058 | 168 |
| 2 | 0.736 | 0.114 | 68.7 |
| 3 | 0.807 | 0.085 | 121.5 |
| 4 | 0.657 | 0.084 | 146.9 |
| 5 | 0.87 | 0.127 | 93 |

## In these collections

- [Spring thunder over veld](https://grabient.com/spring-thunder-over-veld)

## Other forms

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