# Black to purple linear gradient

Black to purple linear gradient with 32 colors: #272e11, #252b12, #212713, #1d2213, #1a1c12, #181811, #17150f, #16120e, #150f0e, #130d0f, #110c11, #100b12, #100a15, #100a17, #11091a, #13091d, #140a20, #160c24, #180e27, #1b112b, #1e142f, #211733, #251b38, #281f3c, #2d2340, #312845, #352c4a, #3a324f, #403855, #453e5a, #4a445f, #4e4862. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaSSNWGgU-JSFrwVkD2nRO_SgTP61ED-g`
- Page: https://grabient.com/kaSSNWGgU-JSFrwVkD2nRO_SgTP61ED-g?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: muted, dark
- Hues: complementary
- Contrast of its darkest and lightest colors: 2.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 | `#272e11` | `oklch(28.74% 0.0482 120.94)` | Darkest Forest | white, 14 to 1 |
| 2 | `#252b12` | `oklch(27.60% 0.0432 120.94)` | Kuro Green | white, 14.6 to 1 |
| 3 | `#212713` | `oklch(25.96% 0.0358 122.16)` | Deep Slate Olive | white, 15.4 to 1 |
| 4 | `#1d2213` | `oklch(24.08% 0.0275 122.14)` | Black Mesa | white, 16.3 to 1 |
| 5 | `#1a1c12` | `oklch(22.24% 0.0198 118.43)` | Nightshade Berries | white, 17.1 to 1 |
| 6 | `#181811` | `oklch(20.68% 0.0144 108.56)` | Nightshade Berries | white, 17.8 to 1 |
| 7 | `#17150f` | `oklch(19.49% 0.0117 89.04)` | Darkness | white, 18.2 to 1 |
| 8 | `#16120e` | `oklch(18.44% 0.0105 59.94)` | Black Raspberry | white, 18.6 to 1 |
| 9 | `#150f0e` | `oklch(17.53% 0.0107 26.66)` | Nuln Oil | white, 18.9 to 1 |
| 10 | `#130d0f` | `oklch(16.80% 0.0120 354.67)` | Optophobia | white, 19.2 to 1 |
| 11 | `#110c11` | `oklch(16.27% 0.0142 329.44)` | Optophobia | white, 19.3 to 1 |
| 12 | `#100b12` | `oklch(15.96% 0.0177 314.88)` | Midnight Oil | white, 19.4 to 1 |
| 13 | `#100a15` | `oklch(15.84% 0.0231 307.71)` | Midnight Oil | white, 19.5 to 1 |
| 14 | `#100a17` | `oklch(15.91% 0.0297 305.31)` | Midnight Oil | white, 19.5 to 1 |
| 15 | `#11091a` | `oklch(16.17% 0.0363 305.28)` | Tristesse | white, 19.4 to 1 |
| 16 | `#13091d` | `oklch(16.63% 0.0419 305.24)` | Tristesse | white, 19.3 to 1 |
| 17 | `#140a20` | `oklch(17.29% 0.0458 303.39)` | Tristesse | white, 19.1 to 1 |
| 18 | `#160c24` | `oklch(18.19% 0.0486 301.83)` | Corbeau | white, 18.9 to 1 |
| 19 | `#180e27` | `oklch(19.29% 0.0507 300.83)` | Corbeau | white, 18.5 to 1 |
| 20 | `#1b112b` | `oklch(20.55% 0.0521 300.16)` | Midnight Monarch | white, 18 to 1 |
| 21 | `#1e142f` | `oklch(21.90% 0.0532 299.60)` | Blacklist | white, 17.5 to 1 |
| 22 | `#211733` | `oklch(23.31% 0.0540 298.95)` | Blacklist | white, 16.9 to 1 |
| 23 | `#251b38` | `oklch(24.84% 0.0543 298.41)` | Throat | white, 16.3 to 1 |
| 24 | `#281f3c` | `oklch(26.47% 0.0543 298.01)` | Throat | white, 15.5 to 1 |
| 25 | `#2d2340` | `oklch(28.19% 0.0538 297.68)` | Telopea | white, 14.7 to 1 |
| 26 | `#312845` | `oklch(29.98% 0.0531 297.37)` | Blackberry Black | white, 13.8 to 1 |
| 27 | `#352c4a` | `oklch(31.81% 0.0522 296.99)` | Obsidian Lava Black | white, 12.9 to 1 |
| 28 | `#3a324f` | `oklch(33.90% 0.0508 296.54)` | Astral Aura | white, 11.9 to 1 |
| 29 | `#403855` | `oklch(36.20% 0.0490 296.07)` | Maharaja | white, 10.9 to 1 |
| 30 | `#453e5a` | `oklch(38.44% 0.0470 295.61)` | Club Grey | white, 9.9 to 1 |
| 31 | `#4a445f` | `oklch(40.37% 0.0453 295.23)` | Purple Blanket | white, 9.2 to 1 |
| 32 | `#4e4862` | `oklch(41.73% 0.0441 294.95)` | Violet Shadow | white, 8.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #272e11 0.0%, #252b12 3.2%, #212713 6.5%, #1d2213 9.7%, #1a1c12 12.9%, #181811 16.1%, #17150f 19.4%, #16120e 22.6%, #150f0e 25.8%, #130d0f 29.0%, #110c11 32.3%, #100b12 35.5%, #100a15 38.7%, #100a17 41.9%, #11091a 45.2%, #13091d 48.4%, #140a20 51.6%, #160c24 54.8%, #180e27 58.1%, #1b112b 61.3%, #1e142f 64.5%, #211733 67.7%, #251b38 71.0%, #281f3c 74.2%, #2d2340 77.4%, #312845 80.6%, #352c4a 83.9%, #3a324f 87.1%, #403855 90.3%, #453e5a 93.5%, #4a445f 96.8%, #4e4862 100.0%);
background: linear-gradient(90deg in oklch, oklch(28.74% 0.0482 120.94) 0.0%, oklch(27.60% 0.0432 120.94) 3.2%, oklch(25.96% 0.0358 122.16) 6.5%, oklch(24.08% 0.0275 122.14) 9.7%, oklch(22.24% 0.0198 118.43) 12.9%, oklch(20.68% 0.0144 108.56) 16.1%, oklch(19.49% 0.0117 89.04) 19.4%, oklch(18.44% 0.0105 59.94) 22.6%, oklch(17.53% 0.0107 26.66) 25.8%, oklch(16.80% 0.0120 354.67) 29.0%, oklch(16.27% 0.0142 329.44) 32.3%, oklch(15.96% 0.0177 314.88) 35.5%, oklch(15.84% 0.0231 307.71) 38.7%, oklch(15.91% 0.0297 305.31) 41.9%, oklch(16.17% 0.0363 305.28) 45.2%, oklch(16.63% 0.0419 305.24) 48.4%, oklch(17.29% 0.0458 303.39) 51.6%, oklch(18.19% 0.0486 301.83) 54.8%, oklch(19.29% 0.0507 300.83) 58.1%, oklch(20.55% 0.0521 300.16) 61.3%, oklch(21.90% 0.0532 299.60) 64.5%, oklch(23.31% 0.0540 298.95) 67.7%, oklch(24.84% 0.0543 298.41) 71.0%, oklch(26.47% 0.0543 298.01) 74.2%, oklch(28.19% 0.0538 297.68) 77.4%, oklch(29.98% 0.0531 297.37) 80.6%, oklch(31.81% 0.0522 296.99) 83.9%, oklch(33.90% 0.0508 296.54) 87.1%, oklch(36.20% 0.0490 296.07) 90.3%, oklch(38.44% 0.0470 295.61) 93.5%, oklch(40.37% 0.0453 295.23) 96.8%, oklch(41.73% 0.0441 294.95) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.287 | 0.048 | 120.9 |
| 2 | 0.205 | 0.014 | 106.1 |
| 3 | 0.161 | 0.015 | -36.5 |
| 4 | 0.169 | 0.044 | -55.5 |
| 5 | 0.228 | 0.054 | -60.8 |
| 6 | 0.315 | 0.052 | -62.9 |
| 7 | 0.417 | 0.044 | -65.1 |

## In these collections

- [Charcoal plum tailoring](https://grabient.com/charcoal-plum-tailoring)
- [Dark muted gradients](https://grabient.com/dark-muted-gradients)

## Other forms

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