# Near-Black Purple Near-Black Field

This diagonal gradient moves through near-black, cyan, vivid blue, vivid purple, deep teal, deep blue, and near-black. The complete visible route keeps the collection’s named color relationship clear while providing distinct light and dark areas for type, marks, and framing.

- Also called: Black, blue, dark purple and navy linear gradient
- Seed: `kYHCL3VyCvj_LTwtFLBniTO4mMt6`
- Page: https://grabient.com/kYHCL3VyCvj_LTwtFLBniTO4mMt6?steps=32&angle=30
- Drawn as: linear gradient, 32 steps, 30 degrees
- Kinds: light center, vivid, dark
- Hues: wide
- Contrast of its darkest and lightest colors: 8 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 | `#0f0007` | `oklch(11.05% 0.0465 347.43)` | Glossy Black | white, 20.5 to 1 |
| 2 | `#1d081c` | `oklch(17.86% 0.0505 329.96)` | Meški Black | white, 19 to 1 |
| 3 | `#2f223f` | `oklch(27.99% 0.0548 303.55)` | Telopea | white, 14.8 to 1 |
| 4 | `#3c4568` | `oklch(39.72% 0.0603 273.19)` | Starlit Night | white, 9.4 to 1 |
| 5 | `#446c8b` | `oklch(51.38% 0.0672 243.99)` | Big Sur Blue Jade | white, 5.6 to 1 |
| 6 | `#4b8fa4` | `oklch(61.29% 0.0760 221.03)` | Aegean Sea | black, 5.7 to 1 |
| 7 | `#4da6b5` | `oklch(67.77% 0.0870 209.42)` | Freshwater | black, 7.4 to 1 |
| 8 | `#40aec5` | `oklch(69.81% 0.1030 214.25)` | River Blue | black, 8 to 1 |
| 9 | `#35a6dc` | `oklch(68.57% 0.1261 234.31)` | Dayflower | black, 7.6 to 1 |
| 10 | `#5d8cec` | `oklch(65.09% 0.1524 263.05)` | Soft Blue | black, 6.4 to 1 |
| 11 | `#8966df` | `oklch(60.37% 0.1774 293.87)` | Medium Slate Blue | black, 5 to 1 |
| 12 | `#a33fb8` | `oklch(55.41% 0.1969 320.17)` | Akebi Purple | white, 5.3 to 1 |
| 13 | `#a81f94` | `oklch(51.23% 0.2065 335.32)` | Magneto’s Magenta | white, 6.4 to 1 |
| 14 | `#9b178e` | `oklch(48.42% 0.2019 333.22)` | Vanishing Night | white, 7.2 to 1 |
| 15 | `#7c299b` | `oklch(45.89% 0.1821 314.98)` | Noble Cause Purple | white, 7.9 to 1 |
| 16 | `#4f3c9f` | `oklch(43.47% 0.1527 286.96)` | Blueberry | white, 8.4 to 1 |
| 17 | `#154a8a` | `oklch(41.15% 0.1194 255.68)` | Magnetic Blue | white, 8.8 to 1 |
| 18 | `#004c64` | `oklch(38.91% 0.0756 227.69)` | Work Blue | white, 9.4 to 1 |
| 19 | `#004851` | `oklch(36.72% 0.0634 209.37)` | Midnight Green | white, 10.2 to 1 |
| 20 | `#0b4148` | `oklch(34.60% 0.0541 207.02)` | Warm Black | white, 11.2 to 1 |
| 21 | `#083b48` | `oklch(32.67% 0.0555 220.80)` | Ghostlands Coal | white, 12.1 to 1 |
| 22 | `#0e334e` | `oklch(30.86% 0.0645 245.11)` | Sea of Stars | white, 13.1 to 1 |
| 23 | `#202751` | `oklch(29.10% 0.0773 274.21)` | Space Cadet | white, 14.2 to 1 |
| 24 | `#30194b` | `oklch(27.29% 0.0900 302.39)` | Russian Violet | white, 15.4 to 1 |
| 25 | `#380a3c` | `oklch(25.34% 0.0989 323.94)` | Dark Purple | white, 16.4 to 1 |
| 26 | `#360230` | `oklch(23.16% 0.1001 333.23)` | Exquisite Eggplant | white, 17.3 to 1 |
| 27 | `#2c002a` | `oklch(20.54% 0.0935 330.36)` | Globe Thistle | white, 18.3 to 1 |
| 28 | `#1f0026` | `oklch(17.56% 0.0826 319.48)` | Black Sabbath | white, 19.2 to 1 |
| 29 | `#110121` | `oklch(14.51% 0.0689 303.93)` | Space Grey | white, 19.9 to 1 |
| 30 | `#050218` | `oklch(11.65% 0.0548 287.07)` | Obsidian Shard | white, 20.4 to 1 |
| 31 | `#01010f` | `oklch(9.22% 0.0426 272.24)` | Benthic Black | white, 20.7 to 1 |
| 32 | `#000108` | `oklch(7.48% 0.0344 262.80)` | Benthic Black | white, 20.8 to 1 |

