# Sky blue pink diagonal

Blue, pink, lavender and navy linear gradient with 48 colors: #20a6d9, #22a5dd, #23a2e1, #26a0e6, #2d9ceb, #3698f0, #4294f6, #4e8efa, #5c89fe, #6a84ff, #787fff, #857bff, #9276ff, #a174fa, #b172f3, #c171e9, #d071dd, #dd73cf, #e776c2, #f07ab7, #f57fad, #f984a6, #fb88a2, #fb8aa1, #fb8ba3, #fa8baa, #f88bb6, #f48cc4, #ed8dd5, #e38ee6, #d491f5, #c195ff, #ad9aff, #989bff, #839aff, #6e96ff, #5e90f3, #5086e3, #457ad0, #3c6cbb, #345da5, #2c4e8f, #26407a, #1f3265, #182653, #121c43, #0d1436, #090e2d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Blue, pink, lavender and navy linear gradient
- Seed: `kWrV6kU8bGuEySXXOrPFxbAo`
- Page: https://grabient.com/kWrV6kU8bGuEySXXOrPFxbAo?steps=48&angle=135
- Drawn as: linear gradient, 48 steps, 135 degrees
- Kinds: light center, vivid
- Hues: wide
- Contrast of its darkest and lightest colors: 8.4 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 | `#20a6d9` | `oklch(68.11% 0.1295 230.62)` | Malibu Blue | black, 7.5 to 1 |
| 2 | `#22a5dd` | `oklch(67.95% 0.1331 233.37)` | Vanadyl Blue | black, 7.4 to 1 |
| 3 | `#23a2e1` | `oklch(67.69% 0.1382 236.71)` | Vanadyl Blue | black, 7.3 to 1 |
| 4 | `#26a0e6` | `oklch(67.36% 0.1444 240.59)` | Button Blue | black, 7.2 to 1 |
| 5 | `#2d9ceb` | `oklch(66.98% 0.1514 244.94)` | Button Blue | black, 7 to 1 |
| 6 | `#3698f0` | `oklch(66.60% 0.1588 249.69)` | Karimun Blue | black, 6.9 to 1 |
| 7 | `#4294f6` | `oklch(66.22% 0.1664 254.79)` | Polar Glow | black, 6.7 to 1 |
| 8 | `#4e8efa` | `oklch(65.89% 0.1737 260.18)` | Skinny Jeans | black, 6.6 to 1 |
| 9 | `#5c89fe` | `oklch(65.62% 0.1803 265.78)` | Skinny Jeans | black, 6.4 to 1 |
| 10 | `#6a84ff` | `oklch(65.46% 0.1836 271.54)` | Deep Denim | black, 6.3 to 1 |
| 11 | `#787fff` | `oklch(65.42% 0.1863 277.40)` | Orchid | black, 6.2 to 1 |
| 12 | `#857bff` | `oklch(65.54% 0.1901 283.29)` | Blue Party Parrot | black, 6.2 to 1 |
| 13 | `#9276ff` | `oklch(65.85% 0.1943 289.20)` | Forgotten Purple | black, 6.2 to 1 |
| 14 | `#a174fa` | `oklch(66.42% 0.1930 296.17)` | Purple Illusionist | black, 6.3 to 1 |
| 15 | `#b172f3` | `oklch(67.24% 0.1899 304.32)` | Queer Purple | black, 6.5 to 1 |
| 16 | `#c171e9` | `oklch(68.26% 0.1852 313.28)` | Illicit Purple | black, 6.7 to 1 |
| 17 | `#d071dd` | `oklch(69.41% 0.1795 322.66)` | Jewel Caterpillar | black, 7 to 1 |
| 18 | `#dd73cf` | `oklch(70.63% 0.1729 332.08)` | Pink Orchid | black, 7.4 to 1 |
| 19 | `#e776c2` | `oklch(71.87% 0.1660 341.16)` | Explicit Pink | black, 7.7 to 1 |
| 20 | `#f07ab7` | `oklch(73.07% 0.1591 349.52)` | Persian Pink | black, 8.1 to 1 |
| 21 | `#f57fad` | `oklch(74.17% 0.1525 356.78)` | Brown Knapweed | black, 8.5 to 1 |
| 22 | `#f984a6` | `oklch(75.10% 0.1467 2.55)` | Pinky | black, 8.8 to 1 |
| 23 | `#fb88a2` | `oklch(75.83% 0.1420 6.46)` | Rosa | black, 9.1 to 1 |
| 24 | `#fb8aa1` | `oklch(76.28% 0.1387 8.13)` | Bunny Fluff | black, 9.2 to 1 |
| 25 | `#fb8ba3` | `oklch(76.44% 0.1373 7.11)` | Bunny Fluff | black, 9.3 to 1 |
| 26 | `#fa8baa` | `oklch(76.57% 0.1378 3.02)` | Rock’n’Rose | black, 9.3 to 1 |
| 27 | `#f88bb6` | `oklch(76.68% 0.1397 356.31)` | Tickle Me Pink | black, 9.3 to 1 |
| 28 | `#f48cc4` | `oklch(76.72% 0.1427 347.50)` | Bubblegum Beam | black, 9.3 to 1 |
| 29 | `#ed8dd5` | `oklch(76.64% 0.1465 337.15)` | Bubblegum Kisses | black, 9.3 to 1 |
| 30 | `#e38ee6` | `oklch(76.40% 0.1506 325.78)` | Bright Lilac | black, 9.2 to 1 |
| 31 | `#d491f5` | `oklch(75.95% 0.1547 313.95)` | Bright Lilac | black, 9.1 to 1 |
| 32 | `#c195ff` | `oklch(75.26% 0.1538 302.19)` | Liliac | black, 9 to 1 |
| 33 | `#ad9aff` | `oklch(74.27% 0.1439 291.03)` | Cobalite | black, 8.8 to 1 |
| 34 | `#989bff` | `oklch(72.95% 0.1434 281.02)` | Cobalite | black, 8.4 to 1 |
| 35 | `#839aff` | `oklch(71.24% 0.1497 272.70)` | Periwinkle Blue | black, 8 to 1 |
| 36 | `#6e96ff` | `oklch(69.11% 0.1614 266.61)` | Blue Chaos | black, 7.4 to 1 |
| 37 | `#5e90f3` | `oklch(66.38% 0.1581 262.87)` | Guilliman Blue | black, 6.7 to 1 |
| 38 | `#5086e3` | `oklch(62.82% 0.1521 260.63)` | Blue Jay | black, 5.8 to 1 |
| 39 | `#457ad0` | `oklch(58.57% 0.1443 259.64)` | Serenity’s Reign | black, 4.9 to 1 |
| 40 | `#3c6cbb` | `oklch(53.82% 0.1352 259.69)` | Matt Blue | white, 5.1 to 1 |
| 41 | `#345da5` | `oklch(48.73% 0.1251 260.56)` | Nebulas Blue | white, 6.4 to 1 |
| 42 | `#2c4e8f` | `oklch(43.47% 0.1144 262.04)` | Nightly Activities | white, 8 to 1 |
| 43 | `#26407a` | `oklch(38.23% 0.1036 263.92)` | Mazarine Blue | white, 10 to 1 |
| 44 | `#1f3265` | `oklch(33.16% 0.0931 265.99)` | Passionate Blue | white, 12.3 to 1 |
| 45 | `#182653` | `oklch(28.44% 0.0833 268.03)` | Space Cadet | white, 14.5 to 1 |
| 46 | `#121c43` | `oklch(24.25% 0.0746 269.82)` | Konkikyō Blue | white, 16.5 to 1 |
| 47 | `#0d1436` | `oklch(20.75% 0.0673 271.16)` | Liberty Blue | white, 17.9 to 1 |
| 48 | `#090e2d` | `oklch(18.11% 0.0620 271.84)` | Squid’s Ink | white, 18.8 to 1 |

