# Monochrome light blue to navy radial gradient

Monochrome light blue to navy radial gradient with 32 colors: #e2f2fe, #ddeffd, #d5eafb, #cde6fa, #c3e0f8, #b9daf6, #afd4f4, #a4cdf1, #9ac6ee, #90beeb, #87b7e7, #7fb0e3, #77a8de, #6f9fd9, #6797d3, #608ecd, #5985c6, #537cc0, #4d73b9, #486bb2, #4463ac, #415ba5, #3e539e, #3b4c97, #39448f, #363d88, #343680, #323079, #302a72, #2e256c, #2c2167, #2a1d63. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kU8hGr4CBA78swelqsIg`
- Page: https://grabient.com/kU8hGr4CBA78swelqsIg?style=radialGradient&steps=32
- Drawn as: radial gradient, 32 steps, 90 degrees
- Kinds: light to dark, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 12.6 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 | `#e2f2fe` | `oklch(95.28% 0.0234 241.17)` | Wizard White | black, 18.3 to 1 |
| 2 | `#ddeffd` | `oklch(94.17% 0.0273 241.62)` | Calcareous Sinter | black, 17.7 to 1 |
| 3 | `#d5eafb` | `oklch(92.80% 0.0323 242.15)` | Cloudless | black, 17 to 1 |
| 4 | `#cde6fa` | `oklch(91.19% 0.0384 242.76)` | New Heights | black, 16.2 to 1 |
| 5 | `#c3e0f8` | `oklch(89.38% 0.0452 243.44)` | Fresh Water | black, 15.3 to 1 |
| 6 | `#b9daf6` | `oklch(87.40% 0.0524 244.21)` | Oh Boy! | black, 14.4 to 1 |
| 7 | `#afd4f4` | `oklch(85.30% 0.0599 245.05)` | Blue Rice | black, 13.5 to 1 |
| 8 | `#a4cdf1` | `oklch(83.10% 0.0673 245.98)` | Blossom Blue | black, 12.5 to 1 |
| 9 | `#9ac6ee` | `oklch(80.85% 0.0743 246.98)` | Sail to the Sea | black, 11.6 to 1 |
| 10 | `#90beeb` | `oklch(78.58% 0.0808 248.06)` | Blue Shutters | black, 10.7 to 1 |
| 11 | `#87b7e7` | `oklch(76.33% 0.0865 249.22)` | Aero | black, 9.9 to 1 |
| 12 | `#7fb0e3` | `oklch(74.08% 0.0913 250.47)` | Lucea | black, 9.1 to 1 |
| 13 | `#77a8de` | `oklch(71.69% 0.0959 251.85)` | Jordy Blue | black, 8.4 to 1 |
| 14 | `#6f9fd9` | `oklch(69.19% 0.1002 253.34)` | Blue Electress | black, 7.6 to 1 |
| 15 | `#6797d3` | `oklch(66.60% 0.1043 254.92)` | Bashful Blue | black, 6.9 to 1 |
| 16 | `#608ecd` | `oklch(63.95% 0.1080 256.57)` | Royal Regatta | black, 6.2 to 1 |
| 17 | `#5985c6` | `oklch(61.29% 0.1115 258.28)` | Havelock Blue | black, 5.5 to 1 |
| 18 | `#537cc0` | `oklch(58.65% 0.1146 260.03)` | Blue Iolite | black, 4.9 to 1 |
| 19 | `#4d73b9` | `oklch(56.05% 0.1173 261.81)` | Sinatra | white, 4.6 to 1 |
| 20 | `#486bb2` | `oklch(53.53% 0.1197 263.59)` | Azraq Blue | white, 5.2 to 1 |
| 21 | `#4463ac` | `oklch(51.13% 0.1216 265.37)` | Kakitsubata Blue | white, 5.8 to 1 |
| 22 | `#415ba5` | `oklch(48.86% 0.1231 267.13)` | Blue Dahlia | white, 6.4 to 1 |
| 23 | `#3e539e` | `oklch(46.58% 0.1238 269.02)` | Dazzling Blue | white, 7.1 to 1 |
| 24 | `#3b4c97` | `oklch(44.28% 0.1240 271.06)` | Deep Ultramarine | white, 7.8 to 1 |
| 25 | `#39448f` | `oklch(41.98% 0.1236 273.18)` | Spectrum Blue | white, 8.7 to 1 |
| 26 | `#363d88` | `oklch(39.74% 0.1229 275.33)` | Clematis Blue | white, 9.6 to 1 |
| 27 | `#343680` | `oklch(37.59% 0.1219 277.45)` | Ballpoint Indigo | white, 10.5 to 1 |
| 28 | `#323079` | `oklch(35.57% 0.1207 279.48)` | Ballpoint Indigo | white, 11.4 to 1 |
| 29 | `#302a72` | `oklch(33.71% 0.1195 281.36)` | Blue Rose | white, 12.3 to 1 |
| 30 | `#2e256c` | `oklch(32.06% 0.1184 283.04)` | Indie Go | white, 13.1 to 1 |
| 31 | `#2c2167` | `oklch(30.65% 0.1176 284.46)` | Indie Go | white, 13.8 to 1 |
| 32 | `#2a1d63` | `oklch(29.53% 0.1171 285.56)` | Night Fog | white, 14.4 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #e2f2fe 0.0%, #ddeffd 3.2%, #d5eafb 6.5%, #cde6fa 9.7%, #c3e0f8 12.9%, #b9daf6 16.1%, #afd4f4 19.4%, #a4cdf1 22.6%, #9ac6ee 25.8%, #90beeb 29.0%, #87b7e7 32.3%, #7fb0e3 35.5%, #77a8de 38.7%, #6f9fd9 41.9%, #6797d3 45.2%, #608ecd 48.4%, #5985c6 51.6%, #537cc0 54.8%, #4d73b9 58.1%, #486bb2 61.3%, #4463ac 64.5%, #415ba5 67.7%, #3e539e 71.0%, #3b4c97 74.2%, #39448f 77.4%, #363d88 80.6%, #343680 83.9%, #323079 87.1%, #302a72 90.3%, #2e256c 93.5%, #2c2167 96.8%, #2a1d63 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(95.28% 0.0234 241.17) 0.0%, oklch(94.17% 0.0273 241.62) 3.2%, oklch(92.80% 0.0323 242.15) 6.5%, oklch(91.19% 0.0384 242.76) 9.7%, oklch(89.38% 0.0452 243.44) 12.9%, oklch(87.40% 0.0524 244.21) 16.1%, oklch(85.30% 0.0599 245.05) 19.4%, oklch(83.10% 0.0673 245.98) 22.6%, oklch(80.85% 0.0743 246.98) 25.8%, oklch(78.58% 0.0808 248.06) 29.0%, oklch(76.33% 0.0865 249.22) 32.3%, oklch(74.08% 0.0913 250.47) 35.5%, oklch(71.69% 0.0959 251.85) 38.7%, oklch(69.19% 0.1002 253.34) 41.9%, oklch(66.60% 0.1043 254.92) 45.2%, oklch(63.95% 0.1080 256.57) 48.4%, oklch(61.29% 0.1115 258.28) 51.6%, oklch(58.65% 0.1146 260.03) 54.8%, oklch(56.05% 0.1173 261.81) 58.1%, oklch(53.53% 0.1197 263.59) 61.3%, oklch(51.13% 0.1216 265.37) 64.5%, oklch(48.86% 0.1231 267.13) 67.7%, oklch(46.58% 0.1238 269.02) 71.0%, oklch(44.28% 0.1240 271.06) 74.2%, oklch(41.98% 0.1236 273.18) 77.4%, oklch(39.74% 0.1229 275.33) 80.6%, oklch(37.59% 0.1219 277.45) 83.9%, oklch(35.57% 0.1207 279.48) 87.1%, oklch(33.71% 0.1195 281.36) 90.3%, oklch(32.06% 0.1184 283.04) 93.5%, oklch(30.65% 0.1176 284.46) 96.8%, oklch(29.53% 0.1171 285.56) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.953 | 0.023 | 241.2 |
| 2 | 0.756 | 0.088 | 249.6 |
| 3 | 0.496 | 0.123 | 266.5 |
| 4 | 0.295 | 0.117 | 285.6 |

## In these collections

- [Sky](https://grabient.com/sky)

## Other forms

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