# Magenta Rough Green Passage

These four diagonal bands move from magenta through cyan, warning red, and finish in rough green. Use the bold ink colors for DIY editorial graphics, zine covers, posters, or print-inspired title panels. The contrasting tones can separate large backgrounds, strong lettering, borders, and small disruptive accents within a compact layout.

- Also called: Rainbow from pink to green linear swatches
- Seed: `kUmLH_Vq2vsvNU7GLk6A`
- Page: https://grabient.com/kUmLH_Vq2vsvNU7GLk6A?style=linearSwatches&steps=4&angle=350
- Drawn as: linear swatches, 4 steps, 350 degrees
- Kinds: vivid, rainbow
- Hues: two-hue
- Contrast of its darkest and lightest colors: 1.6 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 | `#e5007e` | `oklch(59.85% 0.2434 358.60)` | Mexican Pink | black, 4.6 to 1 |
| 2 | `#00a9cf` | `oklch(68.11% 0.1251 221.22)` | Gummy Dolphins | black, 7.5 to 1 |
| 3 | `#e1312a` | `oklch(59.45% 0.2122 28.18)` | Permanent Geranium Lake | black, 4.6 to 1 |
| 4 | `#27864b` | `oklch(55.12% 0.1268 151.82)` | Lucky Green | black, 4.6 to 1 |

## CSS

```css
background: linear-gradient(350deg, #e5007e 0.000% 25.000%, #00a9cf 25.000% 50.000%, #e1312a 50.000% 75.000%, #27864b 75.000% 100.000%);
background: linear-gradient(350deg, oklch(59.85% 0.2434 358.60) 0.000% 25.000%, oklch(68.11% 0.1251 221.22) 25.000% 50.000%, oklch(59.45% 0.2122 28.18) 50.000% 75.000%, oklch(55.12% 0.1268 151.82) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.598 | 0.244 | 358.6 |
| 2 | 0.681 | 0.125 | 221.2 |
| 3 | 0.594 | 0.212 | 388.2 |
| 4 | 0.551 | 0.127 | 511.8 |

## In these collections

- [Zine colors](https://grabient.com/zine-colors)

## Other forms

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