# Navy, purple, gray and light green angular gradient

Navy, purple, gray and light green angular gradient with 32 colors: #000a2a, #000935, #020048, #08004e, #110055, #1a005c, #230063, #2d026a, #39066f, #450e74, #521977, #5e2679, #68387c, #71497e, #7b5a80, #866982, #937685, #a28286, #ae8f85, #b69e84, #b8ae87, #b9bd8d, #bbca8f, #c0d78c, #c6e284, #cdeb7a, #d0f374, #cff971, #cefc6d, #cdff69, #ceff76, #d0ff81. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaKVO5HjRCa62Q1JkMM4hZPXO4wb3xsBg`
- Page: https://grabient.com/kaKVO5HjRCa62Q1JkMM4hZPXO4wb3xsBg?style=angularGradient&steps=32
- Drawn as: angular gradient, 32 steps, 90 degrees
- Kinds: dark to light, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 16.9 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 | `#000a2a` | `oklch(16.18% 0.0688 260.74)` | Mysterious Depths | white, 19.4 to 1 |
| 2 | `#000935` | `oklch(17.07% 0.0884 263.26)` | Oblivion | white, 19.2 to 1 |
| 3 | `#020048` | `oklch(18.31% 0.1239 266.47)` | Night Blue | white, 19.1 to 1 |
| 4 | `#08004e` | `oklch(19.77% 0.1287 270.80)` | Night Blue | white, 18.7 to 1 |
| 5 | `#110055` | `oklch(21.46% 0.1343 275.56)` | Scoop of Dark Matter | white, 18.1 to 1 |
| 6 | `#1a005c` | `oklch(23.33% 0.1407 280.44)` | Darth Torus | white, 17.5 to 1 |
| 7 | `#230063` | `oklch(25.31% 0.1467 285.49)` | Blackmail | white, 16.7 to 1 |
| 8 | `#2d026a` | `oklch(27.49% 0.1514 290.91)` | Deep Violet | white, 15.7 to 1 |
| 9 | `#39066f` | `oklch(29.88% 0.1550 296.60)` | Galactic Federation | white, 14.6 to 1 |
| 10 | `#450e74` | `oklch(32.54% 0.1557 302.35)` | Invasive Indigo | white, 13.3 to 1 |
| 11 | `#521977` | `oklch(35.53% 0.1516 308.00)` | Velvet Vortex | white, 11.9 to 1 |
| 12 | `#5e2679` | `oklch(38.97% 0.1400 312.68)` | Berry Blackmail | white, 10.3 to 1 |
| 13 | `#68387c` | `oklch(42.93% 0.1194 315.15)` | Comtesse | white, 8.6 to 1 |
| 14 | `#71497e` | `oklch(47.21% 0.0944 317.46)` | Lilac Violet | white, 7 to 1 |
| 15 | `#7b5a80` | `oklch(51.60% 0.0701 321.86)` | Dr Who | white, 5.7 to 1 |
| 16 | `#866982` | `oklch(55.86% 0.0513 330.60)` | Imaginary Mauve | white, 4.8 to 1 |
| 17 | `#937685` | `oklch(59.84% 0.0419 346.32)` | Tragic Juliet | black, 5.1 to 1 |
| 18 | `#a28286` | `oklch(63.78% 0.0388 10.99)` | Tropical Orchid | black, 6 to 1 |
| 19 | `#ae8f85` | `oklch(67.67% 0.0403 40.55)` | Hollow Brown | black, 7 to 1 |
| 20 | `#b69e84` | `oklch(71.42% 0.0456 70.26)` | Nankeen | black, 8.2 to 1 |
| 21 | `#b8ae87` | `oklch(74.96% 0.0539 95.40)` | Hemp Fabric | black, 9.4 to 1 |
| 22 | `#b9bd8d` | `oklch(78.23% 0.0646 111.51)` | Gloaming Green | black, 10.6 to 1 |
| 23 | `#bbca8f` | `oklch(81.38% 0.0809 119.54)` | Marsh Fern | black, 11.9 to 1 |
| 24 | `#c0d78c` | `oklch(84.36% 0.1013 122.37)` | Tree Line | black, 13.3 to 1 |
| 25 | `#c6e284` | `oklch(87.06% 0.1229 122.28)` | Yellow Green Shade | black, 14.5 to 1 |
| 26 | `#cdeb7a` | `oklch(89.39% 0.1427 121.54)` | Venomous Sting | black, 15.7 to 1 |
| 27 | `#d0f374` | `oklch(91.21% 0.1578 122.37)` | Mystic Green | black, 16.6 to 1 |
| 28 | `#cff971` | `oklch(92.44% 0.1690 123.83)` | Honeydew Peel | black, 17.3 to 1 |
| 29 | `#cefc6d` | `oklch(93.18% 0.1779 124.81)` | Pear Spritz | black, 17.8 to 1 |
| 30 | `#cdff69` | `oklch(93.59% 0.1848 125.46)` | Green of Bhabua | black, 18 to 1 |
| 31 | `#ceff76` | `oklch(93.84% 0.1730 125.91)` | Green Shimmer | black, 18.1 to 1 |
| 32 | `#d0ff81` | `oklch(94.09% 0.1620 126.30)` | Green Shimmer | black, 18.2 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #000a2a 0.0%, #000935 3.2%, #020048 6.5%, #08004e 9.7%, #110055 12.9%, #1a005c 16.1%, #230063 19.4%, #2d026a 22.6%, #39066f 25.8%, #450e74 29.0%, #521977 32.3%, #5e2679 35.5%, #68387c 38.7%, #71497e 41.9%, #7b5a80 45.2%, #866982 48.4%, #937685 51.6%, #a28286 54.8%, #ae8f85 58.1%, #b69e84 61.3%, #b8ae87 64.5%, #b9bd8d 67.7%, #bbca8f 71.0%, #c0d78c 74.2%, #c6e284 77.4%, #cdeb7a 80.6%, #d0f374 83.9%, #cff971 87.1%, #cefc6d 90.3%, #cdff69 93.5%, #ceff76 96.8%, #d0ff81 100.0%);
background: conic-gradient(from 90deg in oklch, oklch(16.18% 0.0688 260.74) 0.0%, oklch(17.07% 0.0884 263.26) 3.2%, oklch(18.31% 0.1239 266.47) 6.5%, oklch(19.77% 0.1287 270.80) 9.7%, oklch(21.46% 0.1343 275.56) 12.9%, oklch(23.33% 0.1407 280.44) 16.1%, oklch(25.31% 0.1467 285.49) 19.4%, oklch(27.49% 0.1514 290.91) 22.6%, oklch(29.88% 0.1550 296.60) 25.8%, oklch(32.54% 0.1557 302.35) 29.0%, oklch(35.53% 0.1516 308.00) 32.3%, oklch(38.97% 0.1400 312.68) 35.5%, oklch(42.93% 0.1194 315.15) 38.7%, oklch(47.21% 0.0944 317.46) 41.9%, oklch(51.60% 0.0701 321.86) 45.2%, oklch(55.86% 0.0513 330.60) 48.4%, oklch(59.84% 0.0419 346.32) 51.6%, oklch(63.78% 0.0388 10.99) 54.8%, oklch(67.67% 0.0403 40.55) 58.1%, oklch(71.42% 0.0456 70.26) 61.3%, oklch(74.96% 0.0539 95.40) 64.5%, oklch(78.23% 0.0646 111.51) 67.7%, oklch(81.38% 0.0809 119.54) 71.0%, oklch(84.36% 0.1013 122.37) 74.2%, oklch(87.06% 0.1229 122.28) 77.4%, oklch(89.39% 0.1427 121.54) 80.6%, oklch(91.21% 0.1578 122.37) 83.9%, oklch(92.44% 0.1690 123.83) 87.1%, oklch(93.18% 0.1779 124.81) 90.3%, oklch(93.59% 0.1848 125.46) 93.5%, oklch(93.84% 0.1730 125.91) 96.8%, oklch(94.09% 0.1620 126.30) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.161 | 0.114 | 260.2 |
| 2 | 0.236 | 0.143 | 281.3 |
| 3 | 0.366 | 0.149 | 309.8 |
| 4 | 0.579 | 0.045 | 337.3 |
| 5 | 0.772 | 0.061 | 467.3 |
| 6 | 0.909 | 0.156 | 482.1 |
| 7 | 0.941 | 0.194 | 486.3 |

## In these collections

- [Green multicolor gradients](https://grabient.com/green-multicolor-gradients)

## Other forms

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