# Mint coral periwinkle angular swatches

The Mint coral periwinkle angular swatches brings together red, blue, light green, and dark gray. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark gray, and its lightest tone is light green.

- Also called: Red, blue, teal and black angular swatches
- Seed: `kUpZ8W0TMx-spMyaBMxA`
- Page: https://grabient.com/kUpZ8W0TMx-spMyaBMxA?style=angularSwatches&steps=4&angle=45
- Drawn as: angular swatches, 4 steps, 45 degrees
- Kinds: light center, cool, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 11.5 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 | `#f8452a` | `oklch(64.96% 0.2191 31.64)` | Strawberry Spinach Red | black, 5.8 to 1 |
| 2 | `#7183e0` | `oklch(63.78% 0.1406 273.28)` | Tanzine | black, 6 to 1 |
| 3 | `#7de3ba` | `oklch(84.25% 0.1130 165.50)` | Sprig of Mint | black, 13.5 to 1 |
| 4 | `#15171d` | `oklch(20.47% 0.0124 270.11)` | Eigengrau | white, 17.9 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #f8452a 0.000% 25.000%, #7183e0 25.000% 50.000%, #7de3ba 50.000% 75.000%, #15171d 75.000% 100.000%);
background: conic-gradient(from 45deg, oklch(64.96% 0.2191 31.64) 0.000% 25.000%, oklch(63.78% 0.1406 273.28) 25.000% 50.000%, oklch(84.25% 0.1130 165.50) 50.000% 75.000%, oklch(20.47% 0.0124 270.11) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.65 | 0.219 | 31.6 |
| 2 | 0.638 | 0.141 | -86.7 |
| 3 | 0.843 | 0.113 | -194.5 |
| 4 | 0.205 | 0.012 | -89.9 |

## In these collections

- [Energetic swatches](https://grabient.com/energetic-swatches)

## Other forms

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