# Warning Red Rough Green Fan

These four angular wedges move from warning red through paper cream, magenta, 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: Red, beige, pink and green angular swatches
- Seed: `kUl5oU-A7H8xYtHGLlIA`
- Page: https://grabient.com/kUl5oU-A7H8xYtHGLlIA?style=angularSwatches&steps=4&angle=60
- Drawn as: angular swatches, 4 steps, 60 degrees
- Kinds: light center, vivid, warm
- Hues: wide
- Contrast of its darkest and lightest colors: 3.8 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 | `#e13227` | `oklch(59.45% 0.2122 28.83)` | Devilish | black, 4.6 to 1 |
| 2 | `#f4edcf` | `oklch(94.49% 0.0400 96.46)` | Palest of Lemon | black, 17.9 to 1 |
| 3 | `#e5007c` | `oklch(59.85% 0.2430 359.25)` | Mexican Pink | black, 4.6 to 1 |
| 4 | `#25864c` | `oklch(55.12% 0.1268 152.47)` | Lucky Green | black, 4.6 to 1 |

## CSS

```css
background: conic-gradient(from 60deg, #e13227 0.000% 25.000%, #f4edcf 25.000% 50.000%, #e5007c 50.000% 75.000%, #25864c 75.000% 100.000%);
background: conic-gradient(from 60deg, oklch(59.45% 0.2122 28.83) 0.000% 25.000%, oklch(94.49% 0.0400 96.46) 25.000% 50.000%, oklch(59.85% 0.2430 359.25) 50.000% 75.000%, oklch(55.12% 0.1268 152.47) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.594 | 0.212 | 28.8 |
| 2 | 0.945 | 0.04 | 96.5 |
| 3 | 0.598 | 0.244 | -0.8 |
| 4 | 0.551 | 0.127 | 152.5 |

## In these collections

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

## Other forms

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