# Analogous purple to navy linear gradient

Analogous purple to navy linear gradient with 32 colors: #c266c3, #be63c0, #b95fbd, #b35bb9, #ac55b5, #a550b0, #9d4aab, #9645a6, #8e40a0, #863b9b, #7f3696, #773392, #702f8d, #682c87, #602982, #58267c, #512476, #4a2170, #431f6a, #3d1d65, #381b5f, #331a5a, #2f1955, #2b1851, #28174c, #251747, #221743, #20163f, #1e163b, #1c1638, #1b1635, #1a1533. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUpXjou7o-qWovacFL7A`
- Page: https://grabient.com/kUpXjou7o-qWovacFL7A?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: light to dark, dark
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.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 | `#c266c3` | `oklch(64.96% 0.1654 326.95)` | Purple Urn Orchid | black, 5.9 to 1 |
| 2 | `#be63c0` | `oklch(63.92% 0.1652 326.38)` | Purple Urn Orchid | black, 5.7 to 1 |
| 3 | `#b95fbd` | `oklch(62.58% 0.1653 325.70)` | Mazzy Star | black, 5.4 to 1 |
| 4 | `#b35bb9` | `oklch(61.00% 0.1654 324.91)` | Royalty Loyalty | black, 5 to 1 |
| 5 | `#ac55b5` | `oklch(59.23% 0.1656 324.02)` | Orchid Dottyback | black, 4.7 to 1 |
| 6 | `#a550b0` | `oklch(57.32% 0.1656 323.03)` | Purple Plum | white, 4.8 to 1 |
| 7 | `#9d4aab` | `oklch(55.31% 0.1655 321.95)` | Purpureus | white, 5.2 to 1 |
| 8 | `#9645a6` | `oklch(53.27% 0.1650 320.79)` | Tyrian Shimmer | white, 5.6 to 1 |
| 9 | `#8e40a0` | `oklch(51.24% 0.1641 319.55)` | Murasaki Purple | white, 6.2 to 1 |
| 10 | `#863b9b` | `oklch(49.28% 0.1627 318.24)` | Cadmium Violet | white, 6.7 to 1 |
| 11 | `#7f3696` | `oklch(47.43% 0.1607 316.86)` | Dull Violet | white, 7.3 to 1 |
| 12 | `#773392` | `oklch(45.69% 0.1580 315.38)` | Skeletor’s Cape | white, 7.8 to 1 |
| 13 | `#702f8d` | `oklch(43.90% 0.1546 313.69)` | True Purple | white, 8.4 to 1 |
| 14 | `#682c87` | `oklch(42.08% 0.1506 311.84)` | True Purple | white, 9.1 to 1 |
| 15 | `#602982` | `oklch(40.25% 0.1462 309.87)` | Purple Patch | white, 9.8 to 1 |
| 16 | `#58267c` | `oklch(38.42% 0.1413 307.84)` | Regalia | white, 10.5 to 1 |
| 17 | `#512476` | `oklch(36.64% 0.1363 305.78)` | Purple Seduction | white, 11.3 to 1 |
| 18 | `#4a2170` | `oklch(34.92% 0.1310 303.75)` | Fading Horizon | white, 12 to 1 |
| 19 | `#431f6a` | `oklch(33.28% 0.1256 301.81)` | Fading Horizon | white, 12.7 to 1 |
| 20 | `#3d1d65` | `oklch(31.75% 0.1202 299.98)` | Christalle | white, 13.4 to 1 |
| 21 | `#381b5f` | `oklch(30.37% 0.1150 298.34)` | Christalle | white, 14 to 1 |
| 22 | `#331a5a` | `oklch(29.13% 0.1099 296.91)` | Fabric of Space | white, 14.6 to 1 |
| 23 | `#2f1955` | `oklch(28.03% 0.1044 295.60)` | Fabric of Space | white, 15.1 to 1 |
| 24 | `#2b1851` | `oklch(27.02% 0.0985 294.39)` | Russian Violet | white, 15.5 to 1 |
| 25 | `#28174c` | `oklch(26.12% 0.0924 293.26)` | Silent Orbit | white, 15.9 to 1 |
| 26 | `#251747` | `oklch(25.31% 0.0862 292.22)` | Prune Plum | white, 16.2 to 1 |
| 27 | `#221743` | `oklch(24.59% 0.0800 291.27)` | Prune Plum | white, 16.5 to 1 |
| 28 | `#20163f` | `oklch(23.95% 0.0741 290.41)` | Prune Plum | white, 16.7 to 1 |
| 29 | `#1e163b` | `oklch(23.38% 0.0687 289.63)` | Prune Plum | white, 16.9 to 1 |
| 30 | `#1c1638` | `oklch(22.88% 0.0638 288.95)` | Lost in Sadness | white, 17.1 to 1 |
| 31 | `#1b1635` | `oklch(22.43% 0.0597 288.36)` | Lost in Sadness | white, 17.3 to 1 |
| 32 | `#1a1533` | `oklch(22.05% 0.0565 287.85)` | Lost in Sadness | white, 17.4 to 1 |