## CSS

```css
background: linear-gradient(30deg, #0f0007 0.0%, #1d081c 3.2%, #2f223f 6.5%, #3c4568 9.7%, #446c8b 12.9%, #4b8fa4 16.1%, #4da6b5 19.4%, #40aec5 22.6%, #35a6dc 25.8%, #5d8cec 29.0%, #8966df 32.3%, #a33fb8 35.5%, #a81f94 38.7%, #9b178e 41.9%, #7c299b 45.2%, #4f3c9f 48.4%, #154a8a 51.6%, #004c64 54.8%, #004851 58.1%, #0b4148 61.3%, #083b48 64.5%, #0e334e 67.7%, #202751 71.0%, #30194b 74.2%, #380a3c 77.4%, #360230 80.6%, #2c002a 83.9%, #1f0026 87.1%, #110121 90.3%, #050218 93.5%, #01010f 96.8%, #000108 100.0%);
background: linear-gradient(30deg in oklch, oklch(11.05% 0.0465 347.43) 0.0%, oklch(17.86% 0.0505 329.96) 3.2%, oklch(27.99% 0.0548 303.55) 6.5%, oklch(39.72% 0.0603 273.19) 9.7%, oklch(51.38% 0.0672 243.99) 12.9%, oklch(61.29% 0.0760 221.03) 16.1%, oklch(67.77% 0.0870 209.42) 19.4%, oklch(69.81% 0.1030 214.25) 22.6%, oklch(68.57% 0.1261 234.31) 25.8%, oklch(65.09% 0.1524 263.05) 29.0%, oklch(60.37% 0.1774 293.87) 32.3%, oklch(55.41% 0.1969 320.17) 35.5%, oklch(51.23% 0.2065 335.32) 38.7%, oklch(48.42% 0.2019 333.22) 41.9%, oklch(45.89% 0.1821 314.98) 45.2%, oklch(43.47% 0.1527 286.96) 48.4%, oklch(41.15% 0.1194 255.68) 51.6%, oklch(38.91% 0.0756 227.69) 54.8%, oklch(36.72% 0.0634 209.37) 58.1%, oklch(34.60% 0.0541 207.02) 61.3%, oklch(32.67% 0.0555 220.80) 64.5%, oklch(30.86% 0.0645 245.11) 67.7%, oklch(29.10% 0.0773 274.21) 71.0%, oklch(27.29% 0.0900 302.39) 74.2%, oklch(25.34% 0.0989 323.94) 77.4%, oklch(23.16% 0.1001 333.23) 80.6%, oklch(20.54% 0.0935 330.36) 83.9%, oklch(17.56% 0.0826 319.48) 87.1%, oklch(14.51% 0.0689 303.93) 90.3%, oklch(11.65% 0.0548 287.07) 93.5%, oklch(9.22% 0.0426 272.24) 96.8%, oklch(7.48% 0.0344 262.80) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.11 | 0.047 | 347.3 |
| 2 | 0.685 | 0.09 | 208.9 |
| 3 | 0.5 | 0.207 | 336.8 |
| 4 | 0.354 | 0.056 | 205.7 |
| 5 | 0.236 | 0.101 | 332.5 |
| 6 | 0.075 | 0.034 | 262.8 |

## In these collections

- [Pink and blue gradients](https://grabient.com/pink-and-blue-gradients)

## Other forms

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