# Magenta and indigo color palette

The Magenta and indigo color palette brings together magenta, light magenta, light purple, light blue, and blue. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is magenta, and its lightest tone is light purple.

- Also called: Analogous purple, lavender and blue angular swatches
- Seed: `kYl1zs2Se_-0Sv9ukbv3h0-c0jP4`
- Page: https://grabient.com/kYl1zs2Se_-0Sv9ukbv3h0-c0jP4?style=angularSwatches&steps=6&angle=225
- Drawn as: angular swatches, 6 steps, 225 degrees
- Kinds: pastel
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.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 | `#aa609f` | `oklch(59.45% 0.1268 332.58)` | Radiant Orchid | black, 4.8 to 1 |
| 2 | `#c785bc` | `oklch(70.08% 0.1089 332.58)` | Dragonflies | black, 7.4 to 1 |
| 3 | `#e5c5e0` | `oklch(85.83% 0.0510 331.52)` | Sweet Alyssum | black, 13.3 to 1 |
| 4 | `#d7cef1` | `oklch(87.01% 0.0482 297.71)` | Plum’s the Word | black, 14 to 1 |
| 5 | `#a5a4dc` | `oklch(74.02% 0.0799 285.02)` | Simply Violet | black, 8.9 to 1 |
| 6 | `#797bba` | `oklch(60.63% 0.0965 281.85)` | Astro Zinger | black, 5.3 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #aa609f 0.000% 16.667%, #c785bc 16.667% 33.333%, #e5c5e0 33.333% 50.000%, #d7cef1 50.000% 66.667%, #a5a4dc 66.667% 83.333%, #797bba 83.333% 100.000%);
background: conic-gradient(from 225deg, oklch(59.45% 0.1268 332.58) 0.000% 16.667%, oklch(70.08% 0.1089 332.58) 16.667% 33.333%, oklch(85.83% 0.0510 331.52) 33.333% 50.000%, oklch(87.01% 0.0482 297.71) 50.000% 66.667%, oklch(74.02% 0.0799 285.02) 66.667% 83.333%, oklch(60.63% 0.0965 281.85) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.594 | 0.127 | 332.6 |
| 2 | 0.701 | 0.109 | 332.6 |
| 3 | 0.858 | 0.051 | 331.5 |
| 4 | 0.87 | 0.048 | 297.7 |
| 5 | 0.74 | 0.08 | 285 |
| 6 | 0.606 | 0.096 | 281.9 |

## In these collections

- [Purple swatches](https://grabient.com/purple-swatches)
- [Purple and pink swatches](https://grabient.com/purple-and-pink-swatches)
- [Lavender swatches](https://grabient.com/lavender-swatches)

## Other forms

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