# Near-black and rose dark mode ui palette

This palette brings together dark magenta and magenta. It lightens and then darkens across a moderate lightness range, combining strong color with clear contrast. Its bold and dramatic character suits website sections and presentation backgrounds, especially compositions that need a controlled shift between darker and lighter areas.

- Also called: Seamless dark purple, purple and pink radial gradient
- Seed: `kWJijwtbM_cxIwS1s0CExQ-4`
- Page: https://grabient.com/kWJijwtbM_cxIwS1s0CExQ-4?style=radialGradient&steps=48&angle=330
- Drawn as: radial gradient, 48 steps, 330 degrees
- Kinds: light center, vivid, warm, seamless
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.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 | `#190213` | `oklch(14.96% 0.0551 338.20)` | Crow | white, 19.8 to 1 |
| 2 | `#1d0317` | `oklch(16.34% 0.0594 337.94)` | Crow | white, 19.5 to 1 |
| 3 | `#22041c` | `oklch(18.11% 0.0650 337.55)` | Black Sabbath | white, 19 to 1 |
| 4 | `#290622` | `oklch(20.20% 0.0715 337.06)` | Globe Thistle | white, 18.3 to 1 |
| 5 | `#310829` | `oklch(22.56% 0.0789 336.51)` | Globe Thistle | white, 17.5 to 1 |
| 6 | `#3a0c31` | `oklch(25.10% 0.0868 335.93)` | Greek Aubergine | white, 16.4 to 1 |
| 7 | `#43103a` | `oklch(27.77% 0.0952 335.36)` | Velvet Cosmos | white, 15.2 to 1 |
| 8 | `#4c1443` | `oklch(30.50% 0.1037 334.83)` | Violet Carmine | white, 14 to 1 |
| 9 | `#56194d` | `oklch(33.21% 0.1123 334.38)` | Violet Carmine | white, 12.8 to 1 |
| 10 | `#601d56` | `oklch(35.85% 0.1206 334.04)` | Grape Purple | white, 11.6 to 1 |
| 11 | `#69215f` | `oklch(38.33% 0.1284 333.85)` | Palatinate Purple | white, 10.5 to 1 |
| 12 | `#722567` | `oklch(40.60% 0.1357 333.84)` | Byzantium | white, 9.6 to 1 |
| 13 | `#7a286e` | `oklch(42.61% 0.1421 334.05)` | Grape Juice | white, 8.9 to 1 |
| 14 | `#822b75` | `oklch(44.59% 0.1486 334.50)` | Veronica Purple | white, 8.2 to 1 |
| 15 | `#8b2e7b` | `oklch(46.64% 0.1553 335.15)` | Violet Vixen | white, 7.5 to 1 |
| 16 | `#943182` | `oklch(48.69% 0.1621 335.97)` | Purple Excellency | white, 6.9 to 1 |
| 17 | `#9d3488` | `oklch(50.71% 0.1689 336.93)` | Purple Excellency | white, 6.4 to 1 |
| 18 | `#a6368d` | `oklch(52.64% 0.1754 337.98)` | Wild Aster | white, 5.9 to 1 |
| 19 | `#af3992` | `oklch(54.45% 0.1814 339.08)` | Fandango | white, 5.4 to 1 |
| 20 | `#b73b96` | `oklch(56.07% 0.1869 340.21)` | Fandango | white, 5.1 to 1 |
| 21 | `#be3d99` | `oklch(57.46% 0.1917 341.32)` | Boat Orchid | white, 4.8 to 1 |
| 22 | `#c43e9b` | `oklch(58.58% 0.1955 342.38)` | Lustful Wishes | white, 4.6 to 1 |
| 23 | `#c93f9c` | `oklch(59.37% 0.1982 343.35)` | Lustful Wishes | black, 4.6 to 1 |
| 24 | `#cb3f9c` | `oklch(59.79% 0.1996 344.18)` | Lustful Wishes | black, 4.7 to 1 |
| 25 | `#cc3f9a` | `oklch(59.79% 0.1996 344.88)` | Lustful Wishes | black, 4.7 to 1 |
| 26 | `#ca3e98` | `oklch(59.37% 0.1982 345.57)` | Lustful Wishes | black, 4.6 to 1 |
| 27 | `#c73c93` | `oklch(58.58% 0.1955 346.26)` | Magenta Pink | white, 4.6 to 1 |
| 28 | `#c33a8e` | `oklch(57.46% 0.1917 346.93)` | Boat Orchid | white, 4.8 to 1 |
| 29 | `#bd3888` | `oklch(56.07% 0.1869 347.57)` | Medium Red Violet | white, 5.1 to 1 |
| 30 | `#b63582` | `oklch(54.45% 0.1814 348.17)` | Very Berry | white, 5.4 to 1 |
| 31 | `#ae327b` | `oklch(52.64% 0.1754 348.70)` | Plum Kingdom | white, 5.9 to 1 |
| 32 | `#a62f74` | `oklch(50.71% 0.1689 349.15)` | Carroburg Crimson | white, 6.4 to 1 |
| 33 | `#9d2c6d` | `oklch(48.69% 0.1621 349.51)` | Amaranth Deep Purple | white, 6.9 to 1 |
| 34 | `#942966` | `oklch(46.64% 0.1553 349.75)` | Celestial Dragon | white, 7.5 to 1 |
| 35 | `#8c2660` | `oklch(44.59% 0.1486 349.88)` | Dark Raspberry | white, 8.2 to 1 |
| 36 | `#83235a` | `oklch(42.61% 0.1421 349.86)` | Dark Raspberry | white, 8.9 to 1 |
| 37 | `#7b2054` | `oklch(40.60% 0.1357 349.66)` | Smooch | white, 9.6 to 1 |
| 38 | `#711d4e` | `oklch(38.33% 0.1284 349.23)` | Pansy Purple | white, 10.5 to 1 |
| 39 | `#671947` | `oklch(35.85% 0.1206 348.61)` | Pompadour | white, 11.6 to 1 |
| 40 | `#5c1540` | `oklch(33.21% 0.1123 347.85)` | Soul Anchor | white, 12.8 to 1 |
| 41 | `#511239` | `oklch(30.50% 0.1037 346.98)` | Tulip Poplar Purple | white, 14 to 1 |
| 42 | `#470e32` | `oklch(27.77% 0.0952 346.05)` | Blackberry | white, 15.2 to 1 |
| 43 | `#3c0a2b` | `oklch(25.10% 0.0868 345.09)` | Dark Sanctuary | white, 16.4 to 1 |
| 44 | `#330725` | `oklch(22.56% 0.0789 344.15)` | Vienna Roast | white, 17.5 to 1 |
| 45 | `#2b051f` | `oklch(20.20% 0.0715 343.27)` | Vienna Roast | white, 18.3 to 1 |
| 46 | `#230319` | `oklch(18.11% 0.0650 342.48)` | Belladonna | white, 19 to 1 |
| 47 | `#1e0215` | `oklch(16.34% 0.0594 341.84)` | Belladonna | white, 19.5 to 1 |
| 48 | `#190212` | `oklch(14.96% 0.0551 341.37)` | Crow | white, 19.8 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #190213 0.0%, #1d0317 2.1%, #22041c 4.3%, #290622 6.4%, #310829 8.5%, #3a0c31 10.6%, #43103a 12.8%, #4c1443 14.9%, #56194d 17.0%, #601d56 19.1%, #69215f 21.3%, #722567 23.4%, #7a286e 25.5%, #822b75 27.7%, #8b2e7b 29.8%, #943182 31.9%, #9d3488 34.0%, #a6368d 36.2%, #af3992 38.3%, #b73b96 40.4%, #be3d99 42.6%, #c43e9b 44.7%, #c93f9c 46.8%, #cb3f9c 48.9%, #cc3f9a 51.1%, #ca3e98 53.2%, #c73c93 55.3%, #c33a8e 57.4%, #bd3888 59.6%, #b63582 61.7%, #ae327b 63.8%, #a62f74 66.0%, #9d2c6d 68.1%, #942966 70.2%, #8c2660 72.3%, #83235a 74.5%, #7b2054 76.6%, #711d4e 78.7%, #671947 80.9%, #5c1540 83.0%, #511239 85.1%, #470e32 87.2%, #3c0a2b 89.4%, #330725 91.5%, #2b051f 93.6%, #230319 95.7%, #1e0215 97.9%, #190212 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(14.96% 0.0551 338.20) 0.0%, oklch(16.34% 0.0594 337.94) 2.1%, oklch(18.11% 0.0650 337.55) 4.3%, oklch(20.20% 0.0715 337.06) 6.4%, oklch(22.56% 0.0789 336.51) 8.5%, oklch(25.10% 0.0868 335.93) 10.6%, oklch(27.77% 0.0952 335.36) 12.8%, oklch(30.50% 0.1037 334.83) 14.9%, oklch(33.21% 0.1123 334.38) 17.0%, oklch(35.85% 0.1206 334.04) 19.1%, oklch(38.33% 0.1284 333.85) 21.3%, oklch(40.60% 0.1357 333.84) 23.4%, oklch(42.61% 0.1421 334.05) 25.5%, oklch(44.59% 0.1486 334.50) 27.7%, oklch(46.64% 0.1553 335.15) 29.8%, oklch(48.69% 0.1621 335.97) 31.9%, oklch(50.71% 0.1689 336.93) 34.0%, oklch(52.64% 0.1754 337.98) 36.2%, oklch(54.45% 0.1814 339.08) 38.3%, oklch(56.07% 0.1869 340.21) 40.4%, oklch(57.46% 0.1917 341.32) 42.6%, oklch(58.58% 0.1955 342.38) 44.7%, oklch(59.37% 0.1982 343.35) 46.8%, oklch(59.79% 0.1996 344.18) 48.9%, oklch(59.79% 0.1996 344.88) 51.1%, oklch(59.37% 0.1982 345.57) 53.2%, oklch(58.58% 0.1955 346.26) 55.3%, oklch(57.46% 0.1917 346.93) 57.4%, oklch(56.07% 0.1869 347.57) 59.6%, oklch(54.45% 0.1814 348.17) 61.7%, oklch(52.64% 0.1754 348.70) 63.8%, oklch(50.71% 0.1689 349.15) 66.0%, oklch(48.69% 0.1621 349.51) 68.1%, oklch(46.64% 0.1553 349.75) 70.2%, oklch(44.59% 0.1486 349.88) 72.3%, oklch(42.61% 0.1421 349.86) 74.5%, oklch(40.60% 0.1357 349.66) 76.6%, oklch(38.33% 0.1284 349.23) 78.7%, oklch(35.85% 0.1206 348.61) 80.9%, oklch(33.21% 0.1123 347.85) 83.0%, oklch(30.50% 0.1037 346.98) 85.1%, oklch(27.77% 0.0952 346.05) 87.2%, oklch(25.10% 0.0868 345.09) 89.4%, oklch(22.56% 0.0789 344.15) 91.5%, oklch(20.20% 0.0715 343.27) 93.6%, oklch(18.11% 0.0650 342.48) 95.7%, oklch(16.34% 0.0594 341.84) 97.9%, oklch(14.96% 0.0551 341.37) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.15 | 0.055 | 338.2 |
| 2 | 0.421 | 0.141 | 334 |
| 3 | 0.598 | 0.2 | 344.5 |
| 4 | 0.421 | 0.141 | 349.8 |
| 5 | 0.15 | 0.055 | 341.4 |

## In these collections

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

## Other forms

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