## CSS

```css
background: linear-gradient(180deg, #c266c3 0.0%, #be63c0 3.2%, #b95fbd 6.5%, #b35bb9 9.7%, #ac55b5 12.9%, #a550b0 16.1%, #9d4aab 19.4%, #9645a6 22.6%, #8e40a0 25.8%, #863b9b 29.0%, #7f3696 32.3%, #773392 35.5%, #702f8d 38.7%, #682c87 41.9%, #602982 45.2%, #58267c 48.4%, #512476 51.6%, #4a2170 54.8%, #431f6a 58.1%, #3d1d65 61.3%, #381b5f 64.5%, #331a5a 67.7%, #2f1955 71.0%, #2b1851 74.2%, #28174c 77.4%, #251747 80.6%, #221743 83.9%, #20163f 87.1%, #1e163b 90.3%, #1c1638 93.5%, #1b1635 96.8%, #1a1533 100.0%);
background: linear-gradient(180deg in oklch, oklch(64.96% 0.1654 326.95) 0.0%, oklch(63.92% 0.1652 326.38) 3.2%, oklch(62.58% 0.1653 325.70) 6.5%, oklch(61.00% 0.1654 324.91) 9.7%, oklch(59.23% 0.1656 324.02) 12.9%, oklch(57.32% 0.1656 323.03) 16.1%, oklch(55.31% 0.1655 321.95) 19.4%, oklch(53.27% 0.1650 320.79) 22.6%, oklch(51.24% 0.1641 319.55) 25.8%, oklch(49.28% 0.1627 318.24) 29.0%, oklch(47.43% 0.1607 316.86) 32.3%, oklch(45.69% 0.1580 315.38) 35.5%, oklch(43.90% 0.1546 313.69) 38.7%, oklch(42.08% 0.1506 311.84) 41.9%, oklch(40.25% 0.1462 309.87) 45.2%, oklch(38.42% 0.1413 307.84) 48.4%, oklch(36.64% 0.1363 305.78) 51.6%, oklch(34.92% 0.1310 303.75) 54.8%, oklch(33.28% 0.1256 301.81) 58.1%, oklch(31.75% 0.1202 299.98) 61.3%, oklch(30.37% 0.1150 298.34) 64.5%, oklch(29.13% 0.1099 296.91) 67.7%, oklch(28.03% 0.1044 295.60) 71.0%, oklch(27.02% 0.0985 294.39) 74.2%, oklch(26.12% 0.0924 293.26) 77.4%, oklch(25.31% 0.0862 292.22) 80.6%, oklch(24.59% 0.0800 291.27) 83.9%, oklch(23.95% 0.0741 290.41) 87.1%, oklch(23.38% 0.0687 289.63) 90.3%, oklch(22.88% 0.0638 288.95) 93.5%, oklch(22.43% 0.0597 288.36) 96.8%, oklch(22.05% 0.0565 287.85) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.65 | 0.165 | 327 |
| 2 | 0.469 | 0.16 | 316.4 |
| 3 | 0.295 | 0.112 | 297.4 |
| 4 | 0.22 | 0.056 | 287.9 |

## In these collections

- [Indigo gradients](https://grabient.com/indigo-gradients)

## Other forms

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