# Analogous purple to blue angular gradient

Analogous purple to blue angular gradient with 32 colors: #4a2e48, #4e334f, #533b58, #584463, #5e4e6f, #63587c, #686288, #6c6b93, #6f739d, #717aa8, #7180b2, #7186bd, #6f8cc7, #6b91d1, #6795d9, #6298df, #5b99e4, #5599e7, #4e97ea, #4694eb, #3f91ec, #398ceb, #3387e9, #2e81e6, #2b7ae2, #2972db, #2869d2, #285fc9, #2855bf, #274cb6, #2745ae, #2640a9. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kWWCrqR5e6VWtvNMv0ANb5BQ`
- Page: https://grabient.com/kWWCrqR5e6VWtvNMv0ANb5BQ?style=angularGradient&steps=32&angle=135
- Drawn as: angular gradient, 32 steps, 135 degrees
- Kinds: light center, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.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 | `#4a2e48` | `oklch(34.65% 0.0579 329.06)` | Purple Pennant | white, 11.7 to 1 |
| 2 | `#4e334f` | `oklch(36.46% 0.0580 325.10)` | Shadow Purple | white, 10.9 to 1 |
| 3 | `#533b58` | `oklch(38.96% 0.0578 319.65)` | Dark Blackberry | white, 9.8 to 1 |
| 4 | `#584463` | `oklch(41.94% 0.0576 313.14)` | Nightly Walk | white, 8.7 to 1 |
| 5 | `#5e4e6f` | `oklch(45.20% 0.0576 306.03)` | Futaai Indigo | white, 7.5 to 1 |
| 6 | `#63587c` | `oklch(48.52% 0.0581 298.75)` | Psychic | white, 6.5 to 1 |
| 7 | `#686288` | `oklch(51.70% 0.0594 291.76)` | Twilight Purple | white, 5.6 to 1 |
| 8 | `#6c6b93` | `oklch(54.53% 0.0619 285.48)` | Campanula Purple | white, 5 to 1 |
| 9 | `#6f739d` | `oklch(56.82% 0.0659 280.32)` | Hyacinth Mauve | black, 4.6 to 1 |
| 10 | `#717aa8` | `oklch(58.88% 0.0716 275.75)` | Night Thistle | black, 5 to 1 |
| 11 | `#7180b2` | `oklch(60.82% 0.0788 271.47)` | Venture Violet | black, 5.4 to 1 |
| 12 | `#7186bd` | `oklch(62.60% 0.0870 267.53)` | Orbital | black, 5.8 to 1 |
| 13 | `#6f8cc7` | `oklch(64.17% 0.0958 263.97)` | Hydrangea | black, 6.2 to 1 |
| 14 | `#6b91d1` | `oklch(65.48% 0.1049 260.83)` | Bashful Blue | black, 6.5 to 1 |
| 15 | `#6795d9` | `oklch(66.49% 0.1136 258.15)` | Little Boy Blue | black, 6.8 to 1 |
| 16 | `#6298df` | `oklch(67.14% 0.1217 255.98)` | Little Boy Blue | black, 7 to 1 |
| 17 | `#5b99e4` | `oklch(67.40% 0.1290 254.36)` | Little Boy Blue | black, 7.1 to 1 |
| 18 | `#5599e7` | `oklch(67.26% 0.1363 253.41)` | United Nations Blue | black, 7 to 1 |
| 19 | `#4e97ea` | `oklch(66.77% 0.1437 253.02)` | United Nations Blue | black, 6.9 to 1 |
| 20 | `#4694eb` | `oklch(65.97% 0.1509 253.11)` | Olympic Blue | black, 6.7 to 1 |
| 21 | `#3f91ec` | `oklch(64.91% 0.1576 253.55)` | Oregon Blue | black, 6.4 to 1 |
| 22 | `#398ceb` | `oklch(63.64% 0.1637 254.25)` | Bleu de France | black, 6.1 to 1 |
| 23 | `#3387e9` | `oklch(62.20% 0.1689 255.08)` | Bleu de France | black, 5.7 to 1 |
| 24 | `#2e81e6` | `oklch(60.64% 0.1728 255.94)` | Seljuk Blue | black, 5.3 to 1 |
| 25 | `#2b7ae2` | `oklch(58.84% 0.1754 256.90)` | Skies of Cyberspace | black, 4.9 to 1 |
| 26 | `#2972db` | `oklch(56.54% 0.1764 258.29)` | Enchanting Sapphire | white, 4.6 to 1 |
| 27 | `#2869d2` | `oklch(53.89% 0.1763 259.96)` | Flickr Blue | white, 5.2 to 1 |
| 28 | `#285fc9` | `oklch(51.09% 0.1754 261.79)` | Janitor | white, 5.9 to 1 |
| 29 | `#2855bf` | `oklch(48.33% 0.1741 263.63)` | Cerulean Blue | white, 6.6 to 1 |
| 30 | `#274cb6` | `oklch(45.79% 0.1726 265.34)` | Night in Manchester | white, 7.4 to 1 |
| 31 | `#2745ae` | `oklch(43.66% 0.1715 266.76)` | Denim | white, 8.2 to 1 |
| 32 | `#2640a9` | `oklch(42.13% 0.1709 267.77)` | Yuè Guāng Lán Blue | white, 8.8 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #4a2e48 0.0%, #4e334f 3.2%, #533b58 6.5%, #584463 9.7%, #5e4e6f 12.9%, #63587c 16.1%, #686288 19.4%, #6c6b93 22.6%, #6f739d 25.8%, #717aa8 29.0%, #7180b2 32.3%, #7186bd 35.5%, #6f8cc7 38.7%, #6b91d1 41.9%, #6795d9 45.2%, #6298df 48.4%, #5b99e4 51.6%, #5599e7 54.8%, #4e97ea 58.1%, #4694eb 61.3%, #3f91ec 64.5%, #398ceb 67.7%, #3387e9 71.0%, #2e81e6 74.2%, #2b7ae2 77.4%, #2972db 80.6%, #2869d2 83.9%, #285fc9 87.1%, #2855bf 90.3%, #274cb6 93.5%, #2745ae 96.8%, #2640a9 100.0%);
background: conic-gradient(from 135deg in oklch, oklch(34.65% 0.0579 329.06) 0.0%, oklch(36.46% 0.0580 325.10) 3.2%, oklch(38.96% 0.0578 319.65) 6.5%, oklch(41.94% 0.0576 313.14) 9.7%, oklch(45.20% 0.0576 306.03) 12.9%, oklch(48.52% 0.0581 298.75) 16.1%, oklch(51.70% 0.0594 291.76) 19.4%, oklch(54.53% 0.0619 285.48) 22.6%, oklch(56.82% 0.0659 280.32) 25.8%, oklch(58.88% 0.0716 275.75) 29.0%, oklch(60.82% 0.0788 271.47) 32.3%, oklch(62.60% 0.0870 267.53) 35.5%, oklch(64.17% 0.0958 263.97) 38.7%, oklch(65.48% 0.1049 260.83) 41.9%, oklch(66.49% 0.1136 258.15) 45.2%, oklch(67.14% 0.1217 255.98) 48.4%, oklch(67.40% 0.1290 254.36) 51.6%, oklch(67.26% 0.1363 253.41) 54.8%, oklch(66.77% 0.1437 253.02) 58.1%, oklch(65.97% 0.1509 253.11) 61.3%, oklch(64.91% 0.1576 253.55) 64.5%, oklch(63.64% 0.1637 254.25) 67.7%, oklch(62.20% 0.1689 255.08) 71.0%, oklch(60.64% 0.1728 255.94) 74.2%, oklch(58.84% 0.1754 256.90) 77.4%, oklch(56.54% 0.1764 258.29) 80.6%, oklch(53.89% 0.1763 259.96) 83.9%, oklch(51.09% 0.1754 261.79) 87.1%, oklch(48.33% 0.1741 263.63) 90.3%, oklch(45.79% 0.1726 265.34) 93.5%, oklch(43.66% 0.1715 266.76) 96.8%, oklch(42.13% 0.1709 267.77) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.346 | 0.058 | 329.1 |
| 2 | 0.563 | 0.065 | 281.5 |
| 3 | 0.673 | 0.125 | 255.1 |
| 4 | 0.602 | 0.174 | 256.1 |
| 5 | 0.421 | 0.171 | 267.8 |

## In these collections

- [Blue and mauve gradients](https://grabient.com/blue-and-mauve-gradients)
- [Shade swatches](https://grabient.com/shade-swatches)

## Other forms

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