# Bright cyan midnight slope

Purple, navy and dark purple linear gradient with 48 colors: #db2eba, #d336c2, #ca3fcc, #bf49d5, #b252de, #a35ce4, #9364e7, #826ce7, #7173e4, #5f79df, #4d7dd6, #3a7fcd, #2680c2, #017fb6, #007da3, #007991, #007481, #006f71, #006963, #006356, #005d49, #00573e, #005236, #004d30, #00482e, #00442e, #003f30, #003b32, #003734, #003436, #003038, #002d3a, #00293c, #002641, #012147, #0b1e46, #111b45, #161843, #191641, #1d1440, #20133e, #22123c, #24113b, #261039, #281038, #2a0f37, #2b0f35, #2c0e34. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Purple, navy and dark purple linear gradient
- Seed: `kWnrLwSjA1S4eNYfHUxHZxGQ`
- Page: https://grabient.com/kWnrLwSjA1S4eNYfHUxHZxGQ?steps=48&angle=135
- Drawn as: linear gradient, 48 steps, 135 degrees
- Kinds: light to dark, vivid, dark, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 4.3 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 | `#db2eba` | `oklch(62.20% 0.2453 337.50)` | Loudicious Pink | black, 5 to 1 |
| 2 | `#d336c2` | `oklch(62.07% 0.2395 333.05)` | Steel Pink | black, 5 to 1 |
| 3 | `#ca3fcc` | `oklch(61.98% 0.2319 327.45)` | Steel Pink | black, 5 to 1 |
| 4 | `#bf49d5` | `oklch(61.92% 0.2229 320.87)` | Ultraviolet Berl | black, 5.1 to 1 |
| 5 | `#b252de` | `oklch(61.85% 0.2128 313.49)` | Medium Orchid | black, 5.1 to 1 |
| 6 | `#a35ce4` | `oklch(61.75% 0.2018 305.47)` | Lightish Purple | black, 5.1 to 1 |
| 7 | `#9364e7` | `oklch(61.59% 0.1904 296.99)` | Forgotten Kyawthuite | black, 5.2 to 1 |
| 8 | `#826ce7` | `oklch(61.35% 0.1789 288.21)` | Medium Slate Blue | black, 5.2 to 1 |
| 9 | `#7173e4` | `oklch(61.00% 0.1676 279.30)` | Hera Blue | black, 5.2 to 1 |
| 10 | `#5f79df` | `oklch(60.52% 0.1567 270.44)` | Pan Purple | black, 5.2 to 1 |
| 11 | `#4d7dd6` | `oklch(59.87% 0.1468 261.79)` | Serenity’s Reign | black, 5.2 to 1 |
| 12 | `#3a7fcd` | `oklch(59.03% 0.1379 253.52)` | Heirloom Hydrangea | black, 5.1 to 1 |
| 13 | `#2680c2` | `oklch(57.98% 0.1306 245.75)` | Eye Blue | black, 4.9 to 1 |
| 14 | `#017fb6` | `oklch(56.64% 0.1241 237.28)` | Meissen Blue | black, 4.7 to 1 |
| 15 | `#007da3` | `oklch(55.03% 0.1072 227.91)` | Bleu Ciel | white, 4.7 to 1 |
| 16 | `#007991` | `oklch(53.20% 0.0956 217.96)` | Bayou Serenade | white, 5 to 1 |
| 17 | `#007481` | `oklch(51.20% 0.0880 207.78)` | Deep Current | white, 5.4 to 1 |
| 18 | `#006f71` | `oklch(49.09% 0.0835 197.73)` | Active Turquoise | white, 5.9 to 1 |
| 19 | `#006963` | `oklch(46.92% 0.0816 188.16)` | Butterfly Green | white, 6.5 to 1 |
| 20 | `#006356` | `oklch(44.74% 0.0815 179.43)` | Dancing Peacock | white, 7.1 to 1 |
| 21 | `#005d49` | `oklch(42.61% 0.0827 171.88)` | Evergreen | white, 7.8 to 1 |
| 22 | `#00573e` | `oklch(40.56% 0.0843 165.88)` | Sacramento State Green | white, 8.6 to 1 |
| 23 | `#005236` | `oklch(38.67% 0.0851 161.77)` | Trapper Green | white, 9.3 to 1 |
| 24 | `#004d30` | `oklch(36.98% 0.0838 159.92)` | Troll Green | white, 10 to 1 |
| 25 | `#00482e` | `oklch(35.52% 0.0795 160.66)` | Alaskan Moss | white, 10.6 to 1 |
| 26 | `#00442e` | `oklch(34.15% 0.0725 164.29)` | UP Forest Green | white, 11.2 to 1 |
| 27 | `#003f30` | `oklch(32.85% 0.0648 170.40)` | Mizukaze Green | white, 11.9 to 1 |
| 28 | `#003b32` | `oklch(31.63% 0.0580 178.55)` | Night Turquoise | white, 12.5 to 1 |
| 29 | `#003734` | `oklch(30.48% 0.0529 188.29)` | Night Turquoise | white, 13.1 to 1 |
| 30 | `#003436` | `oklch(29.40% 0.0500 199.18)` | Nora’s Forest | white, 13.6 to 1 |
| 31 | `#003038` | `oklch(28.41% 0.0493 210.76)` | Roof Tile Green | white, 14.1 to 1 |
| 32 | `#002d3a` | `oklch(27.48% 0.0510 222.58)` | Black Chasm | white, 14.6 to 1 |
| 33 | `#00293c` | `oklch(26.64% 0.0559 234.16)` | Murky Depths | white, 15.1 to 1 |
| 34 | `#002641` | `oklch(25.87% 0.0652 245.06)` | Murky Depths | white, 15.5 to 1 |
| 35 | `#012147` | `oklch(25.16% 0.0800 254.64)` | Oxford Blue | white, 15.9 to 1 |
| 36 | `#0b1e46` | `oklch(24.55% 0.0800 262.83)` | Oxford Blue | white, 16.3 to 1 |
| 37 | `#111b45` | `oklch(24.03% 0.0797 269.55)` | Tetsu-Kon Blue | white, 16.6 to 1 |
| 38 | `#161843` | `oklch(23.65% 0.0795 275.86)` | Tetsu-Kon Blue | white, 16.8 to 1 |
| 39 | `#191641` | `oklch(23.38% 0.0792 281.81)` | Prune Plum | white, 17 to 1 |
| 40 | `#1d1440` | `oklch(23.21% 0.0789 287.41)` | Prune Plum | white, 17.1 to 1 |
| 41 | `#20133e` | `oklch(23.11% 0.0787 292.63)` | Prune Plum | white, 17.1 to 1 |
| 42 | `#22123c` | `oklch(23.08% 0.0784 297.49)` | Prune Plum | white, 17.2 to 1 |
| 43 | `#24113b` | `oklch(23.10% 0.0781 301.97)` | Blacklist | white, 17.2 to 1 |
| 44 | `#261039` | `oklch(23.14% 0.0779 306.06)` | Blacklist | white, 17.2 to 1 |
| 45 | `#281038` | `oklch(23.19% 0.0777 309.76)` | Blacklist | white, 17.2 to 1 |
| 46 | `#2a0f37` | `oklch(23.23% 0.0775 313.07)` | Dark Prom Queen | white, 17.1 to 1 |
| 47 | `#2b0f35` | `oklch(23.25% 0.0773 315.98)` | Dark Prom Queen | white, 17.1 to 1 |
| 48 | `#2c0e34` | `oklch(23.23% 0.0772 318.48)` | Dark Prom Queen | white, 17.2 to 1 |

