# Pink and Blue: Navy and violet

The "Pink and Blue: Navy and violet" palette brings together dark blue, blue, purple, light red, and magenta. 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 light red.

- Also called: Navy, purple, pink and magenta linear gradient
- Seed: `kWPjjJs0S_NY5xLeKsRP7nAg`
- Page: https://grabient.com/kWPjjJs0S_NY5xLeKsRP7nAg?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light center
- Hues: wide
- Contrast of its darkest and lightest colors: 7 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 | `#1d1943` | `oklch(24.41% 0.0772 283.36)` | Prune Plum | white, 16.5 to 1 |
| 2 | `#1f1a4b` | `oklch(25.59% 0.0871 282.51)` | Silent Orbit | white, 16 to 1 |
| 3 | `#211c56` | `oklch(27.06% 0.1015 281.02)` | Spacescape | white, 15.4 to 1 |
| 4 | `#221d63` | `oklch(28.82% 0.1188 279.23)` | Intergalactic Cowboy | white, 14.7 to 1 |
| 5 | `#241f72` | `oklch(30.82% 0.1372 277.47)` | Snorlax | white, 13.8 to 1 |
| 6 | `#272182` | `oklch(33.06% 0.1551 276.09)` | Blue Royale | white, 12.8 to 1 |
| 7 | `#2a2592` | `oklch(35.49% 0.1710 275.43)` | Gentian Blue | white, 11.8 to 1 |
| 8 | `#3029a1` | `oklch(38.10% 0.1831 275.82)` | Depths of Night | white, 10.7 to 1 |
| 9 | `#3a2fad` | `oklch(40.88% 0.1900 277.61)` | Purple Cabbage | white, 9.5 to 1 |
| 10 | `#4837b8` | `oklch(44.16% 0.1921 280.89)` | Blue Violet | white, 8.3 to 1 |
| 11 | `#5941c1` | `oklch(47.93% 0.1907 285.37)` | Royal Nightcore | white, 7.1 to 1 |
| 12 | `#6d4bca` | `oklch(51.96% 0.1867 290.73)` | Waiporoporo Purple | white, 5.9 to 1 |
| 13 | `#8256d0` | `oklch(56.05% 0.1808 296.66)` | Fuchsia Blue | white, 5 to 1 |
| 14 | `#9660d4` | `oklch(59.98% 0.1741 302.82)` | Legendary Lavender | black, 4.9 to 1 |
| 15 | `#a86ad6` | `oklch(63.54% 0.1672 308.90)` | Violet Voltage | black, 5.6 to 1 |
| 16 | `#b872d7` | `oklch(66.52% 0.1610 314.58)` | Lavender | black, 6.4 to 1 |
| 17 | `#c478d6` | `oklch(68.78% 0.1559 319.71)` | Purple Kush | black, 6.9 to 1 |
| 18 | `#cf7dd4` | `oklch(70.73% 0.1499 325.01)` | Purple Kush | black, 7.5 to 1 |
| 19 | `#d883d0` | `oklch(72.39% 0.1430 330.46)` | Blush Essence | black, 8 to 1 |
| 20 | `#df87cb` | `oklch(73.70% 0.1359 335.87)` | Pink Punk | black, 8.4 to 1 |
| 21 | `#e38bc5` | `oklch(74.60% 0.1292 341.05)` | Blushed Bombshell | black, 8.7 to 1 |
| 22 | `#e68dbf` | `oklch(75.04% 0.1234 345.84)` | Tempting Pink | black, 8.9 to 1 |
| 23 | `#e68eb8` | `oklch(74.95% 0.1192 350.03)` | Chewing Gum Pink | black, 8.9 to 1 |
| 24 | `#e58cb1` | `oklch(74.28% 0.1172 353.45)` | Rosebloom | black, 8.7 to 1 |
| 25 | `#e187a9` | `oklch(72.79% 0.1180 355.95)` | Rose Glory | black, 8.2 to 1 |
| 26 | `#db7d9f` | `oklch(70.17% 0.1217 357.60)` | Impatient Pink | black, 7.4 to 1 |
| 27 | `#d27193` | `oklch(66.76% 0.1274 358.59)` | Fiesta Pink | black, 6.5 to 1 |
| 28 | `#c86387` | `oklch(62.90% 0.1343 359.08)` | Old Geranium | black, 5.5 to 1 |
| 29 | `#be547b` | `oklch(58.94% 0.1417 359.24)` | Cockscomb Red | black, 4.7 to 1 |
| 30 | `#b44570` | `oklch(55.24% 0.1487 359.24)` | Irresistible | white, 5.2 to 1 |
| 31 | `#ab3967` | `oklch(52.14% 0.1546 359.25)` | Rhine River Rose | white, 5.9 to 1 |
| 32 | `#a53060` | `oklch(50.00% 0.1585 359.45)` | Tree Peony | white, 6.5 to 1 |

