# Black, navy, teal and blue radial gradient

Black, navy, teal and blue radial gradient with 32 colors: #020617, #03081a, #040b1d, #050d20, #061125, #09162b, #0c1d34, #10273f, #12334e, #104662, #005e7a, #007b8f, #0099a2, #00b8b2, #00d6bb, #2eedbf, #5afbc2, #9bffce, #c7ffdd, #dfffea, #ecfff2, #eefff4, #e6fff1, #d1ffea, #baf8e5, #9aebdf, #6cd8dc, #32c1dd, #00a5db, #0089d8, #1a6ddb, #3358d5. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWIR28JhW9-65tp5lz_QUfLo`
- Page: https://grabient.com/kWIR28JhW9-65tp5lz_QUfLo?style=radialGradient&steps=32&angle=0
- Drawn as: radial gradient, 32 steps, 0 degrees
- Kinds: light center, vivid, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 19.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 | `#020617` | `oklch(12.99% 0.0400 264.38)` | Melanophobia | white, 20.1 to 1 |
| 2 | `#03081a` | `oklch(14.06% 0.0409 263.47)` | Melanophobia | white, 19.9 to 1 |
| 3 | `#040b1d` | `oklch(15.17% 0.0416 262.75)` | Melanophobia | white, 19.6 to 1 |
| 4 | `#050d20` | `oklch(16.47% 0.0424 261.92)` | Void | white, 19.3 to 1 |
| 5 | `#061125` | `oklch(18.12% 0.0436 260.69)` | Kuretake Black Manga | white, 18.8 to 1 |
| 6 | `#09162b` | `oklch(20.26% 0.0457 258.76)` | Liberty Blue | white, 18 to 1 |
| 7 | `#0c1d34` | `oklch(23.05% 0.0491 255.84)` | Trapped Darkness | white, 16.8 to 1 |
| 8 | `#10273f` | `oklch(26.63% 0.0541 251.64)` | Cool Balaclavas Are Forever | white, 15.2 to 1 |
| 9 | `#12334e` | `oklch(31.18% 0.0613 245.81)` | Sea of Stars | white, 13 to 1 |
| 10 | `#104662` | `oklch(37.38% 0.0728 237.37)` | Stegadon Scale Green | white, 10.1 to 1 |
| 11 | `#005e7a` | `oklch(45.01% 0.0867 226.71)` | Blue Edge | white, 7.2 to 1 |
| 12 | `#007b8f` | `oklch(53.50% 0.0943 214.66)` | Jade Shard | white, 4.9 to 1 |
| 13 | `#0099a2` | `oklch(62.27% 0.1060 202.18)` | Island Dream | black, 6.1 to 1 |
| 14 | `#00b8b2` | `oklch(70.76% 0.1221 190.19)` | Jade Gravel | black, 8.5 to 1 |
| 15 | `#00d6bb` | `oklch(78.40% 0.1427 179.57)` | Channel Marker Green | black, 11.3 to 1 |
| 16 | `#2eedbf` | `oklch(84.61% 0.1574 171.24)` | Aquamarine | black, 13.9 to 1 |
| 17 | `#5afbc2` | `oklch(89.04% 0.1574 165.74)` | Rare Wind | black, 16 to 1 |
| 18 | `#9bffce` | `oklch(92.53% 0.1168 161.57)` | Neo Mint | black, 17.5 to 1 |
| 19 | `#c7ffdd` | `oklch(95.26% 0.0727 158.55)` | Mint Zest | black, 18.7 to 1 |
| 20 | `#dfffea` | `oklch(97.18% 0.0427 156.81)` | Crystal Glass | black, 19.6 to 1 |
| 21 | `#ecfff2` | `oklch(98.26% 0.0259 156.52)` | Azure Mist | black, 20.1 to 1 |
| 22 | `#eefff4` | `oklch(98.49% 0.0223 157.79)` | Azure Mist | black, 20.2 to 1 |
| 23 | `#e6fff1` | `oklch(97.81% 0.0319 160.79)` | Mint Chiffon | black, 19.9 to 1 |
| 24 | `#d1ffea` | `oklch(96.21% 0.0549 165.64)` | Mint Coffee | black, 19.1 to 1 |
| 25 | `#baf8e5` | `oklch(93.27% 0.0679 173.22)` | Shallow End | black, 17.6 to 1 |
| 26 | `#9aebdf` | `oklch(88.34% 0.0807 184.75)` | Oasis Stream | black, 15.2 to 1 |
| 27 | `#6cd8dc` | `oklch(82.00% 0.0994 199.02)` | Aquamarine Blue | black, 12.4 to 1 |
| 28 | `#32c1dd` | `oklch(74.88% 0.1214 214.75)` | Caribbean Blue | black, 9.7 to 1 |
| 29 | `#00a5db` | `oklch(67.61% 0.1357 230.66)` | Vanadyl Blue | black, 7.3 to 1 |
| 30 | `#0089d8` | `oklch(60.82% 0.1545 245.44)` | Blue Cola | black, 5.5 to 1 |
| 31 | `#1a6ddb` | `oklch(55.13% 0.1847 257.80)` | Flickr Blue | white, 4.9 to 1 |
| 32 | `#3358d5` | `oklch(51.18% 0.1970 266.49)` | Bnei Brak Bay | white, 5.9 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #020617 0.0%, #03081a 3.2%, #040b1d 6.5%, #050d20 9.7%, #061125 12.9%, #09162b 16.1%, #0c1d34 19.4%, #10273f 22.6%, #12334e 25.8%, #104662 29.0%, #005e7a 32.3%, #007b8f 35.5%, #0099a2 38.7%, #00b8b2 41.9%, #00d6bb 45.2%, #2eedbf 48.4%, #5afbc2 51.6%, #9bffce 54.8%, #c7ffdd 58.1%, #dfffea 61.3%, #ecfff2 64.5%, #eefff4 67.7%, #e6fff1 71.0%, #d1ffea 74.2%, #baf8e5 77.4%, #9aebdf 80.6%, #6cd8dc 83.9%, #32c1dd 87.1%, #00a5db 90.3%, #0089d8 93.5%, #1a6ddb 96.8%, #3358d5 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(12.99% 0.0400 264.38) 0.0%, oklch(14.06% 0.0409 263.47) 3.2%, oklch(15.17% 0.0416 262.75) 6.5%, oklch(16.47% 0.0424 261.92) 9.7%, oklch(18.12% 0.0436 260.69) 12.9%, oklch(20.26% 0.0457 258.76) 16.1%, oklch(23.05% 0.0491 255.84) 19.4%, oklch(26.63% 0.0541 251.64) 22.6%, oklch(31.18% 0.0613 245.81) 25.8%, oklch(37.38% 0.0728 237.37) 29.0%, oklch(45.01% 0.0867 226.71) 32.3%, oklch(53.50% 0.0943 214.66) 35.5%, oklch(62.27% 0.1060 202.18) 38.7%, oklch(70.76% 0.1221 190.19) 41.9%, oklch(78.40% 0.1427 179.57) 45.2%, oklch(84.61% 0.1574 171.24) 48.4%, oklch(89.04% 0.1574 165.74) 51.6%, oklch(92.53% 0.1168 161.57) 54.8%, oklch(95.26% 0.0727 158.55) 58.1%, oklch(97.18% 0.0427 156.81) 61.3%, oklch(98.26% 0.0259 156.52) 64.5%, oklch(98.49% 0.0223 157.79) 67.7%, oklch(97.81% 0.0319 160.79) 71.0%, oklch(96.21% 0.0549 165.64) 74.2%, oklch(93.27% 0.0679 173.22) 77.4%, oklch(88.34% 0.0807 184.75) 80.6%, oklch(82.00% 0.0994 199.02) 83.9%, oklch(74.88% 0.1214 214.75) 87.1%, oklch(67.61% 0.1357 230.66) 90.3%, oklch(60.82% 0.1545 245.44) 93.5%, oklch(55.13% 0.1847 257.80) 96.8%, oklch(51.18% 0.1970 266.49) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.13 | 0.04 | 264.4 |
| 2 | 0.299 | 0.059 | 247.5 |
| 3 | 0.87 | 0.158 | 168.2 |
| 4 | 0.957 | 0.063 | 167.2 |
| 5 | 0.512 | 0.197 | 266.5 |

## In these collections

- [Neon gradients](https://grabient.com/neon-gradients)
- [Aurora gradients](https://grabient.com/aurora-gradients)

## Other forms

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