# Forest Signal Color Bars

Five horizontal swatches move from deep forest and bright green through warm yellow and signal red to dark plum. The sturdy stacked rhythm and offbeat color sequence suit playful posters, venue graphics, editorial dividers, merchandise, and bold interface panels that need a dark frame around energetic midtones.

- Also called: Dark green, yellow, red and purple linear swatches
- Seed: `kWSht5UjG-W86OPQx7fpx02A`
- Page: https://grabient.com/kWSht5UjG-W86OPQx7fpx02A?style=linearSwatches&steps=5&angle=180
- Drawn as: linear swatches, 5 steps, 180 degrees
- Kinds: light center, vivid, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 9.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 | `#173229` | `oklch(29.13% 0.0372 170.16)` | Intense Green | white, 13.8 to 1 |
| 2 | `#31a66a` | `oklch(64.57% 0.1364 156.42)` | Greenish | black, 6.7 to 1 |
| 3 | `#f3d543` | `oklch(87.40% 0.1598 97.24)` | Banana Drama | black, 14.4 to 1 |
| 4 | `#e94b3b` | `oklch(63.39% 0.1970 29.61)` | Mandarin Red | black, 5.5 to 1 |
| 5 | `#3a234f` | `oklch(30.71% 0.0799 306.12)` | Powerful Violet | white, 13.7 to 1 |

## CSS

```css
background: linear-gradient(180deg, #173229 0.000% 20.000%, #31a66a 20.000% 40.000%, #f3d543 40.000% 60.000%, #e94b3b 60.000% 80.000%, #3a234f 80.000% 100.000%);
background: linear-gradient(180deg, oklch(29.13% 0.0372 170.16) 0.000% 20.000%, oklch(64.57% 0.1364 156.42) 20.000% 40.000%, oklch(87.40% 0.1598 97.24) 40.000% 60.000%, oklch(63.39% 0.1970 29.61) 60.000% 80.000%, oklch(30.71% 0.0799 306.12) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.291 | 0.037 | 170.2 |
| 2 | 0.646 | 0.136 | 156.4 |
| 3 | 0.874 | 0.16 | 97.2 |
| 4 | 0.634 | 0.197 | 29.6 |
| 5 | 0.307 | 0.08 | -53.9 |

## In these collections

- [Funhaus](https://grabient.com/funhaus)

## Other forms

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