# Blue lavender and pink angular gradient

Midnight navy moves through royal blue and bright lavender into rosy pink, then returns through smoky violet to the same dark starting color. The closed angular gradient balances cool blue with warmer pink without losing its dark grounding. These colors suit website hero banners, creative portfolios, entertainment graphics, and expressive digital launches.

- Also called: Seamless navy, blue, pink and purple angular gradient
- Seed: `kUPSnCT0Q-dw_yoelLbA`
- Page: https://grabient.com/kUPSnCT0Q-dw_yoelLbA?style=angularGradient&steps=48&angle=225
- Drawn as: angular gradient, 48 steps, 225 degrees
- Kinds: light center, vivid, seamless
- Hues: wide
- Contrast of its darkest and lightest colors: 6.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 | `#171d3a` | `oklch(24.02% 0.0565 272.81)` | Nightwalker | white, 16.5 to 1 |
| 2 | `#192040` | `oklch(25.44% 0.0615 272.16)` | Konkikyō Blue | white, 15.9 to 1 |
| 3 | `#1b2448` | `oklch(27.23% 0.0679 271.08)` | Black Market | white, 15.1 to 1 |
| 4 | `#1d2952` | `oklch(29.35% 0.0755 269.66)` | Space Cadet | white, 14.1 to 1 |
| 5 | `#202f5d` | `oklch(31.74% 0.0841 267.98)` | Ending Navy Blue | white, 12.9 to 1 |
| 6 | `#223569` | `oklch(34.35% 0.0936 266.15)` | Passionate Blue | white, 11.7 to 1 |
| 7 | `#233c76` | `oklch(37.12% 0.1036 264.24)` | Blue Expanse | white, 10.5 to 1 |
| 8 | `#244484` | `oklch(40.01% 0.1139 262.35)` | Maritime Outpost | white, 9.3 to 1 |
| 9 | `#244d93` | `oklch(42.96% 0.1245 260.57)` | Le Grand Bleu | white, 8.2 to 1 |
| 10 | `#2355a2` | `oklch(45.93% 0.1350 258.99)` | Blue Sail | white, 7.2 to 1 |
| 11 | `#225eb0` | `oklch(48.86% 0.1451 257.69)` | Greek Flag Blue | white, 6.3 to 1 |
| 12 | `#2166bf` | `oklch(51.69% 0.1549 256.78)` | Blue Streak | white, 5.6 to 1 |
| 13 | `#216ecc` | `oklch(54.38% 0.1639 256.33)` | Celtic Blue | white, 5 to 1 |
| 14 | `#2475d9` | `oklch(56.88% 0.1719 256.44)` | Bright Navy Blue | black, 4.6 to 1 |
| 15 | `#2a7be5` | `oklch(59.14% 0.1789 257.19)` | Skies of Cyberspace | black, 5 to 1 |
| 16 | `#347fef` | `oklch(61.09% 0.1845 258.68)` | Dodger Blue | black, 5.4 to 1 |
| 17 | `#4182f8` | `oklch(62.72% 0.1886 261.04)` | Dodger Blue | black, 5.7 to 1 |
| 18 | `#5284ff` | `oklch(64.27% 0.1904 264.68)` | Flickery C64 | black, 6.1 to 1 |
| 19 | `#6687ff` | `oklch(65.79% 0.1812 269.56)` | Deep Denim | black, 6.4 to 1 |
| 20 | `#7a88ff` | `oklch(67.27% 0.1741 275.46)` | Orchid | black, 6.8 to 1 |
| 21 | `#8c89ff` | `oklch(68.68% 0.1697 282.18)` | Lavender Blue Shadow | black, 7.1 to 1 |
| 22 | `#9e89ff` | `oklch(70.00% 0.1689 289.50)` | Lavender Blue Shadow | black, 7.4 to 1 |
| 23 | `#af87ff` | `oklch(71.20% 0.1724 297.22)` | Lilac Geode | black, 7.7 to 1 |
| 24 | `#c083ff` | `oklch(72.26% 0.1814 305.12)` | Lilac Geode | black, 7.9 to 1 |
| 25 | `#d27dfe` | `oklch(73.16% 0.1962 312.99)` | Lavender Tea | black, 8.1 to 1 |
| 26 | `#e07bf4` | `oklch(73.87% 0.1946 320.63)` | Pink Bonnet | black, 8.3 to 1 |
| 27 | `#ea7ae9` | `oklch(74.37% 0.1926 327.82)` | Lián Hóng Lotus Pink | black, 8.4 to 1 |
| 28 | `#f278dd` | `oklch(74.63% 0.1901 334.36)` | Lián Hóng Lotus Pink | black, 8.5 to 1 |
| 29 | `#f777d1` | `oklch(74.63% 0.1872 340.03)` | Nervous Neon Pink | black, 8.5 to 1 |
| 30 | `#f976c7` | `oklch(74.34% 0.1839 344.62)` | Nervous Neon Pink | black, 8.4 to 1 |
| 31 | `#f974be` | `oklch(73.75% 0.1803 347.92)` | Dream Setting | black, 8.2 to 1 |
| 32 | `#f573b7` | `oklch(72.83% 0.1764 349.72)` | Pop That Gum | black, 8 to 1 |
| 33 | `#ef70b2` | `oklch(71.48% 0.1719 349.86)` | Pop That Gum | black, 7.6 to 1 |
| 34 | `#e56cae` | `oklch(69.54% 0.1663 348.45)` | Amaranth | black, 7.1 to 1 |
| 35 | `#d868aa` | `oklch(67.05% 0.1596 345.68)` | Mega Magenta | black, 6.4 to 1 |
| 36 | `#c963a7` | `oklch(64.12% 0.1521 341.75)` | Pú Táo Zǐ Purple | black, 5.8 to 1 |
| 37 | `#b75da2` | `oklch(60.82% 0.1438 336.83)` | Bodacious | black, 5.1 to 1 |
| 38 | `#a4579c` | `oklch(57.23% 0.1350 331.13)` | Heath Spotted Orchid | white, 4.7 to 1 |
| 39 | `#915195` | `oklch(53.43% 0.1259 324.84)` | Mad About Magenta | white, 5.5 to 1 |
| 40 | `#7d4a8c` | `oklch(49.53% 0.1165 318.14)` | Voodoo Violet | white, 6.4 to 1 |
| 41 | `#6a4382` | `oklch(45.58% 0.1072 311.23)` | Regality | white, 7.6 to 1 |
| 42 | `#583d77` | `oklch(41.69% 0.0980 304.29)` | Loden Purple | white, 8.9 to 1 |
| 43 | `#48366b` | `oklch(37.92% 0.0892 297.52)` | Petunia | white, 10.3 to 1 |
| 44 | `#3a305f` | `oklch(34.38% 0.0809 291.10)` | Jakarta Skyline | white, 11.8 to 1 |
| 45 | `#2e2a54` | `oklch(31.13% 0.0733 285.23)` | Deep Sea Base | white, 13.3 to 1 |
| 46 | `#242549` | `oklch(28.26% 0.0666 280.10)` | Fainting Light | white, 14.6 to 1 |
| 47 | `#1c2041` | `oklch(25.86% 0.0609 275.90)` | Konkikyō Blue | white, 15.7 to 1 |
| 48 | `#171d3a` | `oklch(24.02% 0.0565 272.81)` | Nightwalker | white, 16.5 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #171d3a 0.0%, #192040 2.1%, #1b2448 4.3%, #1d2952 6.4%, #202f5d 8.5%, #223569 10.6%, #233c76 12.8%, #244484 14.9%, #244d93 17.0%, #2355a2 19.1%, #225eb0 21.3%, #2166bf 23.4%, #216ecc 25.5%, #2475d9 27.7%, #2a7be5 29.8%, #347fef 31.9%, #4182f8 34.0%, #5284ff 36.2%, #6687ff 38.3%, #7a88ff 40.4%, #8c89ff 42.6%, #9e89ff 44.7%, #af87ff 46.8%, #c083ff 48.9%, #d27dfe 51.1%, #e07bf4 53.2%, #ea7ae9 55.3%, #f278dd 57.4%, #f777d1 59.6%, #f976c7 61.7%, #f974be 63.8%, #f573b7 66.0%, #ef70b2 68.1%, #e56cae 70.2%, #d868aa 72.3%, #c963a7 74.5%, #b75da2 76.6%, #a4579c 78.7%, #915195 80.9%, #7d4a8c 83.0%, #6a4382 85.1%, #583d77 87.2%, #48366b 89.4%, #3a305f 91.5%, #2e2a54 93.6%, #242549 95.7%, #1c2041 97.9%, #171d3a 100.0%);
background: conic-gradient(from 225deg in oklch, oklch(24.02% 0.0565 272.81) 0.0%, oklch(25.44% 0.0615 272.16) 2.1%, oklch(27.23% 0.0679 271.08) 4.3%, oklch(29.35% 0.0755 269.66) 6.4%, oklch(31.74% 0.0841 267.98) 8.5%, oklch(34.35% 0.0936 266.15) 10.6%, oklch(37.12% 0.1036 264.24) 12.8%, oklch(40.01% 0.1139 262.35) 14.9%, oklch(42.96% 0.1245 260.57) 17.0%, oklch(45.93% 0.1350 258.99) 19.1%, oklch(48.86% 0.1451 257.69) 21.3%, oklch(51.69% 0.1549 256.78) 23.4%, oklch(54.38% 0.1639 256.33) 25.5%, oklch(56.88% 0.1719 256.44) 27.7%, oklch(59.14% 0.1789 257.19) 29.8%, oklch(61.09% 0.1845 258.68) 31.9%, oklch(62.72% 0.1886 261.04) 34.0%, oklch(64.27% 0.1904 264.68) 36.2%, oklch(65.79% 0.1812 269.56) 38.3%, oklch(67.27% 0.1741 275.46) 40.4%, oklch(68.68% 0.1697 282.18) 42.6%, oklch(70.00% 0.1689 289.50) 44.7%, oklch(71.20% 0.1724 297.22) 46.8%, oklch(72.26% 0.1814 305.12) 48.9%, oklch(73.16% 0.1962 312.99) 51.1%, oklch(73.87% 0.1946 320.63) 53.2%, oklch(74.37% 0.1926 327.82) 55.3%, oklch(74.63% 0.1901 334.36) 57.4%, oklch(74.63% 0.1872 340.03) 59.6%, oklch(74.34% 0.1839 344.62) 61.7%, oklch(73.75% 0.1803 347.92) 63.8%, oklch(72.83% 0.1764 349.72) 66.0%, oklch(71.48% 0.1719 349.86) 68.1%, oklch(69.54% 0.1663 348.45) 70.2%, oklch(67.05% 0.1596 345.68) 72.3%, oklch(64.12% 0.1521 341.75) 74.5%, oklch(60.82% 0.1438 336.83) 76.6%, oklch(57.23% 0.1350 331.13) 78.7%, oklch(53.43% 0.1259 324.84) 80.9%, oklch(49.53% 0.1165 318.14) 83.0%, oklch(45.58% 0.1072 311.23) 85.1%, oklch(41.69% 0.0980 304.29) 87.2%, oklch(37.92% 0.0892 297.52) 89.4%, oklch(34.38% 0.0809 291.10) 91.5%, oklch(31.13% 0.0733 285.23) 93.6%, oklch(28.26% 0.0666 280.10) 95.7%, oklch(25.86% 0.0609 275.90) 97.9%, oklch(24.02% 0.0565 272.81) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.24 | 0.056 | 272.8 |
| 2 | 0.622 | 0.187 | 260.1 |
| 3 | 0.724 | 0.175 | 350 |
| 4 | 0.24 | 0.056 | 272.8 |

## In these collections

- [Hero section gradients](https://grabient.com/hero-section-gradients)

## Other forms

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