# Blue and pale lilac color palette

The Blue and pale lilac color palette brings together blue, teal, purple, light magenta, and off-white. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits album artwork and music event graphics. Its darkest tone is blue, and its lightest tone is off-white.

- Also called: Navy, blue, purple and pink linear gradient
- Seed: `kcUTfDN6c-EymvFdJz2yLVH0k9QxZNMUfIS-4`
- Page: https://grabient.com/kcUTfDN6c-EymvFdJz2yLVH0k9QxZNMUfIS-4?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Hues: wide
- Contrast of its darkest and lightest colors: 12.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 | `#272e59` | `oklch(31.89% 0.0758 274.22)` | Deep Sea Base | white, 12.9 to 1 |
| 2 | `#293361` | `oklch(33.66% 0.0815 272.00)` | Galaxea | white, 12 to 1 |
| 3 | `#2a3a6c` | `oklch(36.16% 0.0898 268.96)` | Spirit Blue | white, 10.9 to 1 |
| 4 | `#2b427a` | `oklch(39.12% 0.0986 265.13)` | Sodalite Blue | white, 9.6 to 1 |
| 5 | `#2a4c87` | `oklch(42.32% 0.1056 260.55)` | Night Mode | white, 8.4 to 1 |
| 6 | `#285892` | `oklch(45.63% 0.1089 255.05)` | Blue Regent | white, 7.2 to 1 |
| 7 | `#25659c` | `oklch(49.36% 0.1093 248.11)` | Distant Blue | white, 6.1 to 1 |
| 8 | `#2274a5` | `oklch(53.31% 0.1082 240.51)` | Quarterdeck | white, 5.1 to 1 |
| 9 | `#2382ac` | `oklch(57.19% 0.1067 233.14)` | Blue Paisley | black, 4.8 to 1 |
| 10 | `#268eb3` | `oklch(60.72% 0.1061 226.89)` | Carol | black, 5.6 to 1 |
| 11 | `#2c9cba` | `oklch(64.56% 0.1053 219.87)` | Sailfish | black, 6.5 to 1 |
| 12 | `#37abc0` | `oklch(68.51% 0.1043 212.60)` | Explore Blue | black, 7.7 to 1 |
| 13 | `#41b6c5` | `oklch(71.69% 0.1043 207.62)` | Glassmith | black, 8.7 to 1 |
| 14 | `#43bbcb` | `oklch(73.22% 0.1063 207.49)` | Water Sports | black, 9.2 to 1 |
| 15 | `#3ab6d0` | `oklch(72.10% 0.1118 215.02)` | Ocean Sigh | black, 8.8 to 1 |
| 16 | `#33a6d5` | `oklch(68.34% 0.1205 230.09)` | Modal | black, 7.5 to 1 |
| 17 | `#418fd6` | `oklch(63.47% 0.1306 248.49)` | Magical Merlin | black, 6.1 to 1 |
| 18 | `#5679d0` | `oklch(59.07% 0.1404 265.88)` | Serenity’s Reign | black, 5 to 1 |
| 19 | `#646acb` | `oklch(56.62% 0.1480 278.08)` | C64 Purple | white, 4.7 to 1 |
| 20 | `#6d61c9` | `oklch(55.63% 0.1550 285.38)` | Dark Periwinkle | white, 4.9 to 1 |
| 21 | `#755dc9` | `oklch(55.50% 0.1614 290.25)` | Fuchsia Blue | white, 5 to 1 |
| 22 | `#7d5bca` | `oklch(56.10% 0.1661 294.67)` | Fuchsia Blue | white, 4.9 to 1 |
| 23 | `#8a5bca` | `oklch(57.27% 0.1681 300.61)` | Morado Purple | white, 4.7 to 1 |
| 24 | `#9b5bc6` | `oklch(58.92% 0.1681 309.80)` | Trunks Hair | black, 4.7 to 1 |
| 25 | `#b05cbf` | `oklch(61.12% 0.1671 321.31)` | Prickly Purple | black, 5.1 to 1 |
| 26 | `#c461b6` | `oklch(63.98% 0.1629 332.78)` | Mazzy Star | black, 5.7 to 1 |
| 27 | `#d56db2` | `oklch(67.61% 0.1534 341.84)` | Purple Hollyhock | black, 6.6 to 1 |
| 28 | `#e281b7` | `oklch(72.30% 0.1356 346.21)` | Fuchsia Blush | black, 8 to 1 |
| 29 | `#ec9fc9` | `oklch(78.94% 0.1054 345.83)` | Be My Valentine | black, 10.3 to 1 |
| 30 | `#f4c1df` | `oklch(86.45% 0.0692 342.71)` | Rosy Nectar | black, 13.5 to 1 |
| 31 | `#fae0f1` | `oklch(93.31% 0.0355 338.93)` | Pale Blossom | black, 17 to 1 |
| 32 | `#fef6fc` | `oklch(98.03% 0.0124 336.57)` | Cold Snow | black, 19.7 to 1 |

