# Primary Ink Collision

Five distinct color bands run through green #067f5a, orange #f5c929, red #e93e30, rose #c62f84, and rose #6b2e3e. Their fixed order gives the composition clear separations for type, icons, labels, or chart marks, while the shifts in hue and value keep adjacent areas legible. The palette works as a complete field or as individual accents drawn from the same sequence.

- Also called: Green, yellow, magenta and maroon linear swatches
- Seed: `kWhlB1bDw3U7MOJISTtsaDBg`
- Page: https://grabient.com/kWhlB1bDw3U7MOJISTtsaDBg?style=linearSwatches&steps=5&angle=60
- Drawn as: linear swatches, 5 steps, 60 degrees
- Kinds: light center, vivid, warm, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 6.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 | `#067f5a` | `oklch(52.76% 0.1102 164.53)` | Irish Beauty | white, 5 to 1 |
| 2 | `#f5c929` | `oklch(85.04% 0.1654 91.62)` | Leery Lemon | black, 13.2 to 1 |
| 3 | `#e93e30` | `oklch(61.81% 0.2094 29.27)` | Safflower Scarlet | black, 5.1 to 1 |
| 4 | `#c62f84` | `oklch(56.69% 0.2012 351.22)` | Shrine of Pleasures | white, 5 to 1 |
| 5 | `#6b2e3e` | `oklch(38.98% 0.0896 4.96)` | Power Tie | white, 10 to 1 |

## CSS

```css
background: linear-gradient(60deg, #067f5a 0.000% 20.000%, #f5c929 20.000% 40.000%, #e93e30 40.000% 60.000%, #c62f84 60.000% 80.000%, #6b2e3e 80.000% 100.000%);
background: linear-gradient(60deg, oklch(52.76% 0.1102 164.53) 0.000% 20.000%, oklch(85.04% 0.1654 91.62) 20.000% 40.000%, oklch(61.81% 0.2094 29.27) 40.000% 60.000%, oklch(56.69% 0.2012 351.22) 60.000% 80.000%, oklch(38.98% 0.0896 4.96) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.528 | 0.11 | 164.5 |
| 2 | 0.85 | 0.165 | 91.6 |
| 3 | 0.618 | 0.209 | 29.3 |
| 4 | 0.567 | 0.201 | -8.8 |
| 5 | 0.39 | 0.09 | 5 |

## In these collections

- [Bold swatches](https://grabient.com/bold-swatches)

## Other forms

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