# Navy cyan and green angular burst

Dark navy travels through clear blue and bright cyan into turquoise and spring green, then returns through deep teal to navy. The closed angular sweep feels fresh and energetic, with strong color contrast around its focal point. It suits colorful website heroes, digital product launches, outdoor campaigns, and modern presentation covers.

- Also called: Seamless navy, blue, cyan and green angular gradient
- Seed: `kURymx1zW-dxFtYjlMvA`
- Page: https://grabient.com/kURymx1zW-dxFtYjlMvA?style=angularGradient&steps=48&angle=45
- Drawn as: angular gradient, 48 steps, 45 degrees
- Kinds: light center, vivid, cool, seamless
- Hues: wide
- Contrast of its darkest and lightest colors: 7.2 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 | `#102a43` | `oklch(27.95% 0.0565 249.61)` | Eternal Darkness | white, 14.5 to 1 |
| 2 | `#122e49` | `oklch(29.48% 0.0598 249.30)` | Crow Black Blue | white, 13.8 to 1 |
| 3 | `#143350` | `oklch(31.42% 0.0640 249.14)` | Beyond the Stars | white, 12.9 to 1 |
| 4 | `#173959` | `oklch(33.72% 0.0689 249.09)` | Poseidon | white, 11.8 to 1 |
| 5 | `#1a4063` | `oklch(36.32% 0.0744 249.09)` | Blue Opal | white, 10.6 to 1 |
| 6 | `#1e486e` | `oklch(39.16% 0.0804 249.10)` | Grape Blue | white, 9.5 to 1 |
| 7 | `#22507b` | `oklch(42.18% 0.0868 249.07)` | Slumber | white, 8.3 to 1 |
| 8 | `#275988` | `oklch(45.32% 0.0935 248.95)` | Endeavour | white, 7.3 to 1 |
| 9 | `#2b6295` | `oklch(48.52% 0.1004 248.70)` | Outer Reef | white, 6.3 to 1 |
| 10 | `#2e6ca3` | `oklch(51.71% 0.1073 248.25)` | Lochmara | white, 5.5 to 1 |
| 11 | `#3176b0` | `oklch(54.84% 0.1142 247.57)` | Python Blue | white, 4.8 to 1 |
| 12 | `#337fbd` | `oklch(57.85% 0.1210 246.61)` | Amalfi Coast | black, 4.9 to 1 |
| 13 | `#3388c9` | `oklch(60.68% 0.1275 245.31)` | Klaxosaur Blue | black, 5.5 to 1 |
| 14 | `#3091d4` | `oklch(63.26% 0.1336 243.64)` | Magical Merlin | black, 6.1 to 1 |
| 15 | `#2a99de` | `oklch(65.54% 0.1393 241.53)` | Homeworld | black, 6.7 to 1 |
| 16 | `#1ea1e5` | `oklch(67.46% 0.1444 238.94)` | Vanadyl Blue | black, 7.2 to 1 |
| 17 | `#00a7ea` | `oklch(68.97% 0.1480 235.79)` | Vivid Cerulean | black, 7.7 to 1 |
| 18 | `#00ade8` | `oklch(70.31% 0.1426 231.52)` | Huelveño Horizon | black, 8.1 to 1 |
| 19 | `#00b3e4` | `oklch(71.52% 0.1370 226.14)` | Blue Atoll | black, 8.5 to 1 |
| 20 | `#00b9df` | `oklch(72.62% 0.1321 219.87)` | Maldives | black, 8.9 to 1 |
| 21 | `#00bed9` | `oklch(73.58% 0.1287 212.90)` | Caribbean Blue | black, 9.3 to 1 |
| 22 | `#00c2d3` | `oklch(74.41% 0.1272 205.44)` | The Crowd Roars! | black, 9.6 to 1 |
| 23 | `#00c6cb` | `oklch(75.08% 0.1277 197.70)` | Turquoise Surf | black, 9.9 to 1 |
| 24 | `#00cac2` | `oklch(75.59% 0.1306 189.88)` | Pristine Oceanic | black, 10.1 to 1 |
| 25 | `#00ccb8` | `oklch(75.94% 0.1359 182.19)` | Pristine Oceanic | black, 10.3 to 1 |
| 26 | `#00ceac` | `oklch(76.11% 0.1437 174.83)` | Mint Leaf | black, 10.4 to 1 |
| 27 | `#00d09e` | `oklch(76.09% 0.1541 168.01)` | Wild Caribbean Green | black, 10.4 to 1 |
| 28 | `#00d08f` | `oklch(75.87% 0.1666 161.94)` | Retro Lime | black, 10.4 to 1 |
| 29 | `#00d07f` | `oklch(75.45% 0.1803 156.81)` | Seaweed | black, 10.3 to 1 |
| 30 | `#00cf6e` | `oklch(74.81% 0.1933 152.84)` | Underwater Fern | black, 10.1 to 1 |
| 31 | `#21cb64` | `oklch(73.95% 0.1943 150.23)` | Battletoad | black, 9.7 to 1 |
| 32 | `#29c75f` | `oklch(72.86% 0.1924 149.18)` | Battletoad | black, 9.4 to 1 |
| 33 | `#1fc25e` | `oklch(71.45% 0.1892 149.91)` | Lǜ Sè Green | black, 8.9 to 1 |
| 34 | `#00bc62` | `oklch(69.54% 0.1813 152.41)` | Green Elliott | black, 8.3 to 1 |
| 35 | `#00b26b` | `oklch(67.17% 0.1615 156.48)` | Jade Powder | black, 7.5 to 1 |
| 36 | `#00a772` | `oklch(64.42% 0.1415 161.90)` | Sesame Street Green | black, 6.7 to 1 |
| 37 | `#009b76` | `oklch(61.36% 0.1236 168.43)` | Golf Green | black, 5.9 to 1 |
| 38 | `#008f78` | `oklch(58.06% 0.1087 175.85)` | Dòu Lǜ Green | black, 5.1 to 1 |
| 39 | `#008277` | `oklch(54.60% 0.0967 183.95)` | Green Garlands | white, 4.6 to 1 |
| 40 | `#007673` | `oklch(51.04% 0.0875 192.48)` | Artisan Green | white, 5.4 to 1 |
| 41 | `#00696f` | `oklch(47.47% 0.0807 201.24)` | Tahitian Treat | white, 6.4 to 1 |
| 42 | `#005d69` | `oklch(43.94% 0.0760 209.99)` | Hero | white, 7.5 to 1 |
| 43 | `#005264` | `oklch(40.54% 0.0731 218.51)` | Sandalwood Grey Blue | white, 8.7 to 1 |
| 44 | `#00485e` | `oklch(37.34% 0.0718 226.57)` | Stegadon Scale Green | white, 10 to 1 |
| 45 | `#003e58` | `oklch(34.41% 0.0720 233.96)` | Maniac Mansion | white, 11.4 to 1 |
| 46 | `#063651` | `oklch(31.82% 0.0684 240.33)` | Sea of Stars | white, 12.6 to 1 |
| 47 | `#0d2f4a` | `oklch(29.64% 0.0617 245.65)` | Crow Black Blue | white, 13.7 to 1 |
| 48 | `#102a43` | `oklch(27.95% 0.0565 249.61)` | Eternal Darkness | white, 14.5 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #102a43 0.0%, #122e49 2.1%, #143350 4.3%, #173959 6.4%, #1a4063 8.5%, #1e486e 10.6%, #22507b 12.8%, #275988 14.9%, #2b6295 17.0%, #2e6ca3 19.1%, #3176b0 21.3%, #337fbd 23.4%, #3388c9 25.5%, #3091d4 27.7%, #2a99de 29.8%, #1ea1e5 31.9%, #00a7ea 34.0%, #00ade8 36.2%, #00b3e4 38.3%, #00b9df 40.4%, #00bed9 42.6%, #00c2d3 44.7%, #00c6cb 46.8%, #00cac2 48.9%, #00ccb8 51.1%, #00ceac 53.2%, #00d09e 55.3%, #00d08f 57.4%, #00d07f 59.6%, #00cf6e 61.7%, #21cb64 63.8%, #29c75f 66.0%, #1fc25e 68.1%, #00bc62 70.2%, #00b26b 72.3%, #00a772 74.5%, #009b76 76.6%, #008f78 78.7%, #008277 80.9%, #007673 83.0%, #00696f 85.1%, #005d69 87.2%, #005264 89.4%, #00485e 91.5%, #003e58 93.6%, #063651 95.7%, #0d2f4a 97.9%, #102a43 100.0%);
background: conic-gradient(from 45deg in oklch, oklch(27.95% 0.0565 249.61) 0.0%, oklch(29.48% 0.0598 249.30) 2.1%, oklch(31.42% 0.0640 249.14) 4.3%, oklch(33.72% 0.0689 249.09) 6.4%, oklch(36.32% 0.0744 249.09) 8.5%, oklch(39.16% 0.0804 249.10) 10.6%, oklch(42.18% 0.0868 249.07) 12.8%, oklch(45.32% 0.0935 248.95) 14.9%, oklch(48.52% 0.1004 248.70) 17.0%, oklch(51.71% 0.1073 248.25) 19.1%, oklch(54.84% 0.1142 247.57) 21.3%, oklch(57.85% 0.1210 246.61) 23.4%, oklch(60.68% 0.1275 245.31) 25.5%, oklch(63.26% 0.1336 243.64) 27.7%, oklch(65.54% 0.1393 241.53) 29.8%, oklch(67.46% 0.1444 238.94) 31.9%, oklch(68.97% 0.1480 235.79) 34.0%, oklch(70.31% 0.1426 231.52) 36.2%, oklch(71.52% 0.1370 226.14) 38.3%, oklch(72.62% 0.1321 219.87) 40.4%, oklch(73.58% 0.1287 212.90) 42.6%, oklch(74.41% 0.1272 205.44) 44.7%, oklch(75.08% 0.1277 197.70) 46.8%, oklch(75.59% 0.1306 189.88) 48.9%, oklch(75.94% 0.1359 182.19) 51.1%, oklch(76.11% 0.1437 174.83) 53.2%, oklch(76.09% 0.1541 168.01) 55.3%, oklch(75.87% 0.1666 161.94) 57.4%, oklch(75.45% 0.1803 156.81) 59.6%, oklch(74.81% 0.1933 152.84) 61.7%, oklch(73.95% 0.1943 150.23) 63.8%, oklch(72.86% 0.1924 149.18) 66.0%, oklch(71.45% 0.1892 149.91) 68.1%, oklch(69.54% 0.1813 152.41) 70.2%, oklch(67.17% 0.1615 156.48) 72.3%, oklch(64.42% 0.1415 161.90) 74.5%, oklch(61.36% 0.1236 168.43) 76.6%, oklch(58.06% 0.1087 175.85) 78.7%, oklch(54.60% 0.0967 183.95) 80.9%, oklch(51.04% 0.0875 192.48) 83.0%, oklch(47.47% 0.0807 201.24) 85.1%, oklch(43.94% 0.0760 209.99) 87.2%, oklch(40.54% 0.0731 218.51) 89.4%, oklch(37.34% 0.0718 226.57) 91.5%, oklch(34.41% 0.0720 233.96) 93.6%, oklch(31.82% 0.0684 240.33) 95.7%, oklch(29.64% 0.0617 245.65) 97.9%, oklch(27.95% 0.0565 249.61) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.28 | 0.056 | 249.6 |
| 2 | 0.685 | 0.147 | 236.9 |
| 3 | 0.724 | 0.192 | 149.2 |
| 4 | 0.28 | 0.056 | 249.6 |

## In these collections

- [Hero section gradients](https://grabient.com/hero-section-gradients)

## Other forms

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