# Navy, mauve and turquoise coastal rockpool spring

Analogous blue, gray and teal linear gradient with 32 colors: #1e4678, #1f4979, #1f4c7a, #22507c, #28547d, #325880, #3f5c83, #4f6085, #5f6587, #6c6b88, #787189, #82778b, #8c7c8e, #968291, #9f8792, #a68b90, #a98f8c, #a69489, #9f978a, #98998d, #939990, #8d9990, #839a8f, #759a8d, #639a8d, #51998c, #41978d, #34938e, #2b8f8c, #268b8a, #228888, #1f8587. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Analogous blue, gray and teal linear gradient
- Seed: `kaZEa1uZy_kiNRfVDEiVYbPk8eRFHoEFA`
- Page: https://grabient.com/kaZEa1uZy_kiNRfVDEiVYbPk8eRFHoEFA?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: muted
- Hues: wide
- Contrast of its darkest and lightest colors: 3.3 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 | `#1e4678` | `oklch(39.37% 0.0965 255.23)` | Theatre Blue | white, 9.4 to 1 |
| 2 | `#1f4979` | `oklch(40.05% 0.0945 254.01)` | Thunder Night | white, 9.2 to 1 |
| 3 | `#1f4c7a` | `oklch(40.96% 0.0920 251.76)` | Sapphire Earrings | white, 8.8 to 1 |
| 4 | `#22507c` | `oklch(42.08% 0.0887 249.75)` | Slumber | white, 8.4 to 1 |
| 5 | `#28547d` | `oklch(43.43% 0.0846 249.20)` | Blueberry Twist | white, 7.9 to 1 |
| 6 | `#325880` | `oklch(44.99% 0.0795 251.35)` | Overtake | white, 7.4 to 1 |
| 7 | `#3f5c83` | `oklch(46.87% 0.0726 256.95)` | Atlantic Schooner | white, 6.8 to 1 |
| 8 | `#4f6085` | `oklch(49.11% 0.0636 265.18)` | Indigo Navy Blue | white, 6.2 to 1 |
| 9 | `#5f6587` | `oklch(51.56% 0.0538 275.36)` | Champion Blue | white, 5.6 to 1 |
| 10 | `#6c6b88` | `oklch(54.03% 0.0446 286.79)` | Dark Prince | white, 5.1 to 1 |
| 11 | `#787189` | `oklch(56.37% 0.0375 298.78)` | Capercaillie Mauve | white, 4.6 to 1 |
| 12 | `#82778b` | `oklch(58.52% 0.0336 310.68)` | Mythical | black, 4.9 to 1 |
| 13 | `#8c7c8e` | `oklch(60.74% 0.0324 322.58)` | Iced Orchid | black, 5.4 to 1 |
| 14 | `#968291` | `oklch(62.89% 0.0328 335.27)` | Quixotic | black, 5.8 to 1 |
| 15 | `#9f8792` | `oklch(64.82% 0.0336 349.54)` | Art Nouveau Violet | black, 6.3 to 1 |
| 16 | `#a68b90` | `oklch(66.36% 0.0337 6.22)` | Gothic Amethyst | black, 6.7 to 1 |
| 17 | `#a98f8c` | `oklch(67.36% 0.0318 26.55)` | Ash Hollow | black, 7 to 1 |
| 18 | `#a69489` | `oklch(67.90% 0.0272 52.57)` | Zorba | black, 7.2 to 1 |
| 19 | `#9f978a` | `oklch(68.06% 0.0217 81.55)` | London Fog | black, 7.2 to 1 |
| 20 | `#98998d` | `oklch(67.94% 0.0173 110.14)` | Hunter’s Hollow | black, 7.2 to 1 |
| 21 | `#939990` | `oklch(67.61% 0.0160 134.98)` | Pond Leaves | black, 7.2 to 1 |
| 22 | `#8d9990` | `oklch(67.15% 0.0200 152.92)` | Green Milieu | black, 7.1 to 1 |
| 23 | `#839a8f` | `oklch(66.41% 0.0304 164.72)` | Paradise Found | black, 6.9 to 1 |
| 24 | `#759a8d` | `oklch(65.43% 0.0450 172.38)` | Silent Sage | black, 6.7 to 1 |
| 25 | `#639a8d` | `oklch(64.30% 0.0608 177.40)` | Goose Pond Green | black, 6.5 to 1 |
| 26 | `#51998c` | `oklch(63.14% 0.0747 181.30)` | Petrol Green | black, 6.2 to 1 |
| 27 | `#41978d` | `oklch(62.02% 0.0838 185.55)` | Sea | black, 6 to 1 |
| 28 | `#34938e` | `oklch(60.81% 0.0880 189.35)` | Azure Tide | black, 5.7 to 1 |
| 29 | `#2b8f8c` | `oklch(59.48% 0.0895 192.05)` | Fish Story | black, 5.4 to 1 |
| 30 | `#268b8a` | `oklch(58.19% 0.0892 193.92)` | Taos Turquoise | black, 5.1 to 1 |
| 31 | `#228888` | `oklch(57.08% 0.0884 195.27)` | Old Truck | black, 4.9 to 1 |
| 32 | `#1f8587` | `oklch(56.30% 0.0882 196.41)` | Bayou | black, 4.7 to 1 |

