# Indigo pink marigold swatches

The Indigo pink marigold swatches brings together dark blue, blue, purple, magenta, and orange. 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 blue, and its lightest tone is orange.

- Also called: Black, purple, pink and orange linear swatches
- Seed: `kWNRe8LbFBkTZwbTzUc4bvI4`
- Page: https://grabient.com/kWNRe8LbFBkTZwbTzUc4bvI4?style=linearSwatches&steps=5&angle=135
- Drawn as: linear swatches, 5 steps, 135 degrees
- Kinds: dark to light, vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 8.2 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 | `#111827` | `oklch(20.87% 0.0317 264.37)` | Sambucus | white, 17.7 to 1 |
| 2 | `#302e81` | `oklch(35.83% 0.1350 278.11)` | Cosmic Cobalt | white, 11.4 to 1 |
| 3 | `#7b39ec` | `oklch(53.94% 0.2467 292.91)` | Bluish Purple | white, 5.7 to 1 |
| 4 | `#ed489a` | `oklch(65.75% 0.2122 354.20)` | Schiaparelli Pink | black, 5.9 to 1 |
| 5 | `#f49e0d` | `oklch(76.77% 0.1640 70.28)` | DodgeRoll Gold | black, 9.7 to 1 |

## CSS

```css
background: linear-gradient(135deg, #111827 0.000% 20.000%, #302e81 20.000% 40.000%, #7b39ec 40.000% 60.000%, #ed489a 60.000% 80.000%, #f49e0d 80.000% 100.000%);
background: linear-gradient(135deg, oklch(20.87% 0.0317 264.37) 0.000% 20.000%, oklch(35.83% 0.1350 278.11) 20.000% 40.000%, oklch(53.94% 0.2467 292.91) 40.000% 60.000%, oklch(65.75% 0.2122 354.20) 60.000% 80.000%, oklch(76.77% 0.1640 70.28) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.209 | 0.032 | 264.4 |
| 2 | 0.358 | 0.135 | 278.1 |
| 3 | 0.539 | 0.247 | 292.9 |
| 4 | 0.657 | 0.212 | 354.2 |
| 5 | 0.768 | 0.164 | 430.3 |

## In these collections

- [Day of the Dead swatches](https://grabient.com/day-of-the-dead-swatches)

## Other forms

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