# Ocean blue coral rings

Navy, blue, lavender and pink linear gradient with 40 colors: #012b49, #042c4a, #082d4a, #0e2e4b, #132e4c, #17304c, #1c314d, #20324e, #243450, #283651, #2b3853, #2f3b56, #323e59, #35415d, #384562, #3a4a69, #3c4f70, #3e5677, #3e5c7f, #3e6488, #3e6b90, #3d7299, #3c79a1, #3c80a9, #3d85b2, #418abb, #498dc4, #558ecd, #668dd6, #7a8adc, #9185dd, #a780d9, #bd7ace, #d075bc, #df71a6, #ea708d, #f17173, #f37559, #f27a40, #f17f29. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Navy, blue, lavender and pink linear gradient
- Seed: `kURzOusBLCc8nvXavNOg`
- Page: https://grabient.com/kURzOusBLCc8nvXavNOg?steps=40&angle=135
- Drawn as: linear gradient, 40 steps, 135 degrees
- Kinds: dark to light, cool
- Hues: two-hue
- Contrast of its darkest and lightest colors: 5.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 | `#012b49` | `oklch(27.95% 0.0703 245.39)` | Royal Blue Metallic | white, 14.5 to 1 |
| 2 | `#042c4a` | `oklch(28.35% 0.0692 246.44)` | Royal Blue Metallic | white, 14.3 to 1 |
| 3 | `#082d4a` | `oklch(28.78% 0.0676 247.90)` | Midnight Ocean | white, 14.1 to 1 |
| 4 | `#0e2e4b` | `oklch(29.25% 0.0656 249.69)` | Crow Black Blue | white, 13.9 to 1 |
| 5 | `#132e4c` | `oklch(29.78% 0.0632 251.72)` | Crow Black Blue | white, 13.7 to 1 |
| 6 | `#17304c` | `oklch(30.36% 0.0607 253.90)` | Crow Black Blue | white, 13.4 to 1 |
| 7 | `#1c314d` | `oklch(31.00% 0.0582 256.16)` | Manganese Black | white, 13.1 to 1 |
| 8 | `#20324e` | `oklch(31.71% 0.0558 258.39)` | Manganese Black | white, 12.8 to 1 |
| 9 | `#243450` | `oklch(32.50% 0.0537 260.51)` | Blue Lobelia | white, 12.4 to 1 |
| 10 | `#283651` | `oklch(33.37% 0.0519 262.45)` | Cool Air of Debonair | white, 12 to 1 |
| 11 | `#2b3853` | `oklch(34.33% 0.0506 264.10)` | Mediaeval Blue | white, 11.6 to 1 |
| 12 | `#2f3b56` | `oklch(35.38% 0.0499 265.39)` | Madison | white, 11.1 to 1 |
| 13 | `#323e59` | `oklch(36.53% 0.0500 266.23)` | Gulf Blue | white, 10.6 to 1 |
| 14 | `#35415d` | `oklch(37.80% 0.0510 266.53)` | Gulf Blue | white, 10.1 to 1 |
| 15 | `#384562` | `oklch(39.24% 0.0529 265.77)` | Diplomatic | white, 9.5 to 1 |
| 16 | `#3a4a69` | `oklch(40.90% 0.0556 263.72)` | Naval Blue | white, 8.8 to 1 |
| 17 | `#3c4f70` | `oklch(42.75% 0.0591 260.68)` | Ensign Blue | white, 8.2 to 1 |
| 18 | `#3e5677` | `oklch(44.73% 0.0631 256.97)` | Star Spangled | white, 7.5 to 1 |
| 19 | `#3e5c7f` | `oklch(46.82% 0.0676 252.91)` | Atlantic Schooner | white, 6.8 to 1 |
| 20 | `#3e6488` | `oklch(48.97% 0.0725 248.81)` | Winter Palace | white, 6.2 to 1 |
| 21 | `#3e6b90` | `oklch(51.13% 0.0777 244.98)` | Rainy Lake | white, 5.6 to 1 |
| 22 | `#3d7299` | `oklch(53.27% 0.0831 241.74)` | Phenomenon | white, 5.1 to 1 |
| 23 | `#3c79a1` | `oklch(55.35% 0.0885 239.41)` | Peninsula | white, 4.7 to 1 |
| 24 | `#3c80a9` | `oklch(57.32% 0.0939 238.29)` | Cendre Blue | black, 4.8 to 1 |
| 25 | `#3d85b2` | `oklch(59.15% 0.0992 238.71)` | Curious Blue | black, 5.2 to 1 |
| 26 | `#418abb` | `oklch(60.79% 0.1042 240.97)` | Walker Lake | black, 5.5 to 1 |
| 27 | `#498dc4` | `oklch(62.20% 0.1089 245.39)` | Azure Blue | black, 5.8 to 1 |
| 28 | `#558ecd` | `oklch(63.43% 0.1135 252.53)` | Blue Dart | black, 6.1 to 1 |
| 29 | `#668dd6` | `oklch(64.53% 0.1183 262.39)` | Livid | black, 6.3 to 1 |
| 30 | `#7a8adc` | `oklch(65.53% 0.1234 274.50)` | Tanzine | black, 6.4 to 1 |
| 31 | `#9185dd` | `oklch(66.42% 0.1286 288.37)` | Indigo Bloom | black, 6.6 to 1 |
| 32 | `#a780d9` | `oklch(67.22% 0.1338 303.51)` | Lavender Blossom | black, 6.7 to 1 |
| 33 | `#bd7ace` | `oklch(67.93% 0.1389 319.44)` | Lavender Blossom | black, 6.8 to 1 |
| 34 | `#d075bc` | `oklch(68.57% 0.1439 335.68)` | Sky Magenta | black, 6.9 to 1 |
| 35 | `#df71a6` | `oklch(69.14% 0.1487 351.74)` | Thulian Pink | black, 7 to 1 |
| 36 | `#ea708d` | `oklch(69.64% 0.1532 7.13)` | Loveland | black, 7.2 to 1 |
| 37 | `#f17173` | `oklch(70.10% 0.1573 21.37)` | Breeze of Chilli | black, 7.3 to 1 |
| 38 | `#f37559` | `oklch(70.52% 0.1610 33.98)` | Peach Echo | black, 7.5 to 1 |
| 39 | `#f27a40` | `oklch(70.90% 0.1642 44.47)` | Mandarin | black, 7.6 to 1 |
| 40 | `#f17f29` | `oklch(71.26% 0.1667 52.36)` | Iceland Poppy | black, 7.8 to 1 |

