# Navy, lavender and wine color palette

The Navy, lavender and wine color palette brings together dark blue, blue, light purple, and magenta. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits website sections and interface mockups. Its darkest tone is dark blue, and its lightest tone is light purple.

- Also called: Vivid navy, lavender, pink and purple linear gradient
- Seed: `kaPkTBsbm_8VBQTfLULV0fEcXGwUoJD6g`
- Page: https://grabient.com/kaPkTBsbm_8VBQTfLULV0fEcXGwUoJD6g?steps=32&angle=270
- Drawn as: linear gradient, 32 steps, 270 degrees
- Kinds: light center, vivid
- Hues: wide
- Contrast of its darkest and lightest colors: 7.1 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 | `#13194c` | `oklch(24.41% 0.0937 272.11)` | Tetsu-Kon Blue | white, 16.5 to 1 |
| 2 | `#151c55` | `oklch(26.30% 0.1028 271.95)` | Dark Soul | white, 15.7 to 1 |
| 3 | `#192164` | `oklch(28.95% 0.1161 271.62)` | Pure Midnight | white, 14.5 to 1 |
| 4 | `#1e2774` | `oklch(32.07% 0.1311 271.36)` | Impression of Obscurity | white, 13.1 to 1 |
| 5 | `#232e86` | `oklch(35.35% 0.1455 271.39)` | Intergalactic Highway | white, 11.6 to 1 |
| 6 | `#2a3595` | `oklch(38.49% 0.1570 271.95)` | Liquid Denim | white, 10.3 to 1 |
| 7 | `#323ba3` | `oklch(41.35% 0.1651 273.06)` | Purple Cabbage | white, 9.1 to 1 |
| 8 | `#3b41af` | `oklch(44.16% 0.1721 274.52)` | Early Spring Night | white, 8.1 to 1 |
| 9 | `#4648bb` | `oklch(47.00% 0.1774 276.38)` | Megadrive Screen | white, 7.2 to 1 |
| 10 | `#524fc6` | `oklch(49.99% 0.1803 278.71)` | Iris | white, 6.3 to 1 |
| 11 | `#6057d0` | `oklch(53.19% 0.1800 281.59)` | Ameixa | white, 5.5 to 1 |
| 12 | `#7061d8` | `oklch(56.92% 0.1748 285.04)` | Dark Periwinkle | white, 4.7 to 1 |
| 13 | `#8470df` | `oklch(61.50% 0.1624 289.02)` | Matt Purple | black, 5.3 to 1 |
| 14 | `#987fe4` | `oklch(66.31% 0.1470 293.51)` | Indigo Bloom | black, 6.5 to 1 |
| 15 | `#ac8de8` | `oklch(70.66% 0.1329 298.51)` | Dreamy Candy Forest | black, 7.7 to 1 |
| 16 | `#bb96ea` | `oklch(73.86% 0.1246 304.03)` | Bright Lavender | black, 8.6 to 1 |
| 17 | `#c897ea` | `oklch(75.28% 0.1263 310.23)` | Dream Vapour | black, 9 to 1 |
| 18 | `#d291e7` | `oklch(75.16% 0.1381 317.81)` | Bright Lilac | black, 8.9 to 1 |
| 19 | `#dc85df` | `oklch(73.93% 0.1557 326.10)` | Blush Essence | black, 8.4 to 1 |
| 20 | `#e476d1` | `oklch(72.03% 0.1746 334.22)` | Hibiscus Pop | black, 7.8 to 1 |
| 21 | `#e966c0` | `oklch(69.88% 0.1904 341.31)` | Crumbly Lipstick | black, 7.1 to 1 |
| 22 | `#ea59b0` | `oklch(67.84% 0.1992 346.56)` | Orion | black, 6.5 to 1 |
| 23 | `#e74ea2` | `oklch(65.71% 0.2040 350.45)` | Schiaparelli Pink | black, 6 to 1 |
| 24 | `#e14494` | `oklch(63.32% 0.2061 353.31)` | Prunus Avium | black, 5.4 to 1 |
| 25 | `#d83a88` | `oklch(60.62% 0.2052 355.24)` | Sensual Climax | black, 4.8 to 1 |
| 26 | `#cd317c` | `oklch(57.56% 0.2008 356.32)` | Magentarama | white, 4.8 to 1 |
| 27 | `#be2971` | `oklch(54.11% 0.1926 356.64)` | Pink Shadow | white, 5.6 to 1 |
| 28 | `#a92366` | `oklch(49.66% 0.1772 355.56)` | Plastic Lips | white, 6.7 to 1 |
| 29 | `#8f205b` | `oklch(44.47% 0.1561 353.25)` | Violettuce | white, 8.3 to 1 |
| 30 | `#761c4f` | `oklch(39.23% 0.1333 350.42)` | Pansy Purple | white, 10.2 to 1 |
| 31 | `#611944` | `oklch(34.67% 0.1130 347.80)` | Plum Caspia | white, 12.1 to 1 |
| 32 | `#53173c` | `oklch(31.50% 0.0992 346.08)` | Tulip Poplar Purple | white, 13.5 to 1 |

