# Blue and violet color palette

The Blue and violet color palette brings together dark blue, purple, and blue. The colors span a moderate lightness range, combining strong color with gentle contrast. Its balanced and composed character suits game interface concepts and stream graphics. Its darkest tone is dark blue, and its lightest tone is purple.

- Also called: Vivid analogous blue and purple linear gradient
- Seed: `kaTHbHLcdAL7cwLNV8Dx9u_jlUPyqQb8g`
- Page: https://grabient.com/kaTHbHLcdAL7cwLNV8Dx9u_jlUPyqQb8g?steps=32&angle=315
- Drawn as: linear gradient, 32 steps, 315 degrees
- Kinds: light center, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.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 | `#26107b` | `oklch(29.92% 0.1626 279.84)` | Outer Rim | white, 14.5 to 1 |
| 2 | `#28107f` | `oklch(30.58% 0.1665 280.06)` | Outer Rim | white, 14.2 to 1 |
| 3 | `#2a1084` | `oklch(31.43% 0.1718 280.31)` | Nightly Expedition | white, 13.9 to 1 |
| 4 | `#2d118a` | `oklch(32.52% 0.1783 280.66)` | Indiglow | white, 13.4 to 1 |
| 5 | `#311292` | `oklch(33.87% 0.1858 281.15)` | Full Swing Indigo | white, 12.8 to 1 |
| 6 | `#36139b` | `oklch(35.52% 0.1942 281.82)` | Violet Hickey | white, 12.1 to 1 |
| 7 | `#3d15a7` | `oklch(37.58% 0.2045 282.72)` | Indigo Blue | white, 11.2 to 1 |
| 8 | `#4517b5` | `oklch(40.10% 0.2177 283.81)` | Indigo Blue | white, 10.2 to 1 |
| 9 | `#4f1ac5` | `oklch(42.88% 0.2317 285.05)` | Violet Blue | white, 9.2 to 1 |
| 10 | `#591dd4` | `oklch(45.71% 0.2442 286.41)` | Nasu Purple | white, 8.2 to 1 |
| 11 | `#6323e1` | `oklch(48.39% 0.2531 287.82)` | Yíng Guāng Sè Purple | white, 7.3 to 1 |
| 12 | `#6d2bea` | `oklch(50.90% 0.2565 289.37)` | Almost Royal | white, 6.6 to 1 |
| 13 | `#7835f1` | `oklch(53.60% 0.2550 291.28)` | Bluish Purple | white, 5.8 to 1 |
| 14 | `#8340f6` | `oklch(56.24% 0.2506 293.28)` | Sweet Escape | white, 5.2 to 1 |
| 15 | `#8c49fa` | `oklch(58.53% 0.2455 295.08)` | Sweet Escape | white, 4.7 to 1 |
| 16 | `#934ffc` | `oklch(60.15% 0.2418 296.38)` | Irrigo Purple | black, 4.7 to 1 |
| 17 | `#9651fe` | `oklch(60.86% 0.2414 296.92)` | Irrigo Purple | black, 4.9 to 1 |
| 18 | `#9650ff` | `oklch(60.74% 0.2435 296.78)` | Irrigo Purple | black, 4.8 to 1 |
| 19 | `#934dfe` | `oklch(59.98% 0.2468 296.16)` | Irrigo Purple | black, 4.7 to 1 |
| 20 | `#8e48fd` | `oklch(58.78% 0.2501 295.25)` | Sweet Escape | white, 4.6 to 1 |
| 21 | `#8842fa` | `oklch(57.32% 0.2521 294.23)` | Sweet Escape | white, 4.9 to 1 |
| 22 | `#823ef5` | `oklch(55.76% 0.2518 293.26)` | Sweet Escape | white, 5.3 to 1 |
| 23 | `#7a38ef` | `oklch(53.87% 0.2498 292.17)` | Bluish Purple | white, 5.7 to 1 |
| 24 | `#7132e6` | `oklch(51.65% 0.2467 290.93)` | Bluish Purple | white, 6.3 to 1 |
| 25 | `#682cdd` | `oklch(49.25% 0.2424 289.62)` | Burple | white, 7 to 1 |
| 26 | `#5f26d3` | `oklch(46.82% 0.2369 288.30)` | Nasu Purple | white, 7.7 to 1 |
| 27 | `#5621c9` | `oklch(44.50% 0.2303 287.03)` | Blue Purple | white, 8.5 to 1 |
| 28 | `#4d1cbc` | `oklch(42.01% 0.2210 285.68)` | Blue Depression | white, 9.4 to 1 |
| 29 | `#4419af` | `oklch(39.35% 0.2097 284.26)` | Indigo Blue | white, 10.5 to 1 |
| 30 | `#3b16a1` | `oklch(36.80% 0.1979 282.89)` | Deep Daijin Blue | white, 11.5 to 1 |
| 31 | `#341495` | `oklch(34.62% 0.1876 281.73)` | Violet Hickey | white, 12.5 to 1 |
| 32 | `#2f128d` | `oklch(33.07% 0.1805 280.90)` | Indiglow | white, 13.1 to 1 |

## CSS

```css
background: linear-gradient(315deg, #26107b 0.0%, #28107f 3.2%, #2a1084 6.5%, #2d118a 9.7%, #311292 12.9%, #36139b 16.1%, #3d15a7 19.4%, #4517b5 22.6%, #4f1ac5 25.8%, #591dd4 29.0%, #6323e1 32.3%, #6d2bea 35.5%, #7835f1 38.7%, #8340f6 41.9%, #8c49fa 45.2%, #934ffc 48.4%, #9651fe 51.6%, #9650ff 54.8%, #934dfe 58.1%, #8e48fd 61.3%, #8842fa 64.5%, #823ef5 67.7%, #7a38ef 71.0%, #7132e6 74.2%, #682cdd 77.4%, #5f26d3 80.6%, #5621c9 83.9%, #4d1cbc 87.1%, #4419af 90.3%, #3b16a1 93.5%, #341495 96.8%, #2f128d 100.0%);
background: linear-gradient(315deg in oklch, oklch(29.92% 0.1626 279.84) 0.0%, oklch(30.58% 0.1665 280.06) 3.2%, oklch(31.43% 0.1718 280.31) 6.5%, oklch(32.52% 0.1783 280.66) 9.7%, oklch(33.87% 0.1858 281.15) 12.9%, oklch(35.52% 0.1942 281.82) 16.1%, oklch(37.58% 0.2045 282.72) 19.4%, oklch(40.10% 0.2177 283.81) 22.6%, oklch(42.88% 0.2317 285.05) 25.8%, oklch(45.71% 0.2442 286.41) 29.0%, oklch(48.39% 0.2531 287.82) 32.3%, oklch(50.90% 0.2565 289.37) 35.5%, oklch(53.60% 0.2550 291.28) 38.7%, oklch(56.24% 0.2506 293.28) 41.9%, oklch(58.53% 0.2455 295.08) 45.2%, oklch(60.15% 0.2418 296.38) 48.4%, oklch(60.86% 0.2414 296.92) 51.6%, oklch(60.74% 0.2435 296.78) 54.8%, oklch(59.98% 0.2468 296.16) 58.1%, oklch(58.78% 0.2501 295.25) 61.3%, oklch(57.32% 0.2521 294.23) 64.5%, oklch(55.76% 0.2518 293.26) 67.7%, oklch(53.87% 0.2498 292.17) 71.0%, oklch(51.65% 0.2467 290.93) 74.2%, oklch(49.25% 0.2424 289.62) 77.4%, oklch(46.82% 0.2369 288.30) 80.6%, oklch(44.50% 0.2303 287.03) 83.9%, oklch(42.01% 0.2210 285.68) 87.1%, oklch(39.35% 0.2097 284.26) 90.3%, oklch(36.80% 0.1979 282.89) 93.5%, oklch(34.62% 0.1876 281.73) 96.8%, oklch(33.07% 0.1805 280.90) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.299 | 0.163 | 279.8 |
| 2 | 0.358 | 0.196 | 282 |
| 3 | 0.492 | 0.255 | 288.3 |
| 4 | 0.606 | 0.241 | 296.8 |
| 5 | 0.563 | 0.252 | 293.6 |
| 6 | 0.449 | 0.231 | 287.2 |
| 7 | 0.331 | 0.181 | 280.9 |

## In these collections

- [Electric purple gradients](https://grabient.com/electric-purple-gradients)
- [Synthwave gradients](https://grabient.com/synthwave-gradients)
- [Cyberpunk gradients](https://grabient.com/cyberpunk-gradients)
- [Jewel tones](https://grabient.com/jewel-tones)

## Other forms

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