## CSS

```css
background: linear-gradient(135deg, #272e59 0.0%, #293361 3.2%, #2a3a6c 6.5%, #2b427a 9.7%, #2a4c87 12.9%, #285892 16.1%, #25659c 19.4%, #2274a5 22.6%, #2382ac 25.8%, #268eb3 29.0%, #2c9cba 32.3%, #37abc0 35.5%, #41b6c5 38.7%, #43bbcb 41.9%, #3ab6d0 45.2%, #33a6d5 48.4%, #418fd6 51.6%, #5679d0 54.8%, #646acb 58.1%, #6d61c9 61.3%, #755dc9 64.5%, #7d5bca 67.7%, #8a5bca 71.0%, #9b5bc6 74.2%, #b05cbf 77.4%, #c461b6 80.6%, #d56db2 83.9%, #e281b7 87.1%, #ec9fc9 90.3%, #f4c1df 93.5%, #fae0f1 96.8%, #fef6fc 100.0%);
background: linear-gradient(135deg in oklch, oklch(31.89% 0.0758 274.22) 0.0%, oklch(33.66% 0.0815 272.00) 3.2%, oklch(36.16% 0.0898 268.96) 6.5%, oklch(39.12% 0.0986 265.13) 9.7%, oklch(42.32% 0.1056 260.55) 12.9%, oklch(45.63% 0.1089 255.05) 16.1%, oklch(49.36% 0.1093 248.11) 19.4%, oklch(53.31% 0.1082 240.51) 22.6%, oklch(57.19% 0.1067 233.14) 25.8%, oklch(60.72% 0.1061 226.89) 29.0%, oklch(64.56% 0.1053 219.87) 32.3%, oklch(68.51% 0.1043 212.60) 35.5%, oklch(71.69% 0.1043 207.62) 38.7%, oklch(73.22% 0.1063 207.49) 41.9%, oklch(72.10% 0.1118 215.02) 45.2%, oklch(68.34% 0.1205 230.09) 48.4%, oklch(63.47% 0.1306 248.49) 51.6%, oklch(59.07% 0.1404 265.88) 54.8%, oklch(56.62% 0.1480 278.08) 58.1%, oklch(55.63% 0.1550 285.38) 61.3%, oklch(55.50% 0.1614 290.25) 64.5%, oklch(56.10% 0.1661 294.67) 67.7%, oklch(57.27% 0.1681 300.61) 71.0%, oklch(58.92% 0.1681 309.80) 74.2%, oklch(61.12% 0.1671 321.31) 77.4%, oklch(63.98% 0.1629 332.78) 80.6%, oklch(67.61% 0.1534 341.84) 83.9%, oklch(72.30% 0.1356 346.21) 87.1%, oklch(78.94% 0.1054 345.83) 90.3%, oklch(86.45% 0.0692 342.71) 93.5%, oklch(93.31% 0.0355 338.93) 96.8%, oklch(98.03% 0.0124 336.57) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.319 | 0.076 | 274.2 |
| 2 | 0.437 | 0.107 | 258.4 |
| 3 | 0.602 | 0.106 | 227.7 |
| 4 | 0.732 | 0.107 | 208.7 |
| 5 | 0.571 | 0.146 | 275.3 |
| 6 | 0.575 | 0.168 | 301.7 |
| 7 | 0.701 | 0.145 | 345 |
| 8 | 0.98 | 0.012 | 336.6 |

## In these collections

- [Holographic gradients](https://grabient.com/holographic-gradients)
- [Vaporwave gradients](https://grabient.com/vaporwave-gradients)
- [Vaporwave color palette](https://grabient.com/vaporwave-color-palette)

## Other forms

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