# Cool light blue to navy angular gradient

Cool light blue to navy angular gradient with 48 colors: #7db9d0, #7ab7d0, #76b4cf, #72b2ce, #6dafcd, #68accc, #62a8cb, #5da5ca, #57a1c9, #519dc7, #4b99c6, #4694c4, #4090c3, #3b8bc1, #3787bf, #3383bd, #2f7ebb, #2c7ab9, #2876b6, #2571b4, #226cb2, #1f68af, #1c63ac, #1b5eaa, #1959a6, #1855a3, #1850a0, #184b9c, #184698, #194294, #193d8f, #1a398a, #1b3485, #1b307f, #1c2c78, #1c2771, #1b236a, #1b2062, #1a1c5a, #191953, #17154b, #161344, #14103e, #120e37, #100c32, #0f0a2d, #0e0829, #0c0726. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUvzOgSavCS8zQkUlkJA`
- Page: https://grabient.com/kUvzOgSavCS8zQkUlkJA?style=angularGradient&steps=48&angle=225
- Drawn as: angular gradient, 48 steps, 225 degrees
- Kinds: light to dark, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 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 | `#7db9d0` | `oklch(75.20% 0.0703 225.00)` | Petit Four | black, 9.6 to 1 |
| 2 | `#7ab7d0` | `oklch(74.58% 0.0721 225.72)` | Blue Chrysocolla | black, 9.4 to 1 |
| 3 | `#76b4cf` | `oklch(73.85% 0.0744 226.59)` | Alpine Sky | black, 9.2 to 1 |
| 4 | `#72b2ce` | `oklch(73.02% 0.0771 227.59)` | Aspara | black, 8.9 to 1 |
| 5 | `#6dafcd` | `oklch(72.09% 0.0801 228.70)` | Imrik Blue | black, 8.6 to 1 |
| 6 | `#68accc` | `oklch(71.07% 0.0834 229.92)` | Blue Topaz | black, 8.3 to 1 |
| 7 | `#62a8cb` | `oklch(69.99% 0.0870 231.23)` | Ethereal Blue | black, 8 to 1 |
| 8 | `#5da5ca` | `oklch(68.84% 0.0906 232.60)` | Ethereal Blue | black, 7.6 to 1 |
| 9 | `#57a1c9` | `oklch(67.64% 0.0944 234.03)` | Blue Grotto | black, 7.3 to 1 |
| 10 | `#519dc7` | `oklch(66.40% 0.0982 235.49)` | Blue Iguana | black, 6.9 to 1 |
| 11 | `#4b99c6` | `oklch(65.12% 0.1020 236.98)` | Mountain Bluebird | black, 6.6 to 1 |
| 12 | `#4694c4` | `oklch(63.83% 0.1057 238.47)` | Opalescent | black, 6.3 to 1 |
| 13 | `#4090c3` | `oklch(62.53% 0.1092 239.96)` | Quiet Night | black, 5.9 to 1 |
| 14 | `#3b8bc1` | `oklch(61.24% 0.1125 241.42)` | Pat-A-Pep | black, 5.6 to 1 |
| 15 | `#3787bf` | `oklch(59.95% 0.1156 242.84)` | Pat-A-Pep | black, 5.3 to 1 |
| 16 | `#3383bd` | `oklch(58.70% 0.1183 244.21)` | King Triton | black, 5 to 1 |
| 17 | `#2f7ebb` | `oklch(57.47% 0.1206 245.51)` | Amalfi Coast | black, 4.8 to 1 |
| 18 | `#2c7ab9` | `oklch(56.22% 0.1230 246.79)` | Haddock’s Sweater | black, 4.5 to 1 |
| 19 | `#2876b6` | `oklch(54.96% 0.1255 248.07)` | Bluish | white, 4.8 to 1 |
| 20 | `#2571b4` | `oklch(53.67% 0.1280 249.35)` | Cobalt Glaze | white, 5.1 to 1 |
| 21 | `#226cb2` | `oklch(52.36% 0.1305 250.63)` | Mid Blue | white, 5.4 to 1 |
| 22 | `#1f68af` | `oklch(51.03% 0.1329 251.91)` | Barbados Blue | white, 5.7 to 1 |
| 23 | `#1c63ac` | `oklch(49.69% 0.1352 253.20)` | Rainbow Bright | white, 6.1 to 1 |
| 24 | `#1b5eaa` | `oklch(48.34% 0.1373 254.48)` | Greek Flag Blue | white, 6.4 to 1 |
| 25 | `#1959a6` | `oklch(46.98% 0.1392 255.76)` | Miracle at Wrigley | white, 6.9 to 1 |
| 26 | `#1855a3` | `oklch(45.62% 0.1408 257.04)` | Princess Blue | white, 7.3 to 1 |
| 27 | `#1850a0` | `oklch(44.25% 0.1421 258.32)` | Ruri Blue | white, 7.8 to 1 |
| 28 | `#184b9c` | `oklch(42.88% 0.1429 259.60)` | Sea of Tears | white, 8.3 to 1 |
| 29 | `#184698` | `oklch(41.51% 0.1433 260.88)` | Space Explorer | white, 8.8 to 1 |
| 30 | `#194294` | `oklch(40.15% 0.1432 262.17)` | Space Explorer | white, 9.3 to 1 |
| 31 | `#193d8f` | `oklch(38.80% 0.1425 263.45)` | Navy Seal | white, 9.9 to 1 |
| 32 | `#1a398a` | `oklch(37.45% 0.1411 264.73)` | Mystery Oceans | white, 10.5 to 1 |
| 33 | `#1b3485` | `oklch(36.10% 0.1390 266.03)` | Bavarian Blue | white, 11.1 to 1 |
| 34 | `#1b307f` | `oklch(34.68% 0.1359 267.39)` | Bavarian Blue | white, 11.8 to 1 |
| 35 | `#1c2c78` | `oklch(33.21% 0.1319 268.82)` | St. Patrick’s Blue | white, 12.5 to 1 |
| 36 | `#1c2771` | `oklch(31.69% 0.1271 270.28)` | Impression of Obscurity | white, 13.2 to 1 |
| 37 | `#1b236a` | `oklch(30.14% 0.1216 271.76)` | Intergalactic Cowboy | white, 14 to 1 |
| 38 | `#1b2062` | `oklch(28.59% 0.1157 273.26)` | Pure Midnight | white, 14.7 to 1 |
| 39 | `#1a1c5a` | `oklch(27.04% 0.1094 274.74)` | Fibonacci Blue | white, 15.4 to 1 |
| 40 | `#191953` | `oklch(25.52% 0.1030 276.21)` | Tetsu-Kon Blue | white, 16.1 to 1 |
| 41 | `#17154b` | `oklch(24.04% 0.0964 277.64)` | Tetsu-Kon Blue | white, 16.7 to 1 |
| 42 | `#161344` | `oklch(22.61% 0.0900 279.01)` | Deadly Depths | white, 17.3 to 1 |
| 43 | `#14103e` | `oklch(21.26% 0.0837 280.31)` | Deadly Depths | white, 17.9 to 1 |
| 44 | `#120e37` | `oklch(19.99% 0.0778 281.53)` | Grim Reaper | white, 18.3 to 1 |
| 45 | `#100c32` | `oklch(18.83% 0.0724 282.65)` | Spanish Roast | white, 18.7 to 1 |
| 46 | `#0f0a2d` | `oklch(17.79% 0.0677 283.65)` | Mysterious Depths | white, 19 to 1 |
| 47 | `#0e0829` | `oklch(16.89% 0.0637 284.51)` | Mysterious Depths | white, 19.3 to 1 |
| 48 | `#0c0726` | `oklch(16.14% 0.0606 285.23)` | Mysterious Depths | white, 19.5 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #7db9d0 0.0%, #7ab7d0 2.1%, #76b4cf 4.3%, #72b2ce 6.4%, #6dafcd 8.5%, #68accc 10.6%, #62a8cb 12.8%, #5da5ca 14.9%, #57a1c9 17.0%, #519dc7 19.1%, #4b99c6 21.3%, #4694c4 23.4%, #4090c3 25.5%, #3b8bc1 27.7%, #3787bf 29.8%, #3383bd 31.9%, #2f7ebb 34.0%, #2c7ab9 36.2%, #2876b6 38.3%, #2571b4 40.4%, #226cb2 42.6%, #1f68af 44.7%, #1c63ac 46.8%, #1b5eaa 48.9%, #1959a6 51.1%, #1855a3 53.2%, #1850a0 55.3%, #184b9c 57.4%, #184698 59.6%, #194294 61.7%, #193d8f 63.8%, #1a398a 66.0%, #1b3485 68.1%, #1b307f 70.2%, #1c2c78 72.3%, #1c2771 74.5%, #1b236a 76.6%, #1b2062 78.7%, #1a1c5a 80.9%, #191953 83.0%, #17154b 85.1%, #161344 87.2%, #14103e 89.4%, #120e37 91.5%, #100c32 93.6%, #0f0a2d 95.7%, #0e0829 97.9%, #0c0726 100.0%);
background: conic-gradient(from 225deg in oklch, oklch(75.20% 0.0703 225.00) 0.0%, oklch(74.58% 0.0721 225.72) 2.1%, oklch(73.85% 0.0744 226.59) 4.3%, oklch(73.02% 0.0771 227.59) 6.4%, oklch(72.09% 0.0801 228.70) 8.5%, oklch(71.07% 0.0834 229.92) 10.6%, oklch(69.99% 0.0870 231.23) 12.8%, oklch(68.84% 0.0906 232.60) 14.9%, oklch(67.64% 0.0944 234.03) 17.0%, oklch(66.40% 0.0982 235.49) 19.1%, oklch(65.12% 0.1020 236.98) 21.3%, oklch(63.83% 0.1057 238.47) 23.4%, oklch(62.53% 0.1092 239.96) 25.5%, oklch(61.24% 0.1125 241.42) 27.7%, oklch(59.95% 0.1156 242.84) 29.8%, oklch(58.70% 0.1183 244.21) 31.9%, oklch(57.47% 0.1206 245.51) 34.0%, oklch(56.22% 0.1230 246.79) 36.2%, oklch(54.96% 0.1255 248.07) 38.3%, oklch(53.67% 0.1280 249.35) 40.4%, oklch(52.36% 0.1305 250.63) 42.6%, oklch(51.03% 0.1329 251.91) 44.7%, oklch(49.69% 0.1352 253.20) 46.8%, oklch(48.34% 0.1373 254.48) 48.9%, oklch(46.98% 0.1392 255.76) 51.1%, oklch(45.62% 0.1408 257.04) 53.2%, oklch(44.25% 0.1421 258.32) 55.3%, oklch(42.88% 0.1429 259.60) 57.4%, oklch(41.51% 0.1433 260.88) 59.6%, oklch(40.15% 0.1432 262.17) 61.7%, oklch(38.80% 0.1425 263.45) 63.8%, oklch(37.45% 0.1411 264.73) 66.0%, oklch(36.10% 0.1390 266.03) 68.1%, oklch(34.68% 0.1359 267.39) 70.2%, oklch(33.21% 0.1319 268.82) 72.3%, oklch(31.69% 0.1271 270.28) 74.5%, oklch(30.14% 0.1216 271.76) 76.6%, oklch(28.59% 0.1157 273.26) 78.7%, oklch(27.04% 0.1094 274.74) 80.9%, oklch(25.52% 0.1030 276.21) 83.0%, oklch(24.04% 0.0964 277.64) 85.1%, oklch(22.61% 0.0900 279.01) 87.2%, oklch(21.26% 0.0837 280.31) 89.4%, oklch(19.99% 0.0778 281.53) 91.5%, oklch(18.83% 0.0724 282.65) 93.6%, oklch(17.79% 0.0677 283.65) 95.7%, oklch(16.89% 0.0637 284.51) 97.9%, oklch(16.14% 0.0606 285.23) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.752 | 0.07 | 225 |
| 2 | 0.579 | 0.12 | 245.1 |
| 3 | 0.37 | 0.141 | 265.2 |
| 4 | 0.161 | 0.061 | 285.2 |

## In these collections

- [Dusk gradients](https://grabient.com/dusk-gradients)

## Other forms

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