# Navy, moss and crimson coastal rockpool spring

The Navy, moss and crimson coastal rockpool spring brings together blue, teal, green, yellow, and red. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits seasonal campaigns and event graphics. Its darkest tone is blue, and its lightest tone is green.

- Also called: Vivid blue, green and red linear gradient
- Seed: `kcYFq4Nh--cUcODRrjw0y0-cuduzDqDkwTS-4`
- Page: https://grabient.com/kcYFq4Nh--cUcODRrjw0y0-cuduzDqDkwTS-4?steps=32&angle=225
- Drawn as: linear gradient, 32 steps, 225 degrees
- Kinds: vivid, multicolor
- Hues: triadic
- Contrast of its darkest and lightest colors: 3.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 | `#113f82` | `oklch(37.80% 0.1240 258.75)` | Bracing Blue | white, 10.2 to 1 |
| 2 | `#144181` | `oklch(38.40% 0.1176 257.79)` | Bracing Blue | white, 9.9 to 1 |
| 3 | `#1a457e` | `oklch(39.21% 0.1082 256.84)` | Maritime Outpost | white, 9.5 to 1 |
| 4 | `#1e497c` | `oklch(40.30% 0.0981 254.52)` | Theatre Blue | white, 9.1 to 1 |
| 5 | `#204f7b` | `oklch(41.76% 0.0895 249.44)` | Mykonos Reflection | white, 8.5 to 1 |
| 6 | `#1d577b` | `oklch(43.71% 0.0838 239.96)` | 3AM in Shibuya | white, 7.7 to 1 |
| 7 | `#18627a` | `oklch(46.27% 0.0789 225.35)` | Jamaican Dream | white, 6.8 to 1 |
| 8 | `#1c6d77` | `oklch(49.16% 0.0756 208.33)` | Teal Fury | white, 6 to 1 |
| 9 | `#297774` | `oklch(52.06% 0.0749 191.90)` | Myrtle Green | white, 5.2 to 1 |
| 10 | `#348071` | `oklch(54.68% 0.0779 179.01)` | Copper Mineral Green | white, 4.7 to 1 |
| 11 | `#3a8970` | `oklch(57.22% 0.0871 169.50)` | Ionian | black, 4.9 to 1 |
| 12 | `#3e926d` | `oklch(59.74% 0.1005 161.88)` | Illuminati Green | black, 5.5 to 1 |
| 13 | `#439a68` | `oklch(62.01% 0.1144 155.65)` | Bulma Hair | black, 6 to 1 |
| 14 | `#4ba062` | `oklch(63.79% 0.1249 150.29)` | Longing for Nature | black, 6.5 to 1 |
| 15 | `#55a45d` | `oklch(64.93% 0.1297 146.02)` | Bouncy Ball Green | black, 6.8 to 1 |
| 16 | `#5ba55a` | `oklch(65.59% 0.1313 143.82)` | Exploration Green | black, 6.9 to 1 |
| 17 | `#5fa559` | `oklch(65.81% 0.1304 142.20)` | Exploration Green | black, 7 to 1 |
| 18 | `#65a456` | `oklch(65.66% 0.1273 139.56)` | Off Green | black, 6.9 to 1 |
| 19 | `#6fa050` | `oklch(65.17% 0.1222 134.38)` | Kiwi | black, 6.8 to 1 |
| 20 | `#7a994a` | `oklch(64.17% 0.1124 127.02)` | Mossy Glossy | black, 6.4 to 1 |
| 21 | `#839147` | `oklch(62.76% 0.0998 118.19)` | Pepper Sprout | black, 6 to 1 |
| 22 | `#888846` | `oklch(61.18% 0.0882 108.25)` | Overgrown Citadel | black, 5.6 to 1 |
| 23 | `#8c8044` | `oklch(59.65% 0.0816 97.57)` | Peas Please | black, 5.2 to 1 |
| 24 | `#91773e` | `oklch(58.19% 0.0823 85.30)` | Bengal Grass | black, 4.9 to 1 |
| 25 | `#976d38` | `oklch(56.61% 0.0881 70.79)` | Half Orc Highlight | white, 4.6 to 1 |
| 26 | `#9c6235` | `oklch(55.08% 0.0967 56.29)` | Cathay Spice | white, 4.9 to 1 |
| 27 | `#a05837` | `oklch(53.75% 0.1057 44.05)` | Pennywise | white, 5.3 to 1 |
| 28 | `#a2503a` | `oklch(52.78% 0.1135 36.17)` | Truffle Trouble | white, 5.6 to 1 |
| 29 | `#a44a39` | `oklch(52.12% 0.1222 32.32)` | Rodeo Red | white, 5.8 to 1 |
| 30 | `#a64536` | `oklch(51.69% 0.1312 31.02)` | Barbarossa | white, 5.9 to 1 |
| 31 | `#a84132` | `oklch(51.41% 0.1391 30.87)` | Chocolate Chilli | white, 6 to 1 |
| 32 | `#aa3e2f` | `oklch(51.18% 0.1447 30.49)` | Chocolate Chilli | white, 6.1 to 1 |

