# Near-black, indigo and lilac color palette

The Near-black, indigo and lilac color palette brings together dark gray, blue, and magenta. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits website sections and interface mockups. Its darkest tone is dark gray, and its lightest tone is magenta.

- Also called: Analogous black, blue and purple linear gradient
- Seed: `kULA_aN7C9VS_wJcU0PA`
- Page: https://grabient.com/kULA_aN7C9VS_wJcU0PA?steps=21&angle=0
- Drawn as: linear gradient, 21 steps, 0 degrees
- Kinds: dark to light
- Hues: analogous
- Contrast of its darkest and lightest colors: 7 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 | `#120e17` | `oklch(17.32% 0.0207 306.56)` | Nyctophobia | white, 19 to 1 |
| 2 | `#191222` | `oklch(19.88% 0.0322 304.17)` | Back in Black | white, 18.2 to 1 |
| 3 | `#221831` | `oklch(23.41% 0.0485 300.67)` | Blacklist | white, 16.9 to 1 |
| 4 | `#2c1f45` | `oklch(27.59% 0.0678 296.56)` | Midnight Velvet | white, 15 to 1 |
| 5 | `#35285c` | `oklch(32.14% 0.0882 292.33)` | Paris M | white, 13 to 1 |
| 6 | `#3e3273` | `oklch(36.74% 0.1078 288.51)` | Her Highness | white, 10.9 to 1 |
| 7 | `#473c8a` | `oklch(41.09% 0.1248 285.58)` | Nauseous Blue | white, 9.1 to 1 |
| 8 | `#4e469d` | `oklch(44.94% 0.1373 283.98)` | Liberty | white, 7.8 to 1 |
| 9 | `#5750ae` | `oklch(48.77% 0.1463 283.23)` | Brandywine Raspberry | white, 6.6 to 1 |
| 10 | `#615abf` | `oklch(52.63% 0.1529 283.09)` | Circumorbital Ring | white, 5.6 to 1 |
| 11 | `#6c64ce` | `oklch(56.40% 0.1580 283.58)` | Dark Periwinkle | white, 4.8 to 1 |
| 12 | `#786edc` | `oklch(59.94% 0.1625 284.68)` | C64 Purple | black, 5 to 1 |
| 13 | `#8475e8` | `oklch(63.11% 0.1671 286.40)` | Hera Blue | black, 5.7 to 1 |
| 14 | `#907bf3` | `oklch(65.78% 0.1727 288.74)` | Forgotten Purple | black, 6.3 to 1 |
| 15 | `#9c7efc` | `oklch(67.84% 0.1801 291.97)` | Forgotten Purple | black, 6.8 to 1 |
| 16 | `#a97fff` | `oklch(69.34% 0.1839 296.68)` | Purple Illusionist | black, 7.1 to 1 |
| 17 | `#b77dff` | `oklch(70.40% 0.1883 302.35)` | Illicit Purple | black, 7.4 to 1 |
| 18 | `#c579ff` | `oklch(71.13% 0.1989 308.37)` | Rosy Fluffy Bedspread | black, 7.5 to 1 |
| 19 | `#d371ff` | `oklch(71.64% 0.2149 314.13)` | Rosy Fluffy Bedspread | black, 7.5 to 1 |
| 20 | `#de6cfb` | `oklch(72.04% 0.2235 319.01)` | Venus Slipper Orchid | black, 7.6 to 1 |
| 21 | `#e669f8` | `oklch(72.44% 0.2287 322.41)` | Hitsujiyama Pink | black, 7.7 to 1 |

## CSS

```css
background: linear-gradient(0deg, #120e17 0.0%, #191222 5.0%, #221831 10.0%, #2c1f45 15.0%, #35285c 20.0%, #3e3273 25.0%, #473c8a 30.0%, #4e469d 35.0%, #5750ae 40.0%, #615abf 45.0%, #6c64ce 50.0%, #786edc 55.0%, #8475e8 60.0%, #907bf3 65.0%, #9c7efc 70.0%, #a97fff 75.0%, #b77dff 80.0%, #c579ff 85.0%, #d371ff 90.0%, #de6cfb 95.0%, #e669f8 100.0%);
background: linear-gradient(0deg in oklch, oklch(17.32% 0.0207 306.56) 0.0%, oklch(19.88% 0.0322 304.17) 5.0%, oklch(23.41% 0.0485 300.67) 10.0%, oklch(27.59% 0.0678 296.56) 15.0%, oklch(32.14% 0.0882 292.33) 20.0%, oklch(36.74% 0.1078 288.51) 25.0%, oklch(41.09% 0.1248 285.58) 30.0%, oklch(44.94% 0.1373 283.98) 35.0%, oklch(48.77% 0.1463 283.23) 40.0%, oklch(52.63% 0.1529 283.09) 45.0%, oklch(56.40% 0.1580 283.58) 50.0%, oklch(59.94% 0.1625 284.68) 55.0%, oklch(63.11% 0.1671 286.40) 60.0%, oklch(65.78% 0.1727 288.74) 65.0%, oklch(67.84% 0.1801 291.97) 70.0%, oklch(69.34% 0.1839 296.68) 75.0%, oklch(70.40% 0.1883 302.35) 80.0%, oklch(71.13% 0.1989 308.37) 85.0%, oklch(71.64% 0.2149 314.13) 90.0%, oklch(72.04% 0.2235 319.01) 95.0%, oklch(72.44% 0.2287 322.41) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.173 | 0.021 | 306.6 |
| 2 | 0.437 | 0.134 | 284.4 |
| 3 | 0.665 | 0.175 | 289.7 |
| 4 | 0.724 | 0.229 | 322.4 |

## In these collections

- [Purple gradients](https://grabient.com/purple-gradients)
- [Text gradients](https://grabient.com/text-gradients)

## Other forms

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