## CSS

```css
background: linear-gradient(270deg, #13194c 0.0%, #151c55 3.2%, #192164 6.5%, #1e2774 9.7%, #232e86 12.9%, #2a3595 16.1%, #323ba3 19.4%, #3b41af 22.6%, #4648bb 25.8%, #524fc6 29.0%, #6057d0 32.3%, #7061d8 35.5%, #8470df 38.7%, #987fe4 41.9%, #ac8de8 45.2%, #bb96ea 48.4%, #c897ea 51.6%, #d291e7 54.8%, #dc85df 58.1%, #e476d1 61.3%, #e966c0 64.5%, #ea59b0 67.7%, #e74ea2 71.0%, #e14494 74.2%, #d83a88 77.4%, #cd317c 80.6%, #be2971 83.9%, #a92366 87.1%, #8f205b 90.3%, #761c4f 93.5%, #611944 96.8%, #53173c 100.0%);
background: linear-gradient(270deg in oklch, oklch(24.41% 0.0937 272.11) 0.0%, oklch(26.30% 0.1028 271.95) 3.2%, oklch(28.95% 0.1161 271.62) 6.5%, oklch(32.07% 0.1311 271.36) 9.7%, oklch(35.35% 0.1455 271.39) 12.9%, oklch(38.49% 0.1570 271.95) 16.1%, oklch(41.35% 0.1651 273.06) 19.4%, oklch(44.16% 0.1721 274.52) 22.6%, oklch(47.00% 0.1774 276.38) 25.8%, oklch(49.99% 0.1803 278.71) 29.0%, oklch(53.19% 0.1800 281.59) 32.3%, oklch(56.92% 0.1748 285.04) 35.5%, oklch(61.50% 0.1624 289.02) 38.7%, oklch(66.31% 0.1470 293.51) 41.9%, oklch(70.66% 0.1329 298.51) 45.2%, oklch(73.86% 0.1246 304.03) 48.4%, oklch(75.28% 0.1263 310.23) 51.6%, oklch(75.16% 0.1381 317.81) 54.8%, oklch(73.93% 0.1557 326.10) 58.1%, oklch(72.03% 0.1746 334.22) 61.3%, oklch(69.88% 0.1904 341.31) 64.5%, oklch(67.84% 0.1992 346.56) 67.7%, oklch(65.71% 0.2040 350.45) 71.0%, oklch(63.32% 0.2061 353.31) 74.2%, oklch(60.62% 0.2052 355.24) 77.4%, oklch(57.56% 0.2008 356.32) 80.6%, oklch(54.11% 0.1926 356.64) 83.9%, oklch(49.66% 0.1772 355.56) 87.1%, oklch(44.47% 0.1561 353.25) 90.3%, oklch(39.23% 0.1333 350.42) 93.5%, oklch(34.67% 0.1130 347.80) 96.8%, oklch(31.50% 0.0992 346.08) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.244 | 0.094 | 272.1 |
| 2 | 0.39 | 0.158 | 272.1 |
| 3 | 0.543 | 0.179 | 282.7 |
| 4 | 0.748 | 0.124 | 307 |
| 5 | 0.685 | 0.197 | 345 |
| 6 | 0.547 | 0.194 | 356.6 |
| 7 | 0.315 | 0.099 | 346.1 |

## In these collections

- [Retro gradients](https://grabient.com/retro-gradients)
- [Text gradients](https://grabient.com/text-gradients)
- [Neon gradients](https://grabient.com/neon-gradients)
- [Synthwave gradients](https://grabient.com/synthwave-gradients)

## Other forms

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