# Analogous black, blue and purple radial gradient

Analogous black, blue and purple radial gradient with 32 colors: #020202, #030304, #030608, #030a0e, #031016, #02161e, #011d27, #002430, #002a38, #00303f, #003646, #003a4d, #003f52, #004358, #00475e, #034a63, #0b4d67, #14506a, #1b526e, #225472, #295776, #30597a, #375b7e, #405c82, #495d85, #515f88, #5a6089, #61618a, #68618b, #6e628a, #73638a, #77648a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUFgCkKBi_TiaQhEFsdg`
- Page: https://grabient.com/kUFgCkKBi_TiaQhEFsdg?style=radialGradient&steps=32&angle=0
- Drawn as: radial gradient, 32 steps, 0 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.9 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 | `#020202` | `oklch(8.66% 0.0000 89.88)` | Black Hole | white, 20.7 to 1 |
| 2 | `#030304` | `oklch(10.01% 0.0041 230.22)` | Armour Wash | white, 20.5 to 1 |
| 3 | `#030608` | `oklch(11.79% 0.0098 229.58)` | Eight Ball | white, 20.3 to 1 |
| 4 | `#030a0e` | `oklch(13.92% 0.0166 228.78)` | Black Knight | white, 19.9 to 1 |
| 5 | `#031016` | `oklch(16.29% 0.0241 227.90)` | Black Glaze | white, 19.2 to 1 |
| 6 | `#02161e` | `oklch(18.83% 0.0321 227.00)` | Creeping Death | white, 18.4 to 1 |
| 7 | `#011d27` | `oklch(21.45% 0.0402 226.18)` | Oxford by Night | white, 17.4 to 1 |
| 8 | `#002430` | `oklch(24.07% 0.0459 225.71)` | Midnight Dreams | white, 16.2 to 1 |
| 9 | `#002a38` | `oklch(26.57% 0.0504 225.21)` | Murky Depths | white, 15.1 to 1 |
| 10 | `#00303f` | `oklch(28.88% 0.0547 225.04)` | Nordic Noir | white, 13.9 to 1 |
| 11 | `#003646` | `oklch(30.91% 0.0587 225.26)` | Crowberry Blue | white, 13 to 1 |
| 12 | `#003a4d` | `oklch(32.63% 0.0623 225.84)` | Gibraltar Sea | white, 12.2 to 1 |
| 13 | `#003f52` | `oklch(34.20% 0.0657 226.49)` | Maniac Mansion | white, 11.4 to 1 |
| 14 | `#004358` | `oklch(35.65% 0.0690 227.27)` | Crab Nebula | white, 10.8 to 1 |
| 15 | `#00475e` | `oklch(37.00% 0.0723 228.21)` | Loyal Blue | white, 10.2 to 1 |
| 16 | `#034a63` | `oklch(38.25% 0.0745 229.33)` | Stegadon Scale Green | white, 9.7 to 1 |
| 17 | `#0b4d67` | `oklch(39.44% 0.0743 230.81)` | Work Blue | white, 9.2 to 1 |
| 18 | `#14506a` | `oklch(40.57% 0.0738 232.63)` | Hanada Blue | white, 8.8 to 1 |
| 19 | `#1b526e` | `oklch(41.66% 0.0731 234.87)` | Midnight Sonata | white, 8.4 to 1 |
| 20 | `#225472` | `oklch(42.72% 0.0725 237.58)` | Midnight Sonata | white, 8 to 1 |
| 21 | `#295776` | `oklch(43.78% 0.0719 240.82)` | Queen of the Night | white, 7.7 to 1 |
| 22 | `#30597a` | `oklch(44.84% 0.0715 244.70)` | Tidal Wave | white, 7.4 to 1 |
| 23 | `#375b7e` | `oklch(45.91% 0.0710 249.72)` | Matisse | white, 7.1 to 1 |
| 24 | `#405c82` | `oklch(46.98% 0.0702 255.80)` | Optimum Blue | white, 6.8 to 1 |
| 25 | `#495d85` | `oklch(48.02% 0.0692 262.63)` | Indigo Navy Blue | white, 6.5 to 1 |
| 26 | `#515f88` | `oklch(49.03% 0.0681 269.92)` | Karmic Grape | white, 6.3 to 1 |
| 27 | `#5a6089` | `oklch(49.98% 0.0669 277.37)` | Karmic Grape | white, 6 to 1 |
| 28 | `#61618a` | `oklch(50.88% 0.0657 284.69)` | Majestic Purple | white, 5.8 to 1 |
| 29 | `#68618b` | `oklch(51.69% 0.0645 291.58)` | Majestic Purple | white, 5.6 to 1 |
| 30 | `#6e628a` | `oklch(52.42% 0.0635 297.74)` | Posy Purple | white, 5.5 to 1 |
| 31 | `#73638a` | `oklch(53.04% 0.0626 302.89)` | Posy Purple | white, 5.3 to 1 |
| 32 | `#77648a` | `oklch(53.54% 0.0620 306.71)` | Posy Purple | white, 5.2 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #020202 0.0%, #030304 3.2%, #030608 6.5%, #030a0e 9.7%, #031016 12.9%, #02161e 16.1%, #011d27 19.4%, #002430 22.6%, #002a38 25.8%, #00303f 29.0%, #003646 32.3%, #003a4d 35.5%, #003f52 38.7%, #004358 41.9%, #00475e 45.2%, #034a63 48.4%, #0b4d67 51.6%, #14506a 54.8%, #1b526e 58.1%, #225472 61.3%, #295776 64.5%, #30597a 67.7%, #375b7e 71.0%, #405c82 74.2%, #495d85 77.4%, #515f88 80.6%, #5a6089 83.9%, #61618a 87.1%, #68618b 90.3%, #6e628a 93.5%, #73638a 96.8%, #77648a 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(8.66% 0.0000 89.88) 0.0%, oklch(10.01% 0.0041 230.22) 3.2%, oklch(11.79% 0.0098 229.58) 6.5%, oklch(13.92% 0.0166 228.78) 9.7%, oklch(16.29% 0.0241 227.90) 12.9%, oklch(18.83% 0.0321 227.00) 16.1%, oklch(21.45% 0.0402 226.18) 19.4%, oklch(24.07% 0.0459 225.71) 22.6%, oklch(26.57% 0.0504 225.21) 25.8%, oklch(28.88% 0.0547 225.04) 29.0%, oklch(30.91% 0.0587 225.26) 32.3%, oklch(32.63% 0.0623 225.84) 35.5%, oklch(34.20% 0.0657 226.49) 38.7%, oklch(35.65% 0.0690 227.27) 41.9%, oklch(37.00% 0.0723 228.21) 45.2%, oklch(38.25% 0.0745 229.33) 48.4%, oklch(39.44% 0.0743 230.81) 51.6%, oklch(40.57% 0.0738 232.63) 54.8%, oklch(41.66% 0.0731 234.87) 58.1%, oklch(42.72% 0.0725 237.58) 61.3%, oklch(43.78% 0.0719 240.82) 64.5%, oklch(44.84% 0.0715 244.70) 67.7%, oklch(45.91% 0.0710 249.72) 71.0%, oklch(46.98% 0.0702 255.80) 74.2%, oklch(48.02% 0.0692 262.63) 77.4%, oklch(49.03% 0.0681 269.92) 80.6%, oklch(49.98% 0.0669 277.37) 83.9%, oklch(50.88% 0.0657 284.69) 87.1%, oklch(51.69% 0.0645 291.58) 90.3%, oklch(52.42% 0.0635 297.74) 93.5%, oklch(53.04% 0.0626 302.89) 96.8%, oklch(53.54% 0.0620 306.71) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.087 | 0 | 230.6 |
| 2 | 0.315 | 0.068 | 225.3 |
| 3 | 0.445 | 0.072 | 243.3 |
| 4 | 0.535 | 0.062 | 306.7 |

## In these collections

- [Dark multicolor gradients](https://grabient.com/dark-multicolor-gradients)
- [Muted gradients](https://grabient.com/muted-gradients)
- [Moody gradients](https://grabient.com/moody-gradients)
- [Dark muted gradients](https://grabient.com/dark-muted-gradients)

## Other forms

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