# Vivid navy, purple, lavender and blue linear swatches

Vivid navy, purple, lavender and blue linear swatches with 32 colors: #270752, #290857, #2d085e, #310966, #350a6f, #390b78, #3e0b80, #430b8a, #490b93, #4e0b9c, #540ca6, #5b0eb0, #6110b9, #6814c3, #701acc, #7820d6, #8028df, #8831e7, #913cee, #9b4bf3, #a559f7, #ae67fa, #b674fc, #bc7ffe, #c38dff, #c898ff, #c79bfe, #bc93f6, #a47ce8, #855ed6, #6940c5, #5628b9. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcPljRpri_y_HwA6VUAx1pAVfHwHgND_N8u-Q`
- Page: https://grabient.com/kcPljRpri_y_HwA6VUAx1pAVfHwHgND_N8u-Q?style=linearSwatches&steps=32&angle=315
- Drawn as: linear swatches, 32 steps, 315 degrees
- Kinds: light center, vivid
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 7.6 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 | `#270752` | `oklch(24.41% 0.1213 294.61)` | Crowberry | white, 16.9 to 1 |
| 2 | `#290857` | `oklch(25.32% 0.1266 294.40)` | Praise of Shadow | white, 16.5 to 1 |
| 3 | `#2d085e` | `oklch(26.61% 0.1341 294.09)` | Voldemort | white, 16 to 1 |
| 4 | `#310966` | `oklch(28.11% 0.1429 293.77)` | Infinite Inkwell | white, 15.4 to 1 |
| 5 | `#350a6f` | `oklch(29.67% 0.1520 293.58)` | Candied Blueberry | white, 14.7 to 1 |
| 6 | `#390b78` | `oklch(31.16% 0.1607 293.58)` | Persian Indigo | white, 14 to 1 |
| 7 | `#3e0b80` | `oklch(32.69% 0.1700 293.73)` | Pixie Powder | white, 13.4 to 1 |
| 8 | `#430b8a` | `oklch(34.29% 0.1797 293.98)` | Grim Purple | white, 12.7 to 1 |
| 9 | `#490b93` | `oklch(35.94% 0.1892 294.31)` | Pitch Violet | white, 12 to 1 |
| 10 | `#4e0b9c` | `oklch(37.65% 0.1983 294.66)` | Amarklor Violet | white, 11.2 to 1 |
| 11 | `#540ca6` | `oklch(39.40% 0.2075 295.05)` | Aubergine Perl | white, 10.5 to 1 |
| 12 | `#5b0eb0` | `oklch(41.21% 0.2167 295.50)` | Aubergine Perl | white, 9.8 to 1 |
| 13 | `#6110b9` | `oklch(43.09% 0.2253 296.00)` | Purplue | white, 9.1 to 1 |
| 14 | `#6814c3` | `oklch(45.08% 0.2325 296.55)` | Trusted Purple | white, 8.4 to 1 |
| 15 | `#701acc` | `oklch(47.18% 0.2385 297.16)` | Crown Chakra | white, 7.7 to 1 |
| 16 | `#7820d6` | `oklch(49.36% 0.2443 297.82)` | Voluptuous Violet | white, 7 to 1 |
| 17 | `#8028df` | `oklch(51.65% 0.2485 298.54)` | Purple Protest | white, 6.4 to 1 |
| 18 | `#8831e7` | `oklch(54.08% 0.2497 299.31)` | Bright Blue Violet | white, 5.7 to 1 |
| 19 | `#913cee` | `oklch(56.68% 0.2466 300.15)` | Chaste Blossoms | white, 5.1 to 1 |
| 20 | `#9b4bf3` | `oklch(59.66% 0.2380 301.20)` | Aconite Violet | black, 4.6 to 1 |
| 21 | `#a559f7` | `oklch(62.85% 0.2258 302.35)` | Orion Nebula | black, 5.3 to 1 |
| 22 | `#ae67fa` | `oklch(65.92% 0.2120 303.38)` | Purple Hedonist | black, 6.1 to 1 |
| 23 | `#b674fc` | `oklch(68.57% 0.1988 304.06)` | Queer Purple | black, 6.8 to 1 |
| 24 | `#bc7ffe` | `oklch(71.17% 0.1850 304.44)` | Illicit Purple | black, 7.6 to 1 |
| 25 | `#c38dff` | `oklch(74.12% 0.1670 304.70)` | Liliac | black, 8.5 to 1 |
| 26 | `#c898ff` | `oklch(76.32% 0.1511 304.59)` | Lilás | black, 9.3 to 1 |
| 27 | `#c79bfe` | `oklch(76.66% 0.1445 303.86)` | Lilás | black, 9.5 to 1 |
| 28 | `#bc93f6` | `oklch(73.89% 0.1452 302.18)` | Liliac | black, 8.6 to 1 |
| 29 | `#a47ce8` | `oklch(67.04% 0.1577 299.09)` | Forgotten Purple | black, 6.6 to 1 |
| 30 | `#855ed6` | `oklch(58.09% 0.1766 295.31)` | Gloomy Purple | white, 4.5 to 1 |
| 31 | `#6940c5` | `oklch(49.51% 0.1955 291.75)` | Dragonlord Purple | white, 6.7 to 1 |
| 32 | `#5628b9` | `oklch(43.70% 0.2081 289.33)` | Illustrious Indigo | white, 8.7 to 1 |

