# Navy and moss color palette

The Navy and moss color palette brings together dark blue, blue, light green, and green. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits stationery systems and print layouts. Its darkest tone is dark blue, and its lightest tone is light green.

- Also called: Navy, teal, green and dark green linear gradient
- Seed: `kWNSa6tRo_GErshIqsFrJjAo`
- Page: https://grabient.com/kWNSa6tRo_GErshIqsFrJjAo?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: light center, cool
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 8.8 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 | `#0a1730` | `oklch(20.87% 0.0524 262.27)` | Liberty Blue | white, 17.8 to 1 |
| 2 | `#0d1b34` | `oklch(22.44% 0.0537 262.47)` | Trapped Darkness | white, 17.1 to 1 |
| 3 | `#121f3a` | `oklch(24.43% 0.0553 263.60)` | Nightwalker | white, 16.3 to 1 |
| 4 | `#182542` | `oklch(26.79% 0.0571 264.99)` | Cool Balaclavas Are Forever | white, 15.2 to 1 |
| 5 | `#1e2b4a` | `oklch(29.49% 0.0593 265.98)` | Rurikon Blue | white, 13.9 to 1 |
| 6 | `#253354` | `oklch(32.46% 0.0619 265.91)` | Boatswain | white, 12.5 to 1 |
| 7 | `#2b3b5e` | `oklch(35.68% 0.0650 264.12)` | Nautilus | white, 11 to 1 |
| 8 | `#2f456a` | `oklch(39.08% 0.0686 259.95)` | Forlorn Cruise | white, 9.6 to 1 |
| 9 | `#305176` | `oklch(42.67% 0.0728 252.68)` | Aerostatics | white, 8.2 to 1 |
| 10 | `#2d6083` | `oklch(47.13% 0.0783 240.77)` | Pelagic | white, 6.7 to 1 |
| 11 | `#25748f` | `oklch(52.40% 0.0851 224.96)` | Devil Blue | white, 5.2 to 1 |
| 12 | `#1e8a96` | `oklch(58.04% 0.0924 206.81)` | Zuni | black, 5.1 to 1 |
| 13 | `#2b9e96` | `oklch(63.62% 0.0999 187.86)` | Talismanic Teal | black, 6.4 to 1 |
| 14 | `#49b090` | `oklch(68.71% 0.1071 169.66)` | Walk in the Woods | black, 7.8 to 1 |
| 15 | `#6abc86` | `oklch(72.86% 0.1133 153.75)` | Young Bamboo | black, 9.1 to 1 |
| 16 | `#84c37c` | `oklch(75.64% 0.1182 141.68)` | Applegate | black, 10 to 1 |
| 17 | `#92c474` | `oklch(76.66% 0.1212 134.73)` | Pistachio | black, 10.3 to 1 |
| 18 | `#94c26d` | `oklch(76.08% 0.1233 131.94)` | Pistachio | black, 10.1 to 1 |
| 19 | `#8ebc67` | `oklch(74.24% 0.1244 132.26)` | Lima Bean Green | black, 9.5 to 1 |
| 20 | `#81b462` | `oklch(71.48% 0.1247 134.82)` | Broccoli | black, 8.6 to 1 |
| 21 | `#70ab5e` | `oklch(68.13% 0.1242 138.74)` | Ferntastic | black, 7.6 to 1 |
| 22 | `#5da15a` | `oklch(64.50% 0.1229 143.14)` | Savage Garden | black, 6.6 to 1 |
| 23 | `#4c9657` | `oklch(60.94% 0.1208 147.15)` | Alpine Herbs | black, 5.8 to 1 |
| 24 | `#3e8d53` | `oklch(57.78% 0.1179 149.87)` | Medium Green | black, 5.1 to 1 |
| 25 | `#35844e` | `oklch(54.97% 0.1140 151.14)` | Monster Monstera | white, 4.6 to 1 |
| 26 | `#2e7a49` | `oklch(51.86% 0.1081 152.24)` | Salem | white, 5.2 to 1 |
| 27 | `#276f43` | `oklch(48.57% 0.1010 153.23)` | Cloudy Camouflage | white, 6 to 1 |
| 28 | `#22653d` | `oklch(45.26% 0.0931 154.11)` | Fun Green | white, 7 to 1 |
| 29 | `#1e5b38` | `oklch(42.10% 0.0853 154.89)` | Crusoe | white, 8 to 1 |
| 30 | `#1b5233` | `oklch(39.23% 0.0780 155.56)` | Kaitoke Green | white, 9.1 to 1 |
| 31 | `#184a2f` | `oklch(36.83% 0.0718 156.13)` | Order Green | white, 10.1 to 1 |
| 32 | `#16452c` | `oklch(35.04% 0.0675 156.59)` | Zucchini | white, 10.9 to 1 |