## CSS

```css
background: linear-gradient(225deg, #113f82 0.0%, #144181 3.2%, #1a457e 6.5%, #1e497c 9.7%, #204f7b 12.9%, #1d577b 16.1%, #18627a 19.4%, #1c6d77 22.6%, #297774 25.8%, #348071 29.0%, #3a8970 32.3%, #3e926d 35.5%, #439a68 38.7%, #4ba062 41.9%, #55a45d 45.2%, #5ba55a 48.4%, #5fa559 51.6%, #65a456 54.8%, #6fa050 58.1%, #7a994a 61.3%, #839147 64.5%, #888846 67.7%, #8c8044 71.0%, #91773e 74.2%, #976d38 77.4%, #9c6235 80.6%, #a05837 83.9%, #a2503a 87.1%, #a44a39 90.3%, #a64536 93.5%, #a84132 96.8%, #aa3e2f 100.0%);
background: linear-gradient(225deg in oklch, oklch(37.80% 0.1240 258.75) 0.0%, oklch(38.40% 0.1176 257.79) 3.2%, oklch(39.21% 0.1082 256.84) 6.5%, oklch(40.30% 0.0981 254.52) 9.7%, oklch(41.76% 0.0895 249.44) 12.9%, oklch(43.71% 0.0838 239.96) 16.1%, oklch(46.27% 0.0789 225.35) 19.4%, oklch(49.16% 0.0756 208.33) 22.6%, oklch(52.06% 0.0749 191.90) 25.8%, oklch(54.68% 0.0779 179.01) 29.0%, oklch(57.22% 0.0871 169.50) 32.3%, oklch(59.74% 0.1005 161.88) 35.5%, oklch(62.01% 0.1144 155.65) 38.7%, oklch(63.79% 0.1249 150.29) 41.9%, oklch(64.93% 0.1297 146.02) 45.2%, oklch(65.59% 0.1313 143.82) 48.4%, oklch(65.81% 0.1304 142.20) 51.6%, oklch(65.66% 0.1273 139.56) 54.8%, oklch(65.17% 0.1222 134.38) 58.1%, oklch(64.17% 0.1124 127.02) 61.3%, oklch(62.76% 0.0998 118.19) 64.5%, oklch(61.18% 0.0882 108.25) 67.7%, oklch(59.65% 0.0816 97.57) 71.0%, oklch(58.19% 0.0823 85.30) 74.2%, oklch(56.61% 0.0881 70.79) 77.4%, oklch(55.08% 0.0967 56.29) 80.6%, oklch(53.75% 0.1057 44.05) 83.9%, oklch(52.78% 0.1135 36.17) 87.1%, oklch(52.12% 0.1222 32.32) 90.3%, oklch(51.69% 0.1312 31.02) 93.5%, oklch(51.41% 0.1391 30.87) 96.8%, oklch(51.18% 0.1447 30.49) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.378 | 0.124 | 258.8 |
| 2 | 0.425 | 0.087 | 246.1 |
| 3 | 0.543 | 0.077 | 180.6 |
| 4 | 0.642 | 0.127 | 148.8 |
| 5 | 0.654 | 0.124 | 136.2 |
| 6 | 0.594 | 0.081 | 96 |
| 7 | 0.531 | 0.11 | 38.9 |
| 8 | 0.512 | 0.145 | 30.5 |

## In these collections

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

## Other forms

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