# Monochrome black to purple linear gradient

Monochrome black to purple linear gradient with 21 colors: #242425, #262427, #28252a, #2a272f, #2c2934, #2f2b39, #322d40, #363047, #3b334f, #403656, #45395d, #4b3d63, #50426a, #56476f, #5d4d74, #655277, #6f5779, #7a5e79, #836578, #8a6c78, #8e7178. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWQgLgpgm9q-WwC8F0DyY3GQ`
- Page: https://grabient.com/kWQgLgpgm9q-WwC8F0DyY3GQ?steps=21&angle=135
- Drawn as: linear gradient, 21 steps, 135 degrees
- Kinds: dark to light, muted, dark
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.5 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 | `#242425` | `oklch(25.98% 0.0028 315.70)` | Verified Black | white, 15.5 to 1 |
| 2 | `#262427` | `oklch(26.46% 0.0057 312.78)` | Darth Vader | white, 15.3 to 1 |
| 3 | `#28252a` | `oklch(27.11% 0.0098 308.45)` | Darth Vader | white, 15 to 1 |
| 4 | `#2a272f` | `oklch(27.90% 0.0148 303.68)` | Black Onyx | white, 14.6 to 1 |
| 5 | `#2c2934` | `oklch(28.84% 0.0203 299.44)` | Haiti | white, 14.2 to 1 |
| 6 | `#2f2b39` | `oklch(29.92% 0.0262 296.68)` | Black Rock | white, 13.7 to 1 |
| 7 | `#322d40` | `oklch(31.15% 0.0331 295.65)` | Viola Black | white, 13.2 to 1 |
| 8 | `#363047` | `oklch(32.54% 0.0413 295.70)` | Oil Rush | white, 12.5 to 1 |
| 9 | `#3b334f` | `oklch(34.07% 0.0496 296.48)` | Naggaroth Night | white, 11.9 to 1 |
| 10 | `#403656` | `oklch(35.70% 0.0568 297.63)` | Devil’s Plum | white, 11.2 to 1 |
| 11 | `#45395d` | `oklch(37.40% 0.0620 298.80)` | Mulberry Purple | white, 10.4 to 1 |
| 12 | `#4b3d63` | `oklch(39.21% 0.0649 299.35)` | Mulberry Purple | white, 9.7 to 1 |
| 13 | `#50426a` | `oklch(41.13% 0.0664 299.54)` | Evening Lavender | white, 9 to 1 |
| 14 | `#56476f` | `oklch(43.14% 0.0665 300.29)` | Purple Feather | white, 8.2 to 1 |
| 15 | `#5d4d74` | `oklch(45.19% 0.0654 302.55)` | Benikakehana Purple | white, 7.5 to 1 |
| 16 | `#655277` | `oklch(47.24% 0.0634 307.25)` | Berry Syrup | white, 6.9 to 1 |
| 17 | `#6f5779` | `oklch(49.49% 0.0595 315.98)` | Trixter | white, 6.3 to 1 |
| 18 | `#7a5e79` | `oklch(51.95% 0.0536 328.12)` | Gala Ball | white, 5.6 to 1 |
| 19 | `#836578` | `oklch(54.35% 0.0471 341.28)` | Arctic Dusk | white, 5.1 to 1 |
| 20 | `#8a6c78` | `oklch(56.42% 0.0412 353.09)` | Plum Royale | white, 4.6 to 1 |
| 21 | `#8e7178` | `oklch(57.87% 0.0372 1.14)` | Myself | black, 4.7 to 1 |

## CSS

```css
background: linear-gradient(135deg, #242425 0.0%, #262427 5.0%, #28252a 10.0%, #2a272f 15.0%, #2c2934 20.0%, #2f2b39 25.0%, #322d40 30.0%, #363047 35.0%, #3b334f 40.0%, #403656 45.0%, #45395d 50.0%, #4b3d63 55.0%, #50426a 60.0%, #56476f 65.0%, #5d4d74 70.0%, #655277 75.0%, #6f5779 80.0%, #7a5e79 85.0%, #836578 90.0%, #8a6c78 95.0%, #8e7178 100.0%);
background: linear-gradient(135deg in oklch, oklch(25.98% 0.0028 315.70) 0.0%, oklch(26.46% 0.0057 312.78) 5.0%, oklch(27.11% 0.0098 308.45) 10.0%, oklch(27.90% 0.0148 303.68) 15.0%, oklch(28.84% 0.0203 299.44) 20.0%, oklch(29.92% 0.0262 296.68) 25.0%, oklch(31.15% 0.0331 295.65) 30.0%, oklch(32.54% 0.0413 295.70) 35.0%, oklch(34.07% 0.0496 296.48) 40.0%, oklch(35.70% 0.0568 297.63) 45.0%, oklch(37.40% 0.0620 298.80) 50.0%, oklch(39.21% 0.0649 299.35) 55.0%, oklch(41.13% 0.0664 299.54) 60.0%, oklch(43.14% 0.0665 300.29) 65.0%, oklch(45.19% 0.0654 302.55) 70.0%, oklch(47.24% 0.0634 307.25) 75.0%, oklch(49.49% 0.0595 315.98) 80.0%, oklch(51.95% 0.0536 328.12) 85.0%, oklch(54.35% 0.0471 341.28) 90.0%, oklch(56.42% 0.0412 353.09) 95.0%, oklch(57.87% 0.0372 1.14) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.26 | 0.003 | 315.7 |
| 2 | 0.299 | 0.026 | 296.7 |
| 3 | 0.374 | 0.062 | 298.8 |
| 4 | 0.472 | 0.063 | 307.2 |
| 5 | 0.579 | 0.037 | 361.1 |

## In these collections

- [Halloween gradients](https://grabient.com/halloween-gradients)
- [Purple and pink gradients](https://grabient.com/purple-and-pink-gradients)

## Other forms

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