# Purple Purple Purple Field

This vertical gradient moves through vivid purple, vivid blue, cyan, muted violet, deep purple, deep blue, muted violet, and pale purple. The complete visible route keeps the collection’s named color relationship clear while providing distinct light and dark areas for type, marks, and framing.

- Also called: Pink, blue, navy and purple linear gradient
- Seed: `kWwIDwTCOxDalUEdGTSaqdKg`
- Page: https://grabient.com/kWwIDwTCOxDalUEdGTSaqdKg?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: dark center
- Hues: wide
- Contrast of its darkest and lightest colors: 10.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 | `#f47fd7` | `oklch(75.59% 0.1764 337.50)` | Splash of Grenadine | black, 8.8 to 1 |
| 2 | `#e182e5` | `oklch(74.34% 0.1695 325.51)` | Lavender Magenta | black, 8.5 to 1 |
| 3 | `#c289f4` | `oklch(72.67% 0.1596 307.45)` | Liliac | black, 8.1 to 1 |
| 4 | `#9991f8` | `oklch(70.69% 0.1479 285.83)` | Cobalite | black, 7.7 to 1 |
| 5 | `#6d98ed` | `oklch(68.49% 0.1353 263.17)` | Guilliman Blue | black, 7.3 to 1 |
| 6 | `#439bd7` | `oklch(66.16% 0.1228 241.97)` | Flax Flower Blue | black, 6.8 to 1 |
| 7 | `#2499be` | `oklch(63.79% 0.1115 224.75)` | Butterfly Blue | black, 6.3 to 1 |
| 8 | `#1b94aa` | `oklch(61.48% 0.1025 214.02)` | Brilliant | black, 5.8 to 1 |
| 9 | `#1d8da0` | `oklch(59.32% 0.0967 212.34)` | Safe Harbour | black, 5.3 to 1 |
| 10 | `#25849f` | `oklch(57.21% 0.0942 221.65)` | Blue Arc | black, 4.8 to 1 |
| 11 | `#3679a3` | `oklch(55.11% 0.0941 239.64)` | Taiwan Blue Magpie | white, 4.7 to 1 |
| 12 | `#4e6ba3` | `oklch(52.99% 0.0956 263.10)` | San Marino | white, 5.3 to 1 |
| 13 | `#645b9a` | `oklch(50.84% 0.0980 288.82)` | Giant Onion | white, 5.9 to 1 |
| 14 | `#744d87` | `oklch(48.65% 0.1005 313.58)` | Affair | white, 6.6 to 1 |
| 15 | `#7b4170` | `oklch(46.41% 0.1023 334.16)` | Spring Lobster Dye | white, 7.4 to 1 |
| 16 | `#7a385d` | `oklch(44.10% 0.1026 347.36)` | Pleasure | white, 8.1 to 1 |
| 17 | `#733253` | `oklch(41.55% 0.1007 350.24)` | Possessed Plum | white, 9.1 to 1 |
| 18 | `#642a4f` | `oklch(38.00% 0.0968 343.52)` | Velvet Mauve | white, 10.5 to 1 |
| 19 | `#51234e` | `oklch(33.81% 0.0915 329.97)` | Murasaki | white, 12.3 to 1 |
| 20 | `#3b1d4b` | `oklch(29.52% 0.0856 312.28)` | Obsidian Orchid | white, 14.3 to 1 |
| 21 | `#261945` | `oklch(25.68% 0.0796 293.17)` | Azulado | white, 16 to 1 |
| 22 | `#14173e` | `oklch(22.83% 0.0744 275.35)` | Nightwalker | white, 17.1 to 1 |
| 23 | `#061739` | `oklch(21.51% 0.0706 261.54)` | Navy | white, 17.6 to 1 |
| 24 | `#011b3a` | `oklch(22.26% 0.0689 254.43)` | Naval Night | white, 17.2 to 1 |
| 25 | `#092344` | `oklch(25.80% 0.0700 255.75)` | Dark Eclipse | white, 15.6 to 1 |
| 26 | `#203259` | `oklch(32.33% 0.0735 263.49)` | Boatswain | white, 12.6 to 1 |
| 27 | `#3f4675` | `oklch(40.98% 0.0789 275.80)` | Constellation Blue | white, 8.9 to 1 |
| 28 | `#665c93` | `oklch(50.82% 0.0853 290.92)` | Colossus | white, 5.9 to 1 |
| 29 | `#9274ae` | `oklch(60.95% 0.0921 307.06)` | Romantic Moment | black, 5.3 to 1 |
| 30 | `#bd8bc4` | `oklch(70.44% 0.0985 322.45)` | Violaceous | black, 7.6 to 1 |
| 31 | `#e39fd3` | `oklch(78.38% 0.1039 335.30)` | Exotic Violet | black, 10.1 to 1 |
| 32 | `#fcaedc` | `oklch(83.86% 0.1075 343.84)` | Fresh Gum | black, 12.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f47fd7 0.0%, #e182e5 3.2%, #c289f4 6.5%, #9991f8 9.7%, #6d98ed 12.9%, #439bd7 16.1%, #2499be 19.4%, #1b94aa 22.6%, #1d8da0 25.8%, #25849f 29.0%, #3679a3 32.3%, #4e6ba3 35.5%, #645b9a 38.7%, #744d87 41.9%, #7b4170 45.2%, #7a385d 48.4%, #733253 51.6%, #642a4f 54.8%, #51234e 58.1%, #3b1d4b 61.3%, #261945 64.5%, #14173e 67.7%, #061739 71.0%, #011b3a 74.2%, #092344 77.4%, #203259 80.6%, #3f4675 83.9%, #665c93 87.1%, #9274ae 90.3%, #bd8bc4 93.5%, #e39fd3 96.8%, #fcaedc 100.0%);
background: linear-gradient(90deg in oklch, oklch(75.59% 0.1764 337.50) 0.0%, oklch(74.34% 0.1695 325.51) 3.2%, oklch(72.67% 0.1596 307.45) 6.5%, oklch(70.69% 0.1479 285.83) 9.7%, oklch(68.49% 0.1353 263.17) 12.9%, oklch(66.16% 0.1228 241.97) 16.1%, oklch(63.79% 0.1115 224.75) 19.4%, oklch(61.48% 0.1025 214.02) 22.6%, oklch(59.32% 0.0967 212.34) 25.8%, oklch(57.21% 0.0942 221.65) 29.0%, oklch(55.11% 0.0941 239.64) 32.3%, oklch(52.99% 0.0956 263.10) 35.5%, oklch(50.84% 0.0980 288.82) 38.7%, oklch(48.65% 0.1005 313.58) 41.9%, oklch(46.41% 0.1023 334.16) 45.2%, oklch(44.10% 0.1026 347.36) 48.4%, oklch(41.55% 0.1007 350.24) 51.6%, oklch(38.00% 0.0968 343.52) 54.8%, oklch(33.81% 0.0915 329.97) 58.1%, oklch(29.52% 0.0856 312.28) 61.3%, oklch(25.68% 0.0796 293.17) 64.5%, oklch(22.83% 0.0744 275.35) 67.7%, oklch(21.51% 0.0706 261.54) 71.0%, oklch(22.26% 0.0689 254.43) 74.2%, oklch(25.80% 0.0700 255.75) 77.4%, oklch(32.33% 0.0735 263.49) 80.6%, oklch(40.98% 0.0789 275.80) 83.9%, oklch(50.82% 0.0853 290.92) 87.1%, oklch(60.95% 0.0921 307.06) 90.3%, oklch(70.44% 0.0985 322.45) 93.5%, oklch(78.38% 0.1039 335.30) 96.8%, oklch(83.86% 0.1075 343.84) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.756 | 0.176 | 337.5 |
| 2 | 0.598 | 0.098 | 211.7 |
| 3 | 0.429 | 0.102 | 350.2 |
| 4 | 0.228 | 0.069 | 254 |
| 5 | 0.839 | 0.107 | 343.8 |

## In these collections

- [Pink and blue gradients](https://grabient.com/pink-and-blue-gradients)

## Other forms

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