## CSS

```css
background: linear-gradient(315deg, #270752 0.000% 3.125%, #290857 3.125% 6.250%, #2d085e 6.250% 9.375%, #310966 9.375% 12.500%, #350a6f 12.500% 15.625%, #390b78 15.625% 18.750%, #3e0b80 18.750% 21.875%, #430b8a 21.875% 25.000%, #490b93 25.000% 28.125%, #4e0b9c 28.125% 31.250%, #540ca6 31.250% 34.375%, #5b0eb0 34.375% 37.500%, #6110b9 37.500% 40.625%, #6814c3 40.625% 43.750%, #701acc 43.750% 46.875%, #7820d6 46.875% 50.000%, #8028df 50.000% 53.125%, #8831e7 53.125% 56.250%, #913cee 56.250% 59.375%, #9b4bf3 59.375% 62.500%, #a559f7 62.500% 65.625%, #ae67fa 65.625% 68.750%, #b674fc 68.750% 71.875%, #bc7ffe 71.875% 75.000%, #c38dff 75.000% 78.125%, #c898ff 78.125% 81.250%, #c79bfe 81.250% 84.375%, #bc93f6 84.375% 87.500%, #a47ce8 87.500% 90.625%, #855ed6 90.625% 93.750%, #6940c5 93.750% 96.875%, #5628b9 96.875% 100.000%);
background: linear-gradient(315deg, oklch(24.41% 0.1213 294.61) 0.000% 3.125%, oklch(25.32% 0.1266 294.40) 3.125% 6.250%, oklch(26.61% 0.1341 294.09) 6.250% 9.375%, oklch(28.11% 0.1429 293.77) 9.375% 12.500%, oklch(29.67% 0.1520 293.58) 12.500% 15.625%, oklch(31.16% 0.1607 293.58) 15.625% 18.750%, oklch(32.69% 0.1700 293.73) 18.750% 21.875%, oklch(34.29% 0.1797 293.98) 21.875% 25.000%, oklch(35.94% 0.1892 294.31) 25.000% 28.125%, oklch(37.65% 0.1983 294.66) 28.125% 31.250%, oklch(39.40% 0.2075 295.05) 31.250% 34.375%, oklch(41.21% 0.2167 295.50) 34.375% 37.500%, oklch(43.09% 0.2253 296.00) 37.500% 40.625%, oklch(45.08% 0.2325 296.55) 40.625% 43.750%, oklch(47.18% 0.2385 297.16) 43.750% 46.875%, oklch(49.36% 0.2443 297.82) 46.875% 50.000%, oklch(51.65% 0.2485 298.54) 50.000% 53.125%, oklch(54.08% 0.2497 299.31) 53.125% 56.250%, oklch(56.68% 0.2466 300.15) 56.250% 59.375%, oklch(59.66% 0.2380 301.20) 59.375% 62.500%, oklch(62.85% 0.2258 302.35) 62.500% 65.625%, oklch(65.92% 0.2120 303.38) 65.625% 68.750%, oklch(68.57% 0.1988 304.06) 68.750% 71.875%, oklch(71.17% 0.1850 304.44) 71.875% 75.000%, oklch(74.12% 0.1670 304.70) 75.000% 78.125%, oklch(76.32% 0.1511 304.59) 78.125% 81.250%, oklch(76.66% 0.1445 303.86) 81.250% 84.375%, oklch(73.89% 0.1452 302.18) 84.375% 87.500%, oklch(67.04% 0.1577 299.09) 87.500% 90.625%, oklch(58.09% 0.1766 295.31) 90.625% 93.750%, oklch(49.51% 0.1955 291.75) 93.750% 96.875%, oklch(43.70% 0.2081 289.33) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.244 | 0.121 | 294.6 |
| 2 | 0.303 | 0.156 | 293.6 |
| 3 | 0.374 | 0.197 | 294.6 |
| 4 | 0.457 | 0.234 | 296.7 |
| 5 | 0.559 | 0.248 | 299.9 |
| 6 | 0.689 | 0.197 | 304.1 |
| 7 | 0.756 | 0.143 | 303.1 |
| 8 | 0.437 | 0.208 | 289.3 |

## In these collections

- [Monochrome purple gradients](https://grabient.com/monochrome-purple-gradients)
- [Electric purple gradients](https://grabient.com/electric-purple-gradients)

## Other forms

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