# Black Blue Cosmic Halo

From the center outward, this radial gradient begins near black, builds through deep navy and ocean blue, then reaches electric blue, periwinkle, violet, and muted pink. The long dark core and crisp cool halo create strong cosmic depth without losing a soft outer finish. Use it for galaxy illustrations, game menus, music covers, or dramatic title backgrounds.

- Also called: Black, blue and purple radial gradient
- Seed: `kUGhTBlRRAc8qOvONcug`
- Page: https://grabient.com/kUGhTBlRRAc8qOvONcug?style=radialGradient&steps=32&angle=0
- Drawn as: radial gradient, 32 steps, 0 degrees
- Kinds: dark to light, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 6.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 | `#02030c` | `oklch(10.24% 0.0276 272.11)` | Ninja | white, 20.5 to 1 |
| 2 | `#02030d` | `oklch(10.43% 0.0290 272.55)` | Ninja | white, 20.5 to 1 |
| 3 | `#02030e` | `oklch(10.46% 0.0307 273.36)` | Ninja | white, 20.5 to 1 |
| 4 | `#02030e` | `oklch(10.43% 0.0326 274.42)` | Ninja | white, 20.5 to 1 |
| 5 | `#02030f` | `oklch(10.41% 0.0347 275.57)` | Broken Tube | white, 20.5 to 1 |
| 6 | `#020310` | `oklch(10.50% 0.0371 276.69)` | Broken Tube | white, 20.5 to 1 |
| 7 | `#030312` | `oklch(10.79% 0.0398 277.63)` | Obsidian Shard | white, 20.5 to 1 |
| 8 | `#030314` | `oklch(11.37% 0.0428 278.27)` | Obsidian Shard | white, 20.4 to 1 |
| 9 | `#040417` | `oklch(12.32% 0.0461 278.44)` | Obsidian Shard | white, 20.3 to 1 |
| 10 | `#06051c` | `oklch(13.75% 0.0497 278.04)` | Melanophobia | white, 20 to 1 |
| 11 | `#080923` | `oklch(15.73% 0.0537 276.90)` | Mysterious Depths | white, 19.5 to 1 |
| 12 | `#0c0f2c` | `oklch(18.46% 0.0582 274.65)` | Squid’s Ink | white, 18.7 to 1 |
| 13 | `#101838` | `oklch(22.17% 0.0633 270.61)` | Lost in Sadness | white, 17.3 to 1 |
| 14 | `#152347` | `oklch(26.67% 0.0691 265.23)` | Dark Eclipse | white, 15.3 to 1 |
| 15 | `#193258` | `oklch(31.72% 0.0754 259.02)` | Incremental Blue | white, 12.8 to 1 |
| 16 | `#1c416a` | `oklch(37.08% 0.0819 252.49)` | Blue Mosque | white, 10.3 to 1 |
| 17 | `#1e527c` | `oklch(42.53% 0.0885 246.14)` | Blueberry Twist | white, 8.2 to 1 |
| 18 | `#1f638d` | `oklch(47.83% 0.0950 240.50)` | Traditional Blue | white, 6.5 to 1 |
| 19 | `#1f739d` | `oklch(52.75% 0.1013 236.07)` | Bateau | white, 5.2 to 1 |
| 20 | `#2181ac` | `oklch(57.04% 0.1072 233.36)` | Blue Bird Day | black, 4.8 to 1 |
| 21 | `#268cba` | `oklch(60.49% 0.1126 232.89)` | Hidden Springs | black, 5.5 to 1 |
| 22 | `#2e93c5` | `oklch(62.88% 0.1172 235.18)` | Porpita Porpita | black, 6.1 to 1 |
| 23 | `#3b96d0` | `oklch(64.37% 0.1215 240.67)` | Perfect Sky | black, 6.4 to 1 |
| 24 | `#4c95d8` | `oklch(65.16% 0.1255 248.87)` | Flax Flower Blue | black, 6.5 to 1 |
| 25 | `#5e90de` | `oklch(65.36% 0.1292 259.13)` | United Nations Blue | black, 6.5 to 1 |
| 26 | `#7289e0` | `oklch(65.12% 0.1327 270.78)` | Tanzine | black, 6.3 to 1 |
| 27 | `#8481dd` | `oklch(64.55% 0.1359 283.18)` | Indigo Bloom | black, 6.1 to 1 |
| 28 | `#9378d6` | `oklch(63.80% 0.1388 295.67)` | Iridescent Purple | black, 5.8 to 1 |
| 29 | `#a06fcb` | `oklch(62.98% 0.1414 307.59)` | Rich Lavender | black, 5.6 to 1 |
| 30 | `#aa68be` | `oklch(62.22% 0.1437 318.29)` | Prickly Purple | black, 5.4 to 1 |
| 31 | `#b262b2` | `oklch(61.66% 0.1457 327.11)` | Royalty Loyalty | black, 5.2 to 1 |
| 32 | `#b75fa9` | `oklch(61.42% 0.1474 333.40)` | Young Purple | black, 5.2 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #02030c 0.0%, #02030d 3.2%, #02030e 6.5%, #02030e 9.7%, #02030f 12.9%, #020310 16.1%, #030312 19.4%, #030314 22.6%, #040417 25.8%, #06051c 29.0%, #080923 32.3%, #0c0f2c 35.5%, #101838 38.7%, #152347 41.9%, #193258 45.2%, #1c416a 48.4%, #1e527c 51.6%, #1f638d 54.8%, #1f739d 58.1%, #2181ac 61.3%, #268cba 64.5%, #2e93c5 67.7%, #3b96d0 71.0%, #4c95d8 74.2%, #5e90de 77.4%, #7289e0 80.6%, #8481dd 83.9%, #9378d6 87.1%, #a06fcb 90.3%, #aa68be 93.5%, #b262b2 96.8%, #b75fa9 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(10.24% 0.0276 272.11) 0.0%, oklch(10.43% 0.0290 272.55) 3.2%, oklch(10.46% 0.0307 273.36) 6.5%, oklch(10.43% 0.0326 274.42) 9.7%, oklch(10.41% 0.0347 275.57) 12.9%, oklch(10.50% 0.0371 276.69) 16.1%, oklch(10.79% 0.0398 277.63) 19.4%, oklch(11.37% 0.0428 278.27) 22.6%, oklch(12.32% 0.0461 278.44) 25.8%, oklch(13.75% 0.0497 278.04) 29.0%, oklch(15.73% 0.0537 276.90) 32.3%, oklch(18.46% 0.0582 274.65) 35.5%, oklch(22.17% 0.0633 270.61) 38.7%, oklch(26.67% 0.0691 265.23) 41.9%, oklch(31.72% 0.0754 259.02) 45.2%, oklch(37.08% 0.0819 252.49) 48.4%, oklch(42.53% 0.0885 246.14) 51.6%, oklch(47.83% 0.0950 240.50) 54.8%, oklch(52.75% 0.1013 236.07) 58.1%, oklch(57.04% 0.1072 233.36) 61.3%, oklch(60.49% 0.1126 232.89) 64.5%, oklch(62.88% 0.1172 235.18) 67.7%, oklch(64.37% 0.1215 240.67) 71.0%, oklch(65.16% 0.1255 248.87) 74.2%, oklch(65.36% 0.1292 259.13) 77.4%, oklch(65.12% 0.1327 270.78) 80.6%, oklch(64.55% 0.1359 283.18) 83.9%, oklch(63.80% 0.1388 295.67) 87.1%, oklch(62.98% 0.1414 307.59) 90.3%, oklch(62.22% 0.1437 318.29) 93.5%, oklch(61.66% 0.1457 327.11) 96.8%, oklch(61.42% 0.1474 333.40) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.102 | 0.028 | 272.1 |
| 2 | 0.165 | 0.055 | 276.3 |
| 3 | 0.622 | 0.116 | 234.1 |
| 4 | 0.614 | 0.147 | 333.4 |

## In these collections

- [Galaxy gradients](https://grabient.com/galaxy-gradients)

## Other forms

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