# Blue and Green: Navy and deep teal

The "Blue and Green: Navy and deep teal" palette brings together dark blue, teal, and green. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its dark and grounded character suits botanical branding and garden event graphics. Its darkest tone is dark blue, and its lightest tone is green.

- Also called: Tritone navy, teal and dark green linear gradient
- Seed: `kYNSy4JRu_LIXu03nrqrxw-6eVPs`
- Page: https://grabient.com/kYNSy4JRu_LIXu03nrqrxw-6eVPs?steps=32&angle=270
- Drawn as: linear gradient, 32 steps, 270 degrees
- Kinds: vivid, dark, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 2.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 | `#051733` | `oklch(20.87% 0.0606 258.75)` | Liberty Blue | white, 17.8 to 1 |
| 2 | `#061936` | `oklch(21.71% 0.0625 258.44)` | Naval Night | white, 17.4 to 1 |
| 3 | `#071c3a` | `oklch(22.85% 0.0653 258.33)` | Naval Night | white, 17 to 1 |
| 4 | `#081f40` | `oklch(24.21% 0.0686 258.07)` | Midnight Mirage | white, 16.4 to 1 |
| 5 | `#0a2345` | `oklch(25.72% 0.0717 257.34)` | Dark Eclipse | white, 15.7 to 1 |
| 6 | `#0a274a` | `oklch(27.28% 0.0743 255.79)` | Dark Eclipse | white, 14.9 to 1 |
| 7 | `#0a2b4f` | `oklch(28.83% 0.0757 253.11)` | Dark Tyrian Blue | white, 14.2 to 1 |
| 8 | `#083053` | `oklch(30.40% 0.0754 249.01)` | Beyond the Stars | white, 13.4 to 1 |
| 9 | `#063656` | `oklch(32.14% 0.0736 243.61)` | Incremental Blue | white, 12.5 to 1 |
| 10 | `#053c58` | `oklch(33.95% 0.0709 237.27)` | Duskwood | white, 11.6 to 1 |
| 11 | `#074259` | `oklch(35.75% 0.0680 230.33)` | Maniac Mansion | white, 10.8 to 1 |
| 12 | `#09485a` | `oklch(37.42% 0.0657 223.14)` | Sultan’s Silk | white, 10 to 1 |
| 13 | `#0b4d5b` | `oklch(38.87% 0.0647 216.05)` | Teal Dark Blue | white, 9.4 to 1 |
| 14 | `#0a515b` | `oklch(40.07% 0.0655 209.07)` | Blue Period | white, 8.9 to 1 |
| 15 | `#06565a` | `oklch(41.18% 0.0682 201.34)` | Deep Teal | white, 8.4 to 1 |
| 16 | `#005a58` | `oklch(42.17% 0.0720 193.24)` | Dark Turquoise | white, 8.1 to 1 |
| 17 | `#005d55` | `oklch(42.97% 0.0756 185.26)` | Tidal Pool | white, 7.7 to 1 |
| 18 | `#005f51` | `oklch(43.52% 0.0801 177.95)` | Alpine Green | white, 7.5 to 1 |
| 19 | `#06604c` | `oklch(43.74% 0.0831 171.83)` | Sci-Fi Takeout | white, 7.5 to 1 |
| 20 | `#0d6048` | `oklch(43.58% 0.0844 167.37)` | Sci-Fi Takeout | white, 7.5 to 1 |
| 21 | `#105e43` | `oklch(42.92% 0.0845 164.61)` | Greenbriar | white, 7.7 to 1 |
| 22 | `#105b3f` | `oklch(41.88% 0.0839 163.09)` | Billiard Table | white, 8.1 to 1 |
| 23 | `#0e573c` | `oklch(40.59% 0.0826 162.35)` | Sacramento State Green | white, 8.6 to 1 |
| 24 | `#0b5338` | `oklch(39.22% 0.0809 161.93)` | Permanent Green | white, 9.1 to 1 |
| 25 | `#0a4f34` | `oklch(37.91% 0.0789 161.35)` | Chrysocolla Dark Green | white, 9.6 to 1 |
| 26 | `#0c4b31` | `oklch(36.80% 0.0767 160.18)` | Order Green | white, 10.1 to 1 |
| 27 | `#0f482e` | `oklch(35.73% 0.0739 158.55)` | Zucchini | white, 10.6 to 1 |
| 28 | `#12442a` | `oklch(34.61% 0.0705 156.79)` | Zucchini | white, 11.1 to 1 |
| 29 | `#144127` | `oklch(33.53% 0.0667 155.01)` | Queen of Trees | white, 11.6 to 1 |
| 30 | `#163d24` | `oklch(32.54% 0.0631 153.36)` | Mizukaze Green | white, 12 to 1 |
| 31 | `#173b22` | `oklch(31.71% 0.0600 151.97)` | Deep Fir | white, 12.5 to 1 |
| 32 | `#183921` | `oklch(31.10% 0.0579 150.96)` | Deep Fir | white, 12.8 to 1 |