## CSS

```css
background: linear-gradient(135deg, #db2eba 0.0%, #d336c2 2.1%, #ca3fcc 4.3%, #bf49d5 6.4%, #b252de 8.5%, #a35ce4 10.6%, #9364e7 12.8%, #826ce7 14.9%, #7173e4 17.0%, #5f79df 19.1%, #4d7dd6 21.3%, #3a7fcd 23.4%, #2680c2 25.5%, #017fb6 27.7%, #007da3 29.8%, #007991 31.9%, #007481 34.0%, #006f71 36.2%, #006963 38.3%, #006356 40.4%, #005d49 42.6%, #00573e 44.7%, #005236 46.8%, #004d30 48.9%, #00482e 51.1%, #00442e 53.2%, #003f30 55.3%, #003b32 57.4%, #003734 59.6%, #003436 61.7%, #003038 63.8%, #002d3a 66.0%, #00293c 68.1%, #002641 70.2%, #012147 72.3%, #0b1e46 74.5%, #111b45 76.6%, #161843 78.7%, #191641 80.9%, #1d1440 83.0%, #20133e 85.1%, #22123c 87.2%, #24113b 89.4%, #261039 91.5%, #281038 93.6%, #2a0f37 95.7%, #2b0f35 97.9%, #2c0e34 100.0%);
background: linear-gradient(135deg in oklch, oklch(62.20% 0.2453 337.50) 0.0%, oklch(62.07% 0.2395 333.05) 2.1%, oklch(61.98% 0.2319 327.45) 4.3%, oklch(61.92% 0.2229 320.87) 6.4%, oklch(61.85% 0.2128 313.49) 8.5%, oklch(61.75% 0.2018 305.47) 10.6%, oklch(61.59% 0.1904 296.99) 12.8%, oklch(61.35% 0.1789 288.21) 14.9%, oklch(61.00% 0.1676 279.30) 17.0%, oklch(60.52% 0.1567 270.44) 19.1%, oklch(59.87% 0.1468 261.79) 21.3%, oklch(59.03% 0.1379 253.52) 23.4%, oklch(57.98% 0.1306 245.75) 25.5%, oklch(56.64% 0.1241 237.28) 27.7%, oklch(55.03% 0.1072 227.91) 29.8%, oklch(53.20% 0.0956 217.96) 31.9%, oklch(51.20% 0.0880 207.78) 34.0%, oklch(49.09% 0.0835 197.73) 36.2%, oklch(46.92% 0.0816 188.16) 38.3%, oklch(44.74% 0.0815 179.43) 40.4%, oklch(42.61% 0.0827 171.88) 42.6%, oklch(40.56% 0.0843 165.88) 44.7%, oklch(38.67% 0.0851 161.77) 46.8%, oklch(36.98% 0.0838 159.92) 48.9%, oklch(35.52% 0.0795 160.66) 51.1%, oklch(34.15% 0.0725 164.29) 53.2%, oklch(32.85% 0.0648 170.40) 55.3%, oklch(31.63% 0.0580 178.55) 57.4%, oklch(30.48% 0.0529 188.29) 59.6%, oklch(29.40% 0.0500 199.18) 61.7%, oklch(28.41% 0.0493 210.76) 63.8%, oklch(27.48% 0.0510 222.58) 66.0%, oklch(26.64% 0.0559 234.16) 68.1%, oklch(25.87% 0.0652 245.06) 70.2%, oklch(25.16% 0.0800 254.64) 72.3%, oklch(24.55% 0.0800 262.83) 74.5%, oklch(24.03% 0.0797 269.55) 76.6%, oklch(23.65% 0.0795 275.86) 78.7%, oklch(23.38% 0.0792 281.81) 80.9%, oklch(23.21% 0.0789 287.41) 83.0%, oklch(23.11% 0.0787 292.63) 85.1%, oklch(23.08% 0.0784 297.49) 87.2%, oklch(23.10% 0.0781 301.97) 89.4%, oklch(23.14% 0.0779 306.06) 91.5%, oklch(23.19% 0.0777 309.76) 93.6%, oklch(23.23% 0.0775 313.07) 95.7%, oklch(23.25% 0.0773 315.98) 97.9%, oklch(23.23% 0.0772 318.48) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.622 | 0.245 | 337.5 |
| 2 | 0.583 | 0.132 | 247.7 |
| 3 | 0.362 | 0.083 | 160 |
| 4 | 0.244 | 0.08 | 264.6 |
| 5 | 0.232 | 0.077 | 318.5 |

## In these collections

- [Dark gradients](https://grabient.com/dark-gradients)

## Other forms

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