# Blue and Green: Navy and deep cyan

The "Blue and Green: Navy and deep cyan" palette brings together dark blue, blue, green, and pale green. The colors span a very broad lightness range, combining moderate color with high contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is pale green.

- Also called: Tritone navy, teal and light green radial gradient
- Seed: `kULyW4ryW_cKitVzFr0A`
- Page: https://grabient.com/kULyW4ryW_cKitVzFr0A?style=radialGradient&steps=32&angle=0
- Drawn as: radial gradient, 32 steps, 0 degrees
- Kinds: dark to light, cool
- Hues: wide
- Contrast of its darkest and lightest colors: 14.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 | `#051229` | `oklch(18.50% 0.0510 259.45)` | Squid’s Ink | white, 18.6 to 1 |
| 2 | `#06142d` | `oklch(19.58% 0.0542 259.57)` | Squid’s Ink | white, 18.3 to 1 |
| 3 | `#071733` | `oklch(20.97% 0.0587 260.19)` | Liberty Blue | white, 17.7 to 1 |
| 4 | `#091b3a` | `oklch(22.62% 0.0642 261.10)` | Naval Night | white, 17.1 to 1 |
| 5 | `#0d1f41` | `oklch(24.47% 0.0702 262.05)` | Dark Eclipse | white, 16.3 to 1 |
| 6 | `#10234a` | `oklch(26.46% 0.0766 262.85)` | Dark Eclipse | white, 15.4 to 1 |
| 7 | `#132853` | `oklch(28.53% 0.0830 263.27)` | Dark Tyrian Blue | white, 14.4 to 1 |
| 8 | `#162d5c` | `oklch(30.62% 0.0891 263.07)` | Ambassador Blue | white, 13.4 to 1 |
| 9 | `#183264` | `oklch(32.68% 0.0946 262.06)` | Funnel Cloud | white, 12.5 to 1 |
| 10 | `#18386c` | `oklch(34.64% 0.0992 259.99)` | Lost in Space | white, 11.5 to 1 |
| 11 | `#153d73` | `oklch(36.45% 0.1025 256.66)` | Ashenvale Nights | white, 10.7 to 1 |
| 12 | `#0b4378` | `oklch(38.04% 0.1046 251.72)` | Twilight Blue | white, 10 to 1 |
| 13 | `#004a77` | `oklch(39.42% 0.0991 244.93)` | Blue Meridian | white, 9.3 to 1 |
| 14 | `#004f73` | `oklch(40.64% 0.0881 236.55)` | Sail Maker | white, 8.8 to 1 |
| 15 | `#00556e` | `oklch(41.77% 0.0807 227.05)` | Blue Palisade | white, 8.3 to 1 |
| 16 | `#00596b` | `oklch(42.88% 0.0765 216.84)` | Oceanside | white, 7.9 to 1 |
| 17 | `#005e67` | `oklch(44.06% 0.0754 206.32)` | Fish Tale | white, 7.4 to 1 |
| 18 | `#006364` | `oklch(45.36% 0.0773 195.92)` | Really Teal | white, 7 to 1 |
| 19 | `#006961` | `oklch(46.86% 0.0822 186.04)` | Evergreen Forest | white, 6.5 to 1 |
| 20 | `#00705e` | `oklch(48.63% 0.0901 177.10)` | Falcon Turquoise | white, 6 to 1 |
| 21 | `#11775c` | `oklch(50.73% 0.0964 169.51)` | Emerald Dream | white, 5.5 to 1 |
| 22 | `#2c7e5d` | `oklch(53.27% 0.0944 163.62)` | Verdant Green | white, 4.9 to 1 |
| 23 | `#408662` | `oklch(56.45% 0.0918 158.88)` | Chrysocolla Green | black, 4.8 to 1 |
| 24 | `#529169` | `oklch(60.19% 0.0886 155.00)` | DaVanzo Green | black, 5.5 to 1 |
| 25 | `#659c73` | `oklch(64.34% 0.0851 151.86)` | Rosemary Green | black, 6.5 to 1 |
| 26 | `#76a97f` | `oklch(68.71% 0.0813 149.34)` | Light Grass Green | black, 7.7 to 1 |
| 27 | `#88b68c` | `oklch(73.15% 0.0774 147.33)` | Chatty Cricket | black, 9.1 to 1 |
| 28 | `#98c39a` | `oklch(77.50% 0.0735 145.73)` | Velvet Leaf | black, 10.5 to 1 |
| 29 | `#a8cfa7` | `oklch(81.57% 0.0699 144.42)` | Mint Circle | black, 12.1 to 1 |
| 30 | `#b5dab3` | `oklch(85.22% 0.0667 143.28)` | Bleached Spruce | black, 13.6 to 1 |
| 31 | `#c1e4bd` | `oklch(88.27% 0.0640 142.21)` | Sweet Menthol | black, 15 to 1 |
| 32 | `#caebc4` | `oklch(90.55% 0.0620 141.10)` | Green Song | black, 16.1 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #051229 0.0%, #06142d 3.2%, #071733 6.5%, #091b3a 9.7%, #0d1f41 12.9%, #10234a 16.1%, #132853 19.4%, #162d5c 22.6%, #183264 25.8%, #18386c 29.0%, #153d73 32.3%, #0b4378 35.5%, #004a77 38.7%, #004f73 41.9%, #00556e 45.2%, #00596b 48.4%, #005e67 51.6%, #006364 54.8%, #006961 58.1%, #00705e 61.3%, #11775c 64.5%, #2c7e5d 67.7%, #408662 71.0%, #529169 74.2%, #659c73 77.4%, #76a97f 80.6%, #88b68c 83.9%, #98c39a 87.1%, #a8cfa7 90.3%, #b5dab3 93.5%, #c1e4bd 96.8%, #caebc4 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(18.50% 0.0510 259.45) 0.0%, oklch(19.58% 0.0542 259.57) 3.2%, oklch(20.97% 0.0587 260.19) 6.5%, oklch(22.62% 0.0642 261.10) 9.7%, oklch(24.47% 0.0702 262.05) 12.9%, oklch(26.46% 0.0766 262.85) 16.1%, oklch(28.53% 0.0830 263.27) 19.4%, oklch(30.62% 0.0891 263.07) 22.6%, oklch(32.68% 0.0946 262.06) 25.8%, oklch(34.64% 0.0992 259.99) 29.0%, oklch(36.45% 0.1025 256.66) 32.3%, oklch(38.04% 0.1046 251.72) 35.5%, oklch(39.42% 0.0991 244.93) 38.7%, oklch(40.64% 0.0881 236.55) 41.9%, oklch(41.77% 0.0807 227.05) 45.2%, oklch(42.88% 0.0765 216.84) 48.4%, oklch(44.06% 0.0754 206.32) 51.6%, oklch(45.36% 0.0773 195.92) 54.8%, oklch(46.86% 0.0822 186.04) 58.1%, oklch(48.63% 0.0901 177.10) 61.3%, oklch(50.73% 0.0964 169.51) 64.5%, oklch(53.27% 0.0944 163.62) 67.7%, oklch(56.45% 0.0918 158.88) 71.0%, oklch(60.19% 0.0886 155.00) 74.2%, oklch(64.34% 0.0851 151.86) 77.4%, oklch(68.71% 0.0813 149.34) 80.6%, oklch(73.15% 0.0774 147.33) 83.9%, oklch(77.50% 0.0735 145.73) 87.1%, oklch(81.57% 0.0699 144.42) 90.3%, oklch(85.22% 0.0667 143.28) 93.5%, oklch(88.27% 0.0640 142.21) 96.8%, oklch(90.55% 0.0620 141.10) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.185 | 0.051 | 259.5 |
| 2 | 0.37 | 0.103 | 255.2 |
| 3 | 0.524 | 0.095 | 165.4 |
| 4 | 0.906 | 0.062 | 141.1 |

## In these collections

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

## Other forms

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