# Violet blue and purple palette

The Violet blue and purple palette brings together blue and purple. The colors span a narrow lightness range, combining strong color with gentle contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is purple, and its lightest tone is blue.

- Also called: Seamless vivid blue and purple angular gradient
- Seed: `kYjoG5xkRA0PEwfBwsFQ0O9kbAvk`
- Page: https://grabient.com/kYjoG5xkRA0PEwfBwsFQ0O9kbAvk?style=angularGradient&steps=32&angle=225
- Drawn as: angular gradient, 32 steps, 225 degrees
- Kinds: even lightness, vivid, cool, seamless
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.2 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 | `#316eda` | `oklch(55.91% 0.1778 260.86)` | Enchanting Sapphire | white, 4.7 to 1 |
| 2 | `#336ddb` | `oklch(55.84% 0.1789 261.53)` | Enchanting Sapphire | white, 4.8 to 1 |
| 3 | `#356cdc` | `oklch(55.75% 0.1804 262.36)` | Enchanting Sapphire | white, 4.8 to 1 |
| 4 | `#386bdc` | `oklch(55.65% 0.1823 263.39)` | Royal Blue | white, 4.8 to 1 |
| 5 | `#3b69dd` | `oklch(55.52% 0.1842 264.63)` | Royal Blue | white, 4.9 to 1 |
| 6 | `#3f68de` | `oklch(55.36% 0.1859 266.11)` | Royal Blue | white, 4.9 to 1 |
| 7 | `#4465de` | `oklch(55.16% 0.1872 267.87)` | Royal Blue | white, 5 to 1 |
| 8 | `#4963dd` | `oklch(54.92% 0.1880 270.01)` | Arcane Brew | white, 5.1 to 1 |
| 9 | `#4f60dc` | `oklch(54.62% 0.1886 272.63)` | Arcane Brew | white, 5.1 to 1 |
| 10 | `#555dda` | `oklch(54.29% 0.1890 275.54)` | Arcane Brew | white, 5.2 to 1 |
| 11 | `#5b59d8` | `oklch(53.94% 0.1891 278.57)` | Majorelle Blue | white, 5.4 to 1 |
| 12 | `#6056d6` | `oklch(53.59% 0.1891 281.52)` | Majorelle Blue | white, 5.5 to 1 |
| 13 | `#6553d3` | `oklch(53.27% 0.1889 284.20)` | Majorelle Blue | white, 5.6 to 1 |
| 14 | `#6951d1` | `oklch(52.97% 0.1885 286.63)` | Waiporoporo Purple | white, 5.7 to 1 |
| 15 | `#6c4ecd` | `oklch(52.65% 0.1876 289.32)` | Waiporoporo Purple | white, 5.7 to 1 |
| 16 | `#704cca` | `oklch(52.32% 0.1865 292.03)` | Waiporoporo Purple | white, 5.8 to 1 |
| 17 | `#7349c6` | `oklch(52.02% 0.1853 294.43)` | Purple Rain | white, 5.9 to 1 |
| 18 | `#7548c4` | `oklch(51.78% 0.1843 296.17)` | Purple Rain | white, 6 to 1 |
| 19 | `#7647c2` | `oklch(51.62% 0.1835 296.94)` | Purple Rain | white, 6 to 1 |
| 20 | `#7547c2` | `oklch(51.57% 0.1832 296.38)` | Purple Rain | white, 6.1 to 1 |
| 21 | `#7249c4` | `oklch(51.62% 0.1835 294.28)` | Purple Rain | white, 6 to 1 |
| 22 | `#6d4bc7` | `oklch(51.76% 0.1842 291.03)` | Waiporoporo Purple | white, 6 to 1 |
| 23 | `#674ecb` | `oklch(51.96% 0.1851 287.12)` | Waiporoporo Purple | white, 5.9 to 1 |
| 24 | `#6052cf` | `oklch(52.22% 0.1858 283.02)` | Iris | white, 5.8 to 1 |
| 25 | `#5955d2` | `oklch(52.51% 0.1861 279.22)` | Iris | white, 5.7 to 1 |
| 26 | `#5358d4` | `oklch(52.82% 0.1859 276.16)` | Warm Blue | white, 5.6 to 1 |
| 27 | `#4e5cd5` | `oklch(53.23% 0.1850 273.45)` | Savoy Blue | white, 5.5 to 1 |
| 28 | `#495fd6` | `oklch(53.73% 0.1836 270.81)` | Savoy Blue | white, 5.3 to 1 |
| 29 | `#4463d8` | `oklch(54.26% 0.1819 268.35)` | Monarchist | white, 5.2 to 1 |
| 30 | `#3f67d8` | `oklch(54.77% 0.1802 266.16)` | Royal Blue | white, 5 to 1 |
| 31 | `#3b69d9` | `oklch(55.21% 0.1787 264.34)` | Royal Blue | white, 4.9 to 1 |
| 32 | `#386bd9` | `oklch(55.51% 0.1778 262.97)` | Enchanting Sapphire | white, 4.8 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #316eda 0.0%, #336ddb 3.2%, #356cdc 6.5%, #386bdc 9.7%, #3b69dd 12.9%, #3f68de 16.1%, #4465de 19.4%, #4963dd 22.6%, #4f60dc 25.8%, #555dda 29.0%, #5b59d8 32.3%, #6056d6 35.5%, #6553d3 38.7%, #6951d1 41.9%, #6c4ecd 45.2%, #704cca 48.4%, #7349c6 51.6%, #7548c4 54.8%, #7647c2 58.1%, #7547c2 61.3%, #7249c4 64.5%, #6d4bc7 67.7%, #674ecb 71.0%, #6052cf 74.2%, #5955d2 77.4%, #5358d4 80.6%, #4e5cd5 83.9%, #495fd6 87.1%, #4463d8 90.3%, #3f67d8 93.5%, #3b69d9 96.8%, #386bd9 100.0%);
background: conic-gradient(from 225deg in oklch, oklch(55.91% 0.1778 260.86) 0.0%, oklch(55.84% 0.1789 261.53) 3.2%, oklch(55.75% 0.1804 262.36) 6.5%, oklch(55.65% 0.1823 263.39) 9.7%, oklch(55.52% 0.1842 264.63) 12.9%, oklch(55.36% 0.1859 266.11) 16.1%, oklch(55.16% 0.1872 267.87) 19.4%, oklch(54.92% 0.1880 270.01) 22.6%, oklch(54.62% 0.1886 272.63) 25.8%, oklch(54.29% 0.1890 275.54) 29.0%, oklch(53.94% 0.1891 278.57) 32.3%, oklch(53.59% 0.1891 281.52) 35.5%, oklch(53.27% 0.1889 284.20) 38.7%, oklch(52.97% 0.1885 286.63) 41.9%, oklch(52.65% 0.1876 289.32) 45.2%, oklch(52.32% 0.1865 292.03) 48.4%, oklch(52.02% 0.1853 294.43) 51.6%, oklch(51.78% 0.1843 296.17) 54.8%, oklch(51.62% 0.1835 296.94) 58.1%, oklch(51.57% 0.1832 296.38) 61.3%, oklch(51.62% 0.1835 294.28) 64.5%, oklch(51.76% 0.1842 291.03) 67.7%, oklch(51.96% 0.1851 287.12) 71.0%, oklch(52.22% 0.1858 283.02) 74.2%, oklch(52.51% 0.1861 279.22) 77.4%, oklch(52.82% 0.1859 276.16) 80.6%, oklch(53.23% 0.1850 273.45) 83.9%, oklch(53.73% 0.1836 270.81) 87.1%, oklch(54.26% 0.1819 268.35) 90.3%, oklch(54.77% 0.1802 266.16) 93.5%, oklch(55.21% 0.1787 264.34) 96.8%, oklch(55.51% 0.1778 262.97) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.559 | 0.178 | 260.9 |
| 2 | 0.551 | 0.187 | 268.3 |
| 3 | 0.531 | 0.189 | 285.2 |
| 4 | 0.516 | 0.183 | 296.8 |
| 5 | 0.528 | 0.186 | 276.7 |
| 6 | 0.555 | 0.178 | 263 |

## In these collections

- [Blue and purple gradients](https://grabient.com/blue-and-purple-gradients)

## Other forms

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