## CSS

```css
background: linear-gradient(270deg, #051733 0.0%, #061936 3.2%, #071c3a 6.5%, #081f40 9.7%, #0a2345 12.9%, #0a274a 16.1%, #0a2b4f 19.4%, #083053 22.6%, #063656 25.8%, #053c58 29.0%, #074259 32.3%, #09485a 35.5%, #0b4d5b 38.7%, #0a515b 41.9%, #06565a 45.2%, #005a58 48.4%, #005d55 51.6%, #005f51 54.8%, #06604c 58.1%, #0d6048 61.3%, #105e43 64.5%, #105b3f 67.7%, #0e573c 71.0%, #0b5338 74.2%, #0a4f34 77.4%, #0c4b31 80.6%, #0f482e 83.9%, #12442a 87.1%, #144127 90.3%, #163d24 93.5%, #173b22 96.8%, #183921 100.0%);
background: linear-gradient(270deg in oklch, oklch(20.87% 0.0606 258.75) 0.0%, oklch(21.71% 0.0625 258.44) 3.2%, oklch(22.85% 0.0653 258.33) 6.5%, oklch(24.21% 0.0686 258.07) 9.7%, oklch(25.72% 0.0717 257.34) 12.9%, oklch(27.28% 0.0743 255.79) 16.1%, oklch(28.83% 0.0757 253.11) 19.4%, oklch(30.40% 0.0754 249.01) 22.6%, oklch(32.14% 0.0736 243.61) 25.8%, oklch(33.95% 0.0709 237.27) 29.0%, oklch(35.75% 0.0680 230.33) 32.3%, oklch(37.42% 0.0657 223.14) 35.5%, oklch(38.87% 0.0647 216.05) 38.7%, oklch(40.07% 0.0655 209.07) 41.9%, oklch(41.18% 0.0682 201.34) 45.2%, oklch(42.17% 0.0720 193.24) 48.4%, oklch(42.97% 0.0756 185.26) 51.6%, oklch(43.52% 0.0801 177.95) 54.8%, oklch(43.74% 0.0831 171.83) 58.1%, oklch(43.58% 0.0844 167.37) 61.3%, oklch(42.92% 0.0845 164.61) 64.5%, oklch(41.88% 0.0839 163.09) 67.7%, oklch(40.59% 0.0826 162.35) 71.0%, oklch(39.22% 0.0809 161.93) 74.2%, oklch(37.91% 0.0789 161.35) 77.4%, oklch(36.80% 0.0767 160.18) 80.6%, oklch(35.73% 0.0739 158.55) 83.9%, oklch(34.61% 0.0705 156.79) 87.1%, oklch(33.53% 0.0667 155.01) 90.3%, oklch(32.54% 0.0631 153.36) 93.5%, oklch(31.71% 0.0600 151.97) 96.8%, oklch(31.10% 0.0579 150.96) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.209 | 0.061 | 258.8 |
| 2 | 0.291 | 0.076 | 252.4 |
| 3 | 0.394 | 0.065 | 213.3 |
| 4 | 0.437 | 0.084 | 168.9 |
| 5 | 0.37 | 0.077 | 160.5 |
| 6 | 0.311 | 0.058 | 151 |

## In these collections

- [Blue and green gradients](https://grabient.com/blue-and-green-gradients)

## Other forms

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