## CSS

```css
background: linear-gradient(135deg, #1d1943 0.0%, #1f1a4b 3.2%, #211c56 6.5%, #221d63 9.7%, #241f72 12.9%, #272182 16.1%, #2a2592 19.4%, #3029a1 22.6%, #3a2fad 25.8%, #4837b8 29.0%, #5941c1 32.3%, #6d4bca 35.5%, #8256d0 38.7%, #9660d4 41.9%, #a86ad6 45.2%, #b872d7 48.4%, #c478d6 51.6%, #cf7dd4 54.8%, #d883d0 58.1%, #df87cb 61.3%, #e38bc5 64.5%, #e68dbf 67.7%, #e68eb8 71.0%, #e58cb1 74.2%, #e187a9 77.4%, #db7d9f 80.6%, #d27193 83.9%, #c86387 87.1%, #be547b 90.3%, #b44570 93.5%, #ab3967 96.8%, #a53060 100.0%);
background: linear-gradient(135deg in oklch, oklch(24.41% 0.0772 283.36) 0.0%, oklch(25.59% 0.0871 282.51) 3.2%, oklch(27.06% 0.1015 281.02) 6.5%, oklch(28.82% 0.1188 279.23) 9.7%, oklch(30.82% 0.1372 277.47) 12.9%, oklch(33.06% 0.1551 276.09) 16.1%, oklch(35.49% 0.1710 275.43) 19.4%, oklch(38.10% 0.1831 275.82) 22.6%, oklch(40.88% 0.1900 277.61) 25.8%, oklch(44.16% 0.1921 280.89) 29.0%, oklch(47.93% 0.1907 285.37) 32.3%, oklch(51.96% 0.1867 290.73) 35.5%, oklch(56.05% 0.1808 296.66) 38.7%, oklch(59.98% 0.1741 302.82) 41.9%, oklch(63.54% 0.1672 308.90) 45.2%, oklch(66.52% 0.1610 314.58) 48.4%, oklch(68.78% 0.1559 319.71) 51.6%, oklch(70.73% 0.1499 325.01) 54.8%, oklch(72.39% 0.1430 330.46) 58.1%, oklch(73.70% 0.1359 335.87) 61.3%, oklch(74.60% 0.1292 341.05) 64.5%, oklch(75.04% 0.1234 345.84) 67.7%, oklch(74.95% 0.1192 350.03) 71.0%, oklch(74.28% 0.1172 353.45) 74.2%, oklch(72.79% 0.1180 355.95) 77.4%, oklch(70.17% 0.1217 357.60) 80.6%, oklch(66.76% 0.1274 358.59) 83.9%, oklch(62.90% 0.1343 359.08) 87.1%, oklch(58.94% 0.1417 359.24) 90.3%, oklch(55.24% 0.1487 359.24) 93.5%, oklch(52.14% 0.1546 359.25) 96.8%, oklch(50.00% 0.1585 359.45) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.244 | 0.077 | 283.4 |
| 2 | 0.402 | 0.189 | 277 |
| 3 | 0.677 | 0.158 | 317.2 |
| 4 | 0.74 | 0.117 | 354.2 |
| 5 | 0.5 | 0.158 | 359.4 |

## In these collections

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

## Other forms

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