## CSS

```css
background: linear-gradient(135deg, #012b49 0.0%, #042c4a 2.6%, #082d4a 5.1%, #0e2e4b 7.7%, #132e4c 10.3%, #17304c 12.8%, #1c314d 15.4%, #20324e 17.9%, #243450 20.5%, #283651 23.1%, #2b3853 25.6%, #2f3b56 28.2%, #323e59 30.8%, #35415d 33.3%, #384562 35.9%, #3a4a69 38.5%, #3c4f70 41.0%, #3e5677 43.6%, #3e5c7f 46.2%, #3e6488 48.7%, #3e6b90 51.3%, #3d7299 53.8%, #3c79a1 56.4%, #3c80a9 59.0%, #3d85b2 61.5%, #418abb 64.1%, #498dc4 66.7%, #558ecd 69.2%, #668dd6 71.8%, #7a8adc 74.4%, #9185dd 76.9%, #a780d9 79.5%, #bd7ace 82.1%, #d075bc 84.6%, #df71a6 87.2%, #ea708d 89.7%, #f17173 92.3%, #f37559 94.9%, #f27a40 97.4%, #f17f29 100.0%);
background: linear-gradient(135deg in oklch, oklch(27.95% 0.0703 245.39) 0.0%, oklch(28.35% 0.0692 246.44) 2.6%, oklch(28.78% 0.0676 247.90) 5.1%, oklch(29.25% 0.0656 249.69) 7.7%, oklch(29.78% 0.0632 251.72) 10.3%, oklch(30.36% 0.0607 253.90) 12.8%, oklch(31.00% 0.0582 256.16) 15.4%, oklch(31.71% 0.0558 258.39) 17.9%, oklch(32.50% 0.0537 260.51) 20.5%, oklch(33.37% 0.0519 262.45) 23.1%, oklch(34.33% 0.0506 264.10) 25.6%, oklch(35.38% 0.0499 265.39) 28.2%, oklch(36.53% 0.0500 266.23) 30.8%, oklch(37.80% 0.0510 266.53) 33.3%, oklch(39.24% 0.0529 265.77) 35.9%, oklch(40.90% 0.0556 263.72) 38.5%, oklch(42.75% 0.0591 260.68) 41.0%, oklch(44.73% 0.0631 256.97) 43.6%, oklch(46.82% 0.0676 252.91) 46.2%, oklch(48.97% 0.0725 248.81) 48.7%, oklch(51.13% 0.0777 244.98) 51.3%, oklch(53.27% 0.0831 241.74) 53.8%, oklch(55.35% 0.0885 239.41) 56.4%, oklch(57.32% 0.0939 238.29) 59.0%, oklch(59.15% 0.0992 238.71) 61.5%, oklch(60.79% 0.1042 240.97) 64.1%, oklch(62.20% 0.1089 245.39) 66.7%, oklch(63.43% 0.1135 252.53) 69.2%, oklch(64.53% 0.1183 262.39) 71.8%, oklch(65.53% 0.1234 274.50) 74.4%, oklch(66.42% 0.1286 288.37) 76.9%, oklch(67.22% 0.1338 303.51) 79.5%, oklch(67.93% 0.1389 319.44) 82.1%, oklch(68.57% 0.1439 335.68) 84.6%, oklch(69.14% 0.1487 351.74) 87.2%, oklch(69.64% 0.1532 7.13) 89.7%, oklch(70.10% 0.1573 21.37) 92.3%, oklch(70.52% 0.1610 33.98) 94.9%, oklch(70.90% 0.1642 44.47) 97.4%, oklch(71.26% 0.1667 52.36) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.28 | 0.07 | 245.4 |
| 2 | 0.378 | 0.051 | 266.5 |
| 3 | 0.622 | 0.109 | 245.4 |
| 4 | 0.713 | 0.167 | 412.4 |

## In these collections

- [Remote sensing gradients](https://grabient.com/remote-sensing-gradients)

## Other forms

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