# Red orange spring green swatches

The Red orange spring green swatches brings together red, orange, yellow, light green, and off-white. The colors span a moderate lightness range, combining strong color with gentle contrast. Its light and open character suits seasonal campaigns and event graphics. Its darkest tone is red, and its lightest tone is off-white.

- Also called: Red, yellow, green and white linear swatches
- Seed: `kWqKQS4rpD3M2xToMMXfgc9g`
- Page: https://grabient.com/kWqKQS4rpD3M2xToMMXfgc9g?style=linearSwatches&steps=5&angle=180
- Drawn as: linear swatches, 5 steps, 180 degrees
- Kinds: vivid, light
- Hues: wide
- Contrast of its darkest and lightest colors: 3.3 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 | `#ff4241` | `oklch(66.14% 0.2252 26.02)` | Red Coral | black, 6.1 to 1 |
| 2 | `#ff9a3d` | `oklch(77.56% 0.1585 58.78)` | Orange Hibiscus | black, 9.9 to 1 |
| 3 | `#f2e461` | `oklch(90.55% 0.1502 103.16)` | Flame Seal | black, 16 to 1 |
| 4 | `#7add9a` | `oklch(81.89% 0.1337 152.83)` | Aurora Green | black, 12.6 to 1 |
| 5 | `#f8fff4` | `oklch(99.21% 0.0158 132.73)` | Touch of Mint | black, 20.6 to 1 |

## CSS

```css
background: linear-gradient(180deg, #ff4241 0.000% 20.000%, #ff9a3d 20.000% 40.000%, #f2e461 40.000% 60.000%, #7add9a 60.000% 80.000%, #f8fff4 80.000% 100.000%);
background: linear-gradient(180deg, oklch(66.14% 0.2252 26.02) 0.000% 20.000%, oklch(77.56% 0.1585 58.78) 20.000% 40.000%, oklch(90.55% 0.1502 103.16) 40.000% 60.000%, oklch(81.89% 0.1337 152.83) 60.000% 80.000%, oklch(99.21% 0.0158 132.73) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.661 | 0.226 | 26 |
| 2 | 0.776 | 0.16 | 58.8 |
| 3 | 0.906 | 0.15 | 103.2 |
| 4 | 0.819 | 0.134 | 152.8 |
| 5 | 0.992 | 0.019 | 132.7 |

## In these collections

- [Happy swatches](https://grabient.com/happy-swatches)

## Other forms

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