# Navy and ice blue radial glow

A deep navy center expands through royal blue, bright cyan-blue, and sky blue into pale icy blue at the outer edge. The radial gradient creates a dark focal core surrounded by increasingly light color. It suits blue website hero sections, technology presentations, digital product backgrounds, and cool atmospheric promotional graphics.

- Also called: Monochrome navy, blue and light blue radial gradient
- Seed: `kUNR29Pk8_1-yvD5CUBg`
- Page: https://grabient.com/kUNR29Pk8_1-yvD5CUBg?style=radialGradient&steps=24&angle=0
- Drawn as: radial gradient, 24 steps, 0 degrees
- Kinds: dark to light, vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 15.5 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 | `#0f172a` | `oklch(20.87% 0.0400 265.78)` | Sambucus | white, 17.8 to 1 |
| 2 | `#111c38` | `oklch(23.15% 0.0563 265.92)` | Nightwalker | white, 16.9 to 1 |
| 3 | `#12214b` | `oklch(26.21% 0.0801 266.35)` | Dark Eclipse | white, 15.6 to 1 |
| 4 | `#152763` | `oklch(29.85% 0.1086 266.87)` | Schiava Blue | white, 14 to 1 |
| 5 | `#192d7e` | `oklch(33.88% 0.1388 267.29)` | Below the Surface | white, 12.2 to 1 |
| 6 | `#1d349a` | `oklch(38.11% 0.1678 267.40)` | North Star Blue | white, 10.4 to 1 |
| 7 | `#203cb5` | `oklch(42.33% 0.1928 267.01)` | Persian Blue | white, 8.8 to 1 |
| 8 | `#2146cc` | `oklch(46.35% 0.2109 265.93)` | Blue Blue | white, 7.4 to 1 |
| 9 | `#1c52dd` | `oklch(50.00% 0.2194 263.92)` | Frosted Blueberries | white, 6.3 to 1 |
| 10 | `#0861e9` | `oklch(53.58% 0.2197 260.58)` | Old Gungeon Red | white, 5.3 to 1 |
| 11 | `#0073e8` | `oklch(57.17% 0.1966 256.19)` | Níu Zǎi Sè Denim | black, 4.6 to 1 |
| 12 | `#0084e7` | `oklch(60.74% 0.1774 251.16)` | Blue Cola | black, 5.4 to 1 |
| 13 | `#0093ea` | `oklch(64.25% 0.1651 245.96)` | Pervenche | black, 6.3 to 1 |
| 14 | `#00a1ee` | `oklch(67.69% 0.1578 241.02)` | Button Blue | black, 7.3 to 1 |
| 15 | `#00aef5` | `oklch(71.00% 0.1546 236.80)` | Democrat | black, 8.3 to 1 |
| 16 | `#2db9f7` | `oklch(74.18% 0.1435 233.71)` | Zima Blue | black, 9.3 to 1 |
| 17 | `#4cc3f9` | `oklch(77.24% 0.1301 232.10)` | Shovel Knight | black, 10.4 to 1 |
| 18 | `#69ccfc` | `oklch(80.35% 0.1146 231.63)` | Skyan | black, 11.6 to 1 |
| 19 | `#84d4fd` | `oklch(83.44% 0.0975 232.00)` | Kul Sharif Blue | black, 12.8 to 1 |
| 20 | `#9ddcff` | `oklch(86.41% 0.0800 232.96)` | Columbia Blue | black, 14.1 to 1 |
| 21 | `#b3e3ff` | `oklch(89.17% 0.0626 234.22)` | Frozen Landscape | black, 15.3 to 1 |
| 22 | `#c6e9ff` | `oklch(91.63% 0.0473 235.53)` | Blue Java Banana | black, 16.5 to 1 |
| 23 | `#d5eeff` | `oklch(93.69% 0.0343 236.64)` | Ice Castle | black, 17.5 to 1 |
| 24 | `#e1f2fe` | `oklch(95.28% 0.0248 237.25)` | Wizard White | black, 18.3 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #0f172a 0.0%, #111c38 4.3%, #12214b 8.7%, #152763 13.0%, #192d7e 17.4%, #1d349a 21.7%, #203cb5 26.1%, #2146cc 30.4%, #1c52dd 34.8%, #0861e9 39.1%, #0073e8 43.5%, #0084e7 47.8%, #0093ea 52.2%, #00a1ee 56.5%, #00aef5 60.9%, #2db9f7 65.2%, #4cc3f9 69.6%, #69ccfc 73.9%, #84d4fd 78.3%, #9ddcff 82.6%, #b3e3ff 87.0%, #c6e9ff 91.3%, #d5eeff 95.7%, #e1f2fe 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(20.87% 0.0400 265.78) 0.0%, oklch(23.15% 0.0563 265.92) 4.3%, oklch(26.21% 0.0801 266.35) 8.7%, oklch(29.85% 0.1086 266.87) 13.0%, oklch(33.88% 0.1388 267.29) 17.4%, oklch(38.11% 0.1678 267.40) 21.7%, oklch(42.33% 0.1928 267.01) 26.1%, oklch(46.35% 0.2109 265.93) 30.4%, oklch(50.00% 0.2194 263.92) 34.8%, oklch(53.58% 0.2197 260.58) 39.1%, oklch(57.17% 0.1966 256.19) 43.5%, oklch(60.74% 0.1774 251.16) 47.8%, oklch(64.25% 0.1651 245.96) 52.2%, oklch(67.69% 0.1578 241.02) 56.5%, oklch(71.00% 0.1546 236.80) 60.9%, oklch(74.18% 0.1435 233.71) 65.2%, oklch(77.24% 0.1301 232.10) 69.6%, oklch(80.35% 0.1146 231.63) 73.9%, oklch(83.44% 0.0975 232.00) 78.3%, oklch(86.41% 0.0800 232.96) 82.6%, oklch(89.17% 0.0626 234.22) 87.0%, oklch(91.63% 0.0473 235.53) 91.3%, oklch(93.69% 0.0343 236.64) 95.7%, oklch(95.28% 0.0248 237.25) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.209 | 0.04 | 265.8 |
| 2 | 0.488 | 0.218 | 264.7 |
| 3 | 0.752 | 0.139 | 233 |
| 4 | 0.953 | 0.025 | 237.2 |

## In these collections

- [Hero section gradients](https://grabient.com/hero-section-gradients)

## Other forms

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