## CSS

```css
background: linear-gradient(45deg, #0a1730 0.0%, #0d1b34 3.2%, #121f3a 6.5%, #182542 9.7%, #1e2b4a 12.9%, #253354 16.1%, #2b3b5e 19.4%, #2f456a 22.6%, #305176 25.8%, #2d6083 29.0%, #25748f 32.3%, #1e8a96 35.5%, #2b9e96 38.7%, #49b090 41.9%, #6abc86 45.2%, #84c37c 48.4%, #92c474 51.6%, #94c26d 54.8%, #8ebc67 58.1%, #81b462 61.3%, #70ab5e 64.5%, #5da15a 67.7%, #4c9657 71.0%, #3e8d53 74.2%, #35844e 77.4%, #2e7a49 80.6%, #276f43 83.9%, #22653d 87.1%, #1e5b38 90.3%, #1b5233 93.5%, #184a2f 96.8%, #16452c 100.0%);
background: linear-gradient(45deg in oklch, oklch(20.87% 0.0524 262.27) 0.0%, oklch(22.44% 0.0537 262.47) 3.2%, oklch(24.43% 0.0553 263.60) 6.5%, oklch(26.79% 0.0571 264.99) 9.7%, oklch(29.49% 0.0593 265.98) 12.9%, oklch(32.46% 0.0619 265.91) 16.1%, oklch(35.68% 0.0650 264.12) 19.4%, oklch(39.08% 0.0686 259.95) 22.6%, oklch(42.67% 0.0728 252.68) 25.8%, oklch(47.13% 0.0783 240.77) 29.0%, oklch(52.40% 0.0851 224.96) 32.3%, oklch(58.04% 0.0924 206.81) 35.5%, oklch(63.62% 0.0999 187.86) 38.7%, oklch(68.71% 0.1071 169.66) 41.9%, oklch(72.86% 0.1133 153.75) 45.2%, oklch(75.64% 0.1182 141.68) 48.4%, oklch(76.66% 0.1212 134.73) 51.6%, oklch(76.08% 0.1233 131.94) 54.8%, oklch(74.24% 0.1244 132.26) 58.1%, oklch(71.48% 0.1247 134.82) 61.3%, oklch(68.13% 0.1242 138.74) 64.5%, oklch(64.50% 0.1229 143.14) 67.7%, oklch(60.94% 0.1208 147.15) 71.0%, oklch(57.78% 0.1179 149.87) 74.2%, oklch(54.97% 0.1140 151.14) 77.4%, oklch(51.86% 0.1081 152.24) 80.6%, oklch(48.57% 0.1010 153.23) 83.9%, oklch(45.26% 0.0931 154.11) 87.1%, oklch(42.10% 0.0853 154.89) 90.3%, oklch(39.23% 0.0780 155.56) 93.5%, oklch(36.83% 0.0718 156.13) 96.8%, oklch(35.04% 0.0675 156.59) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.209 | 0.052 | 262.3 |
| 2 | 0.417 | 0.072 | 254.9 |
| 3 | 0.764 | 0.12 | 137.6 |
| 4 | 0.571 | 0.117 | 150.2 |
| 5 | 0.35 | 0.068 | 156.6 |

## In these collections

- [Green multicolor gradients](https://grabient.com/green-multicolor-gradients)
- [School uniform](https://grabient.com/school-uniform)
- [Bottlebrush coral morning](https://grabient.com/bottlebrush-coral-morning)
- [Blue and green gradients](https://grabient.com/blue-and-green-gradients)

## Other forms

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