# Seamless navy, purple and orange angular gradient

Seamless navy, purple and orange angular gradient with 34 colors: #000721, #00003d, #05004a, #120059, #220067, #350371, #490477, #620078, #7a006f, #940062, #af004f, #c71d39, #db4922, #ec781b, #f6a540, #fcc96a, #ffde87, #ffdf89, #facd72, #f3ac4e, #e8842c, #d95926, #c83637, #b5194b, #9d0060, #820070, #67007b, #4d007d, #370078, #24006d, #140060, #070053, #00073d, #000b29. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kaJFm4p7tEkRIyZ0qEhRsK4KjAtaUrDtA`
- Page: https://grabient.com/kaJFm4p7tEkRIyZ0qEhRsK4KjAtaUrDtA?style=angularGradient&steps=34
- Drawn as: angular gradient, 34 steps, 90 degrees
- Kinds: light center, vivid, multicolor, seamless
- Hues: wide
- Contrast of its darkest and lightest colors: 15.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 | `#000721` | `oklch(14.22% 0.0591 260.33)` | Melanophobia | white, 19.9 to 1 |
| 2 | `#00003d` | `oklch(16.26% 0.1127 264.05)` | Endless Galaxy | white, 19.6 to 1 |
| 3 | `#05004a` | `oklch(18.91% 0.1250 269.00)` | Night Blue | white, 18.9 to 1 |
| 4 | `#120059` | `oklch(22.12% 0.1383 275.68)` | Scoop of Dark Matter | white, 17.9 to 1 |
| 5 | `#220067` | `oklch(25.63% 0.1508 283.78)` | Blackmail | white, 16.6 to 1 |
| 6 | `#350371` | `oklch(29.29% 0.1589 293.26)` | Galactic Federation | white, 14.9 to 1 |
| 7 | `#490477` | `oklch(32.88% 0.1666 304.40)` | Invasive Indigo | white, 13.3 to 1 |
| 8 | `#620078` | `oklch(36.40% 0.1764 317.98)` | Zeus Purple | white, 11.7 to 1 |
| 9 | `#7a006f` | `oklch(40.06% 0.1796 333.28)` | Patriarch | white, 10.1 to 1 |
| 10 | `#940062` | `oklch(44.00% 0.1840 349.35)` | 8 Bit Eggplant | white, 8.6 to 1 |
| 11 | `#af004f` | `oklch(48.44% 0.1946 5.22)` | Purplish Red | white, 7.1 to 1 |
| 12 | `#c71d39` | `oklch(53.54% 0.1998 19.92)` | True Red | white, 5.7 to 1 |
| 13 | `#db4922` | `oklch(60.53% 0.1890 35.28)` | Crab Curry | black, 4.9 to 1 |
| 14 | `#ec781b` | `oklch(69.40% 0.1697 52.18)` | Therapeutic Toucan | black, 7.2 to 1 |
| 15 | `#f6a540` | `oklch(78.52% 0.1471 68.36)` | Lightning Yellow | black, 10.3 to 1 |
| 16 | `#fcc96a` | `oklch(86.26% 0.1264 81.53)` | Sunspark | black, 13.7 to 1 |
| 17 | `#ffde87` | `oklch(91.00% 0.1127 89.45)` | Yellow Corn | black, 16 to 1 |
| 18 | `#ffdf89` | `oklch(91.19% 0.1111 89.97)` | Yellow Corn | black, 16.1 to 1 |
| 19 | `#facd72` | `oklch(86.88% 0.1206 83.26)` | Bright Yarrow | black, 14 to 1 |
| 20 | `#f3ac4e` | `oklch(79.59% 0.1369 71.35)` | Artisans Gold | black, 10.8 to 1 |
| 21 | `#e8842c` | `oklch(70.89% 0.1557 56.32)` | Bourbon Peach | black, 7.7 to 1 |
| 22 | `#d95926` | `oklch(62.34% 0.1726 40.25)` | War Paint Red | black, 5.4 to 1 |
| 23 | `#c83637` | `oklch(55.51% 0.1833 25.21)` | Young Mahogany | white, 5.2 to 1 |
| 24 | `#b5194b` | `oklch(50.34% 0.1877 10.09)` | Carmoisine | white, 6.5 to 1 |
| 25 | `#9d0060` | `oklch(45.67% 0.1885 353.26)` | Morbid Princess | white, 8 to 1 |
| 26 | `#820070` | `oklch(41.40% 0.1833 335.92)` | Patriarch | white, 9.6 to 1 |
| 27 | `#67007b` | `oklch(37.44% 0.1803 319.32)` | Zeus Purple | white, 11.3 to 1 |
| 28 | `#4d007d` | `oklch(33.71% 0.1754 304.70)` | Pigment Indigo | white, 13 to 1 |
| 29 | `#370078` | `oklch(30.13% 0.1674 293.03)` | Galactic Federation | white, 14.6 to 1 |
| 30 | `#24006d` | `oklch(26.63% 0.1573 283.37)` | Bavarian Gentian | white, 16.2 to 1 |
| 31 | `#140060` | `oklch(23.35% 0.1464 275.33)` | The Vast of Night | white, 17.5 to 1 |
| 32 | `#070053` | `oklch(20.43% 0.1354 268.78)` | Ravenclaw | white, 18.5 to 1 |
| 33 | `#00073d` | `oklch(17.97% 0.1022 263.91)` | Stratos | white, 19 to 1 |
| 34 | `#000b29` | `oklch(16.18% 0.0662 260.05)` | Mysterious Depths | white, 19.4 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #000721 0.0%, #00003d 3.0%, #05004a 6.1%, #120059 9.1%, #220067 12.1%, #350371 15.2%, #490477 18.2%, #620078 21.2%, #7a006f 24.2%, #940062 27.3%, #af004f 30.3%, #c71d39 33.3%, #db4922 36.4%, #ec781b 39.4%, #f6a540 42.4%, #fcc96a 45.5%, #ffde87 48.5%, #ffdf89 51.5%, #facd72 54.5%, #f3ac4e 57.6%, #e8842c 60.6%, #d95926 63.6%, #c83637 66.7%, #b5194b 69.7%, #9d0060 72.7%, #820070 75.8%, #67007b 78.8%, #4d007d 81.8%, #370078 84.8%, #24006d 87.9%, #140060 90.9%, #070053 93.9%, #00073d 97.0%, #000b29 100.0%);
background: conic-gradient(from 90deg in oklch, oklch(14.22% 0.0591 260.33) 0.0%, oklch(16.26% 0.1127 264.05) 3.0%, oklch(18.91% 0.1250 269.00) 6.1%, oklch(22.12% 0.1383 275.68) 9.1%, oklch(25.63% 0.1508 283.78) 12.1%, oklch(29.29% 0.1589 293.26) 15.2%, oklch(32.88% 0.1666 304.40) 18.2%, oklch(36.40% 0.1764 317.98) 21.2%, oklch(40.06% 0.1796 333.28) 24.2%, oklch(44.00% 0.1840 349.35) 27.3%, oklch(48.44% 0.1946 5.22) 30.3%, oklch(53.54% 0.1998 19.92) 33.3%, oklch(60.53% 0.1890 35.28) 36.4%, oklch(69.40% 0.1697 52.18) 39.4%, oklch(78.52% 0.1471 68.36) 42.4%, oklch(86.26% 0.1264 81.53) 45.5%, oklch(91.00% 0.1127 89.45) 48.5%, oklch(91.19% 0.1111 89.97) 51.5%, oklch(86.88% 0.1206 83.26) 54.5%, oklch(79.59% 0.1369 71.35) 57.6%, oklch(70.89% 0.1557 56.32) 60.6%, oklch(62.34% 0.1726 40.25) 63.6%, oklch(55.51% 0.1833 25.21) 66.7%, oklch(50.34% 0.1877 10.09) 69.7%, oklch(45.67% 0.1885 353.26) 72.7%, oklch(41.40% 0.1833 335.92) 75.8%, oklch(37.44% 0.1803 319.32) 78.8%, oklch(33.71% 0.1754 304.70) 81.8%, oklch(30.13% 0.1674 293.03) 84.8%, oklch(26.63% 0.1573 283.37) 87.9%, oklch(23.35% 0.1464 275.33) 90.9%, oklch(20.43% 0.1354 268.78) 93.9%, oklch(17.97% 0.1022 263.91) 97.0%, oklch(16.18% 0.0662 260.05) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.142 | 0.123 | 259.5 |
| 2 | 0.311 | 0.163 | 298.6 |
| 3 | 0.535 | 0.2 | 379.9 |
| 4 | 0.917 | 0.11 | 450.7 |
| 5 | 0.555 | 0.183 | 385.2 |
| 6 | 0.319 | 0.178 | 298.6 |
| 7 | 0.161 | 0.121 | 259.5 |

## In these collections

- [Stained glass colors](https://grabient.com/stained-glass-colors)
- [Dark multicolor gradients](https://grabient.com/dark-multicolor-gradients)

## Other forms

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