## CSS

```css
background: linear-gradient(135deg, #20a6d9 0.0%, #22a5dd 2.1%, #23a2e1 4.3%, #26a0e6 6.4%, #2d9ceb 8.5%, #3698f0 10.6%, #4294f6 12.8%, #4e8efa 14.9%, #5c89fe 17.0%, #6a84ff 19.1%, #787fff 21.3%, #857bff 23.4%, #9276ff 25.5%, #a174fa 27.7%, #b172f3 29.8%, #c171e9 31.9%, #d071dd 34.0%, #dd73cf 36.2%, #e776c2 38.3%, #f07ab7 40.4%, #f57fad 42.6%, #f984a6 44.7%, #fb88a2 46.8%, #fb8aa1 48.9%, #fb8ba3 51.1%, #fa8baa 53.2%, #f88bb6 55.3%, #f48cc4 57.4%, #ed8dd5 59.6%, #e38ee6 61.7%, #d491f5 63.8%, #c195ff 66.0%, #ad9aff 68.1%, #989bff 70.2%, #839aff 72.3%, #6e96ff 74.5%, #5e90f3 76.6%, #5086e3 78.7%, #457ad0 80.9%, #3c6cbb 83.0%, #345da5 85.1%, #2c4e8f 87.2%, #26407a 89.4%, #1f3265 91.5%, #182653 93.6%, #121c43 95.7%, #0d1436 97.9%, #090e2d 100.0%);
background: linear-gradient(135deg in oklch, oklch(68.11% 0.1295 230.62) 0.0%, oklch(67.95% 0.1331 233.37) 2.1%, oklch(67.69% 0.1382 236.71) 4.3%, oklch(67.36% 0.1444 240.59) 6.4%, oklch(66.98% 0.1514 244.94) 8.5%, oklch(66.60% 0.1588 249.69) 10.6%, oklch(66.22% 0.1664 254.79) 12.8%, oklch(65.89% 0.1737 260.18) 14.9%, oklch(65.62% 0.1803 265.78) 17.0%, oklch(65.46% 0.1836 271.54) 19.1%, oklch(65.42% 0.1863 277.40) 21.3%, oklch(65.54% 0.1901 283.29) 23.4%, oklch(65.85% 0.1943 289.20) 25.5%, oklch(66.42% 0.1930 296.17) 27.7%, oklch(67.24% 0.1899 304.32) 29.8%, oklch(68.26% 0.1852 313.28) 31.9%, oklch(69.41% 0.1795 322.66) 34.0%, oklch(70.63% 0.1729 332.08) 36.2%, oklch(71.87% 0.1660 341.16) 38.3%, oklch(73.07% 0.1591 349.52) 40.4%, oklch(74.17% 0.1525 356.78) 42.6%, oklch(75.10% 0.1467 2.55) 44.7%, oklch(75.83% 0.1420 6.46) 46.8%, oklch(76.28% 0.1387 8.13) 48.9%, oklch(76.44% 0.1373 7.11) 51.1%, oklch(76.57% 0.1378 3.02) 53.2%, oklch(76.68% 0.1397 356.31) 55.3%, oklch(76.72% 0.1427 347.50) 57.4%, oklch(76.64% 0.1465 337.15) 59.6%, oklch(76.40% 0.1506 325.78) 61.7%, oklch(75.95% 0.1547 313.95) 63.8%, oklch(75.26% 0.1538 302.19) 66.0%, oklch(74.27% 0.1439 291.03) 68.1%, oklch(72.95% 0.1434 281.02) 70.2%, oklch(71.24% 0.1497 272.70) 72.3%, oklch(69.11% 0.1614 266.61) 74.5%, oklch(66.38% 0.1581 262.87) 76.6%, oklch(62.82% 0.1521 260.63) 78.7%, oklch(58.57% 0.1443 259.64) 80.9%, oklch(53.82% 0.1352 259.69) 83.0%, oklch(48.73% 0.1251 260.56) 85.1%, oklch(43.47% 0.1144 262.04) 87.2%, oklch(38.23% 0.1036 263.92) 89.4%, oklch(33.16% 0.0931 265.99) 91.5%, oklch(28.44% 0.0833 268.03) 93.6%, oklch(24.25% 0.0746 269.82) 95.7%, oklch(20.75% 0.0673 271.16) 97.9%, oklch(18.11% 0.0620 271.84) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.681 | 0.13 | 230.6 |
| 2 | 0.657 | 0.194 | 287.7 |
| 3 | 0.764 | 0.138 | 368 |
| 4 | 0.685 | 0.161 | 265.5 |
| 5 | 0.181 | 0.062 | 271.8 |

## In these collections

- [Vaporwave gradients](https://grabient.com/vaporwave-gradients)

## Other forms

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