## CSS

```css
background: linear-gradient(135deg, #1e4678 0.0%, #1f4979 3.2%, #1f4c7a 6.5%, #22507c 9.7%, #28547d 12.9%, #325880 16.1%, #3f5c83 19.4%, #4f6085 22.6%, #5f6587 25.8%, #6c6b88 29.0%, #787189 32.3%, #82778b 35.5%, #8c7c8e 38.7%, #968291 41.9%, #9f8792 45.2%, #a68b90 48.4%, #a98f8c 51.6%, #a69489 54.8%, #9f978a 58.1%, #98998d 61.3%, #939990 64.5%, #8d9990 67.7%, #839a8f 71.0%, #759a8d 74.2%, #639a8d 77.4%, #51998c 80.6%, #41978d 83.9%, #34938e 87.1%, #2b8f8c 90.3%, #268b8a 93.5%, #228888 96.8%, #1f8587 100.0%);
background: linear-gradient(135deg in oklch, oklch(39.37% 0.0965 255.23) 0.0%, oklch(40.05% 0.0945 254.01) 3.2%, oklch(40.96% 0.0920 251.76) 6.5%, oklch(42.08% 0.0887 249.75) 9.7%, oklch(43.43% 0.0846 249.20) 12.9%, oklch(44.99% 0.0795 251.35) 16.1%, oklch(46.87% 0.0726 256.95) 19.4%, oklch(49.11% 0.0636 265.18) 22.6%, oklch(51.56% 0.0538 275.36) 25.8%, oklch(54.03% 0.0446 286.79) 29.0%, oklch(56.37% 0.0375 298.78) 32.3%, oklch(58.52% 0.0336 310.68) 35.5%, oklch(60.74% 0.0324 322.58) 38.7%, oklch(62.89% 0.0328 335.27) 41.9%, oklch(64.82% 0.0336 349.54) 45.2%, oklch(66.36% 0.0337 6.22) 48.4%, oklch(67.36% 0.0318 26.55) 51.6%, oklch(67.90% 0.0272 52.57) 54.8%, oklch(68.06% 0.0217 81.55) 58.1%, oklch(67.94% 0.0173 110.14) 61.3%, oklch(67.61% 0.0160 134.98) 64.5%, oklch(67.15% 0.0200 152.92) 67.7%, oklch(66.41% 0.0304 164.72) 71.0%, oklch(65.43% 0.0450 172.38) 74.2%, oklch(64.30% 0.0608 177.40) 77.4%, oklch(63.14% 0.0747 181.30) 80.6%, oklch(62.02% 0.0838 185.55) 83.9%, oklch(60.81% 0.0880 189.35) 87.1%, oklch(59.48% 0.0895 192.05) 90.3%, oklch(58.19% 0.0892 193.92) 93.5%, oklch(57.08% 0.0884 195.27) 96.8%, oklch(56.30% 0.0882 196.41) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.394 | 0.096 | 255.2 |
| 2 | 0.453 | 0.079 | 252.1 |
| 3 | 0.571 | 0.036 | 302.8 |
| 4 | 0.669 | 0.033 | 375.7 |
| 5 | 0.673 | 0.018 | 507.8 |
| 6 | 0.622 | 0.083 | 544.8 |
| 7 | 0.563 | 0.088 | 556.4 |

## In these collections

- [Coastal rockpool spring](https://grabient.com/coastal-rockpool-spring)

## Other forms

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