# Lilac plum teal twilight

Black, purple, gray and blue linear gradient with 40 colors: #18131c, #1c1520, #211726, #281a2c, #301d33, #391f3b, #432242, #4e2549, #592850, #652c56, #71305c, #7c3562, #863b69, #8f416f, #984977, #a15380, #aa5f8a, #b36c95, #bc7aa0, #c487ac, #cb95b7, #d0a2c1, #d5adca, #d8b7d2, #dabfd8, #dac4db, #d9c7dd, #d4c6dc, #ccc2d8, #c1bbd3, #b4b3cb, #a5a9c2, #949fb8, #8394ac, #728aa0, #618093, #527687, #446e7b, #3a6871, #32636a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Black, purple, gray and blue linear gradient
- Seed: `kUMg7cvqvEOwNPM7k7Kg`
- Page: https://grabient.com/kUMg7cvqvEOwNPM7k7Kg?steps=40&angle=45
- Drawn as: linear gradient, 40 steps, 45 degrees
- Kinds: light center, muted
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 11.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 | `#18131c` | `oklch(19.69% 0.0193 310.08)` | Back in Black | white, 18.2 to 1 |
| 2 | `#1c1520` | `oklch(20.97% 0.0242 311.83)` | Violet Void | white, 17.8 to 1 |
| 3 | `#211726` | `oklch(22.54% 0.0311 314.25)` | Inside | white, 17.2 to 1 |
| 4 | `#281a2c` | `oklch(24.35% 0.0394 317.19)` | Black Howl | white, 16.4 to 1 |
| 5 | `#301d33` | `oklch(26.39% 0.0489 320.53)` | Bleached Cedar | white, 15.6 to 1 |
| 6 | `#391f3b` | `oklch(28.60% 0.0591 324.12)` | Kokimurasaki Purple | white, 14.6 to 1 |
| 7 | `#432242` | `oklch(30.98% 0.0696 327.83)` | Purple Void | white, 13.5 to 1 |
| 8 | `#4e2549` | `oklch(33.47% 0.0800 331.54)` | Murasaki | white, 12.4 to 1 |
| 9 | `#592850` | `oklch(36.05% 0.0901 335.09)` | Kuwanomi Purple | white, 11.3 to 1 |
| 10 | `#652c56` | `oklch(38.70% 0.0992 338.37)` | Velvet Mauve | white, 10.2 to 1 |
| 11 | `#71305c` | `oklch(41.36% 0.1072 341.24)` | Grape | white, 9.2 to 1 |
| 12 | `#7c3562` | `oklch(44.03% 0.1136 343.55)` | Ayame Iris | white, 8.2 to 1 |
| 13 | `#863b69` | `oklch(46.65% 0.1179 345.19)` | Midnight Aubergine | white, 7.4 to 1 |
| 14 | `#8f416f` | `oklch(49.21% 0.1199 346.01)` | Purple Peril | white, 6.6 to 1 |
| 15 | `#984977` | `oklch(51.96% 0.1192 346.25)` | Orchid Lei | white, 5.8 to 1 |
| 16 | `#a15380` | `oklch(55.12% 0.1161 346.23)` | Feminism | white, 5.1 to 1 |
| 17 | `#aa5f8a` | `oklch(58.57% 0.1110 345.92)` | Wild Mulberry | black, 4.7 to 1 |
| 18 | `#b36c95` | `oklch(62.20% 0.1043 345.28)` | Je t’aime | black, 5.5 to 1 |
| 19 | `#bc7aa0` | `oklch(65.90% 0.0964 344.28)` | Valentine Heart | black, 6.4 to 1 |
| 20 | `#c487ac` | `oklch(69.57% 0.0876 342.90)` | Lavender Quartz | black, 7.4 to 1 |
| 21 | `#cb95b7` | `oklch(73.10% 0.0784 341.09)` | Morning Glory Pink | black, 8.4 to 1 |
| 22 | `#d0a2c1` | `oklch(76.36% 0.0691 338.82)` | Geranium Bud | black, 9.6 to 1 |
| 23 | `#d5adca` | `oklch(79.27% 0.0602 336.07)` | Queenly | black, 10.6 to 1 |
| 24 | `#d8b7d2` | `oklch(81.70% 0.0520 332.81)` | Immortal Indigo | black, 11.6 to 1 |
| 25 | `#dabfd8` | `oklch(83.54% 0.0450 328.99)` | Thistle | black, 12.4 to 1 |
| 26 | `#dac4db` | `oklch(84.69% 0.0395 324.60)` | Simply Lavender | black, 12.9 to 1 |
| 27 | `#d9c7dd` | `oklch(85.04% 0.0358 319.59)` | Euphoric Lilac | black, 13.1 to 1 |
| 28 | `#d4c6dc` | `oklch(84.42% 0.0339 313.47)` | On Location | black, 12.8 to 1 |
| 29 | `#ccc2d8` | `oklch(82.86% 0.0331 305.95)` | Awesome Aura | black, 12.2 to 1 |
| 30 | `#c1bbd3` | `oklch(80.50% 0.0334 297.29)` | Orchid House | black, 11.3 to 1 |
| 31 | `#b4b3cb` | `oklch(77.50% 0.0344 287.76)` | Soft Sky | black, 10.2 to 1 |
| 32 | `#a5a9c2` | `oklch(74.00% 0.0361 277.64)` | Wisteria Light Soft Blue | black, 9 to 1 |
| 33 | `#949fb8` | `oklch(70.18% 0.0383 267.19)` | Skyline | black, 7.8 to 1 |
| 34 | `#8394ac` | `oklch(66.17% 0.0408 256.69)` | Lilac Blue | black, 6.8 to 1 |
| 35 | `#728aa0` | `oklch(62.13% 0.0435 246.39)` | Hilo Bay | black, 5.8 to 1 |
| 36 | `#618093` | `oklch(58.21% 0.0462 236.59)` | Pier 17 Steel | black, 4.9 to 1 |
| 37 | `#527687` | `oklch(54.57% 0.0487 227.53)` | Russ Grey | white, 4.8 to 1 |
| 38 | `#446e7b` | `oklch(51.36% 0.0509 219.49)` | Holy Water | white, 5.5 to 1 |
| 39 | `#3a6871` | `oklch(48.74% 0.0527 212.75)` | Muddy Cyan | white, 6.1 to 1 |
| 40 | `#32636a` | `oklch(46.85% 0.0537 207.57)` | Deep Marine | white, 6.7 to 1 |

## CSS

```css
background: linear-gradient(45deg, #18131c 0.0%, #1c1520 2.6%, #211726 5.1%, #281a2c 7.7%, #301d33 10.3%, #391f3b 12.8%, #432242 15.4%, #4e2549 17.9%, #592850 20.5%, #652c56 23.1%, #71305c 25.6%, #7c3562 28.2%, #863b69 30.8%, #8f416f 33.3%, #984977 35.9%, #a15380 38.5%, #aa5f8a 41.0%, #b36c95 43.6%, #bc7aa0 46.2%, #c487ac 48.7%, #cb95b7 51.3%, #d0a2c1 53.8%, #d5adca 56.4%, #d8b7d2 59.0%, #dabfd8 61.5%, #dac4db 64.1%, #d9c7dd 66.7%, #d4c6dc 69.2%, #ccc2d8 71.8%, #c1bbd3 74.4%, #b4b3cb 76.9%, #a5a9c2 79.5%, #949fb8 82.1%, #8394ac 84.6%, #728aa0 87.2%, #618093 89.7%, #527687 92.3%, #446e7b 94.9%, #3a6871 97.4%, #32636a 100.0%);
background: linear-gradient(45deg in oklch, oklch(19.69% 0.0193 310.08) 0.0%, oklch(20.97% 0.0242 311.83) 2.6%, oklch(22.54% 0.0311 314.25) 5.1%, oklch(24.35% 0.0394 317.19) 7.7%, oklch(26.39% 0.0489 320.53) 10.3%, oklch(28.60% 0.0591 324.12) 12.8%, oklch(30.98% 0.0696 327.83) 15.4%, oklch(33.47% 0.0800 331.54) 17.9%, oklch(36.05% 0.0901 335.09) 20.5%, oklch(38.70% 0.0992 338.37) 23.1%, oklch(41.36% 0.1072 341.24) 25.6%, oklch(44.03% 0.1136 343.55) 28.2%, oklch(46.65% 0.1179 345.19) 30.8%, oklch(49.21% 0.1199 346.01) 33.3%, oklch(51.96% 0.1192 346.25) 35.9%, oklch(55.12% 0.1161 346.23) 38.5%, oklch(58.57% 0.1110 345.92) 41.0%, oklch(62.20% 0.1043 345.28) 43.6%, oklch(65.90% 0.0964 344.28) 46.2%, oklch(69.57% 0.0876 342.90) 48.7%, oklch(73.10% 0.0784 341.09) 51.3%, oklch(76.36% 0.0691 338.82) 53.8%, oklch(79.27% 0.0602 336.07) 56.4%, oklch(81.70% 0.0520 332.81) 59.0%, oklch(83.54% 0.0450 328.99) 61.5%, oklch(84.69% 0.0395 324.60) 64.1%, oklch(85.04% 0.0358 319.59) 66.7%, oklch(84.42% 0.0339 313.47) 69.2%, oklch(82.86% 0.0331 305.95) 71.8%, oklch(80.50% 0.0334 297.29) 74.4%, oklch(77.50% 0.0344 287.76) 76.9%, oklch(74.00% 0.0361 277.64) 79.5%, oklch(70.18% 0.0383 267.19) 82.1%, oklch(66.17% 0.0408 256.69) 84.6%, oklch(62.13% 0.0435 246.39) 87.2%, oklch(58.21% 0.0462 236.59) 89.7%, oklch(54.57% 0.0487 227.53) 92.3%, oklch(51.36% 0.0509 219.49) 94.9%, oklch(48.74% 0.0527 212.75) 97.4%, oklch(46.85% 0.0537 207.57) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.197 | 0.019 | 310.1 |
| 2 | 0.492 | 0.12 | 346 |
| 3 | 0.85 | 0.036 | 319.6 |
| 4 | 0.469 | 0.054 | 207.6 |

## In these collections

- [Plum noir](https://grabient.com/plum-noir)

## Other forms

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