# Blue and violet indigo palette

The Blue and violet indigo palette brings together dark blue and purple. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its dark and grounded character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is purple.

- Also called: Analogous navy and purple radial gradient
- Seed: `kSMyTLvS9A6AZv0`
- Page: https://grabient.com/kSMyTLvS9A6AZv0?style=radialGradient&steps=32&angle=0
- Drawn as: radial gradient, 32 steps, 0 degrees
- Kinds: dark, cool
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 2.6 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 | `#15122b` | `oklch(20.08% 0.0496 286.17)` | Lost in Sadness | white, 18.2 to 1 |
| 2 | `#17142f` | `oklch(21.19% 0.0528 286.51)` | Lost in Sadness | white, 17.8 to 1 |
| 3 | `#1b1735` | `oklch(22.69% 0.0570 286.95)` | Lost in Sadness | white, 17.2 to 1 |
| 4 | `#1f1a3c` | `oklch(24.50% 0.0621 287.48)` | Prune Plum | white, 16.4 to 1 |
| 5 | `#241f44` | `oklch(26.56% 0.0680 288.09)` | Black Market | white, 15.5 to 1 |
| 6 | `#2a234d` | `oklch(28.82% 0.0744 288.76)` | Pāua | white, 14.5 to 1 |
| 7 | `#312857` | `oklch(31.20% 0.0811 289.46)` | Purple Noir | white, 13.3 to 1 |
| 8 | `#372d61` | `oklch(33.64% 0.0881 290.18)` | Galaxea | white, 12.2 to 1 |
| 9 | `#3e326b` | `oklch(36.09% 0.0950 290.91)` | Minsk | white, 11.1 to 1 |
| 10 | `#453775` | `oklch(38.47% 0.1018 291.62)` | Galactic Compass | white, 10.1 to 1 |
| 11 | `#4c3c7e` | `oklch(40.73% 0.1082 292.30)` | Sage Violet | white, 9.3 to 1 |
| 12 | `#534087` | `oklch(42.79% 0.1141 292.92)` | Harvest Night | white, 8.5 to 1 |
| 13 | `#58448f` | `oklch(44.60% 0.1193 293.48)` | Harvest Night | white, 7.9 to 1 |
| 14 | `#5d4796` | `oklch(46.10% 0.1237 293.95)` | Liberty | white, 7.4 to 1 |
| 15 | `#614a9b` | `oklch(47.21% 0.1269 294.31)` | Ultrapurple Merge | white, 7.1 to 1 |
| 16 | `#634b9d` | `oklch(47.88% 0.1290 294.56)` | Ultrapurple Merge | white, 6.9 to 1 |
| 17 | `#644b9e` | `oklch(48.05% 0.1297 294.66)` | Ultrapurple Merge | white, 6.8 to 1 |
| 18 | `#634b9d` | `oklch(47.73% 0.1290 294.63)` | Ultrapurple Merge | white, 6.9 to 1 |
| 19 | `#61499a` | `oklch(46.98% 0.1272 294.50)` | Ultrapurple Merge | white, 7.1 to 1 |
| 20 | `#5d4695` | `oklch(45.86% 0.1244 294.26)` | Sweet Flag | white, 7.5 to 1 |
| 21 | `#59438f` | `oklch(44.43% 0.1207 293.94)` | Daisy Bush | white, 8 to 1 |
| 22 | `#533f88` | `oklch(42.75% 0.1164 293.55)` | Harvest Night | white, 8.5 to 1 |
| 23 | `#4e3b80` | `oklch(40.88% 0.1115 293.11)` | Prism Violet | white, 9.2 to 1 |
| 24 | `#483778` | `oklch(38.88% 0.1062 292.64)` | Galactic Compass | white, 10 to 1 |
| 25 | `#42336f` | `oklch(36.80% 0.1008 292.14)` | Her Highness | white, 10.9 to 1 |
| 26 | `#3c2e67` | `oklch(34.71% 0.0953 291.63)` | Minsk | white, 11.8 to 1 |
| 27 | `#362a5e` | `oklch(32.66% 0.0899 291.14)` | Paris M | white, 12.7 to 1 |
| 28 | `#302657` | `oklch(30.72% 0.0848 290.67)` | Ceremonial Purple | white, 13.6 to 1 |
| 29 | `#2c2250` | `oklch(28.95% 0.0801 290.24)` | Pāua | white, 14.4 to 1 |
| 30 | `#281f49` | `oklch(27.39% 0.0760 289.86)` | Azulado | white, 15.1 to 1 |
| 31 | `#241c45` | `oklch(26.12% 0.0727 289.56)` | Azulado | white, 15.7 to 1 |
| 32 | `#221b41` | `oklch(25.20% 0.0703 289.34)` | Prune Plum | white, 16.1 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #15122b 0.0%, #17142f 3.2%, #1b1735 6.5%, #1f1a3c 9.7%, #241f44 12.9%, #2a234d 16.1%, #312857 19.4%, #372d61 22.6%, #3e326b 25.8%, #453775 29.0%, #4c3c7e 32.3%, #534087 35.5%, #58448f 38.7%, #5d4796 41.9%, #614a9b 45.2%, #634b9d 48.4%, #644b9e 51.6%, #634b9d 54.8%, #61499a 58.1%, #5d4695 61.3%, #59438f 64.5%, #533f88 67.7%, #4e3b80 71.0%, #483778 74.2%, #42336f 77.4%, #3c2e67 80.6%, #362a5e 83.9%, #302657 87.1%, #2c2250 90.3%, #281f49 93.5%, #241c45 96.8%, #221b41 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(20.08% 0.0496 286.17) 0.0%, oklch(21.19% 0.0528 286.51) 3.2%, oklch(22.69% 0.0570 286.95) 6.5%, oklch(24.50% 0.0621 287.48) 9.7%, oklch(26.56% 0.0680 288.09) 12.9%, oklch(28.82% 0.0744 288.76) 16.1%, oklch(31.20% 0.0811 289.46) 19.4%, oklch(33.64% 0.0881 290.18) 22.6%, oklch(36.09% 0.0950 290.91) 25.8%, oklch(38.47% 0.1018 291.62) 29.0%, oklch(40.73% 0.1082 292.30) 32.3%, oklch(42.79% 0.1141 292.92) 35.5%, oklch(44.60% 0.1193 293.48) 38.7%, oklch(46.10% 0.1237 293.95) 41.9%, oklch(47.21% 0.1269 294.31) 45.2%, oklch(47.88% 0.1290 294.56) 48.4%, oklch(48.05% 0.1297 294.66) 51.6%, oklch(47.73% 0.1290 294.63) 54.8%, oklch(46.98% 0.1272 294.50) 58.1%, oklch(45.86% 0.1244 294.26) 61.3%, oklch(44.43% 0.1207 293.94) 64.5%, oklch(42.75% 0.1164 293.55) 67.7%, oklch(40.88% 0.1115 293.11) 71.0%, oklch(38.88% 0.1062 292.64) 74.2%, oklch(36.80% 0.1008 292.14) 77.4%, oklch(34.71% 0.0953 291.63) 80.6%, oklch(32.66% 0.0899 291.14) 83.9%, oklch(30.72% 0.0848 290.67) 87.1%, oklch(28.95% 0.0801 290.24) 90.3%, oklch(27.39% 0.0760 289.86) 93.5%, oklch(26.12% 0.0727 289.56) 96.8%, oklch(25.20% 0.0703 289.34) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.201 | 0.05 | 286.2 |
| 2 | 0.48 | 0.13 | 294.6 |
| 3 | 0.252 | 0.07 | 289.3 |

## In these collections

- [Indigo gradients](https://grabient.com/indigo-gradients)

## Other forms

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