# Vivid analogous blue to purple angular gradient

Vivid analogous blue to purple angular gradient with 32 colors: #0084b7, #0083b8, #0082ba, #0081bb, #007fbe, #007ec0, #007cc3, #007ac6, #0077ca, #0075ce, #0072d2, #006ed7, #006ade, #0064e5, #135ee7, #225be5, #2d57e2, #3553df, #3b50dc, #414dda, #474bd8, #4d49d6, #5248d5, #5948d5, #5f48d5, #6648d5, #6c49d5, #7249d5, #774ad5, #7c4bd5, #804cd5, #834cd4. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kUk5GnRlBCL_MQpGSMKA`
- Page: https://grabient.com/kUk5GnRlBCL_MQpGSMKA?style=angularGradient&steps=32&angle=135
- Drawn as: angular gradient, 32 steps, 135 degrees
- Kinds: even lightness, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.5 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 | `#0084b7` | `oklch(57.88% 0.1225 234.86)` | Lucario Blue | black, 4.9 to 1 |
| 2 | `#0083b8` | `oklch(57.73% 0.1241 235.94)` | Lucario Blue | black, 4.9 to 1 |
| 3 | `#0082ba` | `oklch(57.55% 0.1262 237.30)` | Tall Ships | black, 4.9 to 1 |
| 4 | `#0081bb` | `oklch(57.35% 0.1290 238.90)` | Tall Ships | black, 4.8 to 1 |
| 5 | `#007fbe` | `oklch(57.12% 0.1324 240.70)` | Honolulu Blue | black, 4.7 to 1 |
| 6 | `#007ec0` | `oklch(56.86% 0.1366 242.65)` | Honolulu Blue | black, 4.7 to 1 |
| 7 | `#007cc3` | `oklch(56.58% 0.1416 244.71)` | Star of Life | black, 4.6 to 1 |
| 8 | `#007ac6` | `oklch(56.28% 0.1475 246.84)` | Diva Blue | black, 4.5 to 1 |
| 9 | `#0077ca` | `oklch(55.96% 0.1544 249.00)` | Science Blue | white, 4.6 to 1 |
| 10 | `#0075ce` | `oklch(55.61% 0.1623 251.14)` | Science Blue | white, 4.7 to 1 |
| 11 | `#0072d2` | `oklch(55.25% 0.1715 253.21)` | Wizard Blue | white, 4.8 to 1 |
| 12 | `#006ed7` | `oklch(54.84% 0.1820 255.22)` | Flickr Blue | white, 4.9 to 1 |
| 13 | `#006ade` | `oklch(54.32% 0.1950 257.28)` | Blue Ruin | white, 5.1 to 1 |
| 14 | `#0064e5` | `oklch(53.72% 0.2122 259.38)` | Old Gungeon Red | white, 5.3 to 1 |
| 15 | `#135ee7` | `oklch(53.06% 0.2188 261.51)` | Azul | white, 5.5 to 1 |
| 16 | `#225be5` | `oklch(52.39% 0.2176 263.67)` | Veteran’s Day Blue | white, 5.7 to 1 |
| 17 | `#2d57e2` | `oklch(51.75% 0.2161 265.86)` | Veteran’s Day Blue | white, 5.9 to 1 |
| 18 | `#3553df` | `oklch(51.16% 0.2145 268.05)` | Veteran’s Day Blue | white, 6 to 1 |
| 19 | `#3b50dc` | `oklch(50.65% 0.2130 270.25)` | Dark Soft Violet | white, 6.2 to 1 |
| 20 | `#414dda` | `oklch(50.27% 0.2115 272.44)` | Dark Soft Violet | white, 6.3 to 1 |
| 21 | `#474bd8` | `oklch(50.05% 0.2102 274.62)` | Dark Soft Violet | white, 6.4 to 1 |
| 22 | `#4d49d6` | `oklch(50.01% 0.2091 276.78)` | Dark Soft Violet | white, 6.4 to 1 |
| 23 | `#5248d5` | `oklch(50.20% 0.2081 279.08)` | Iris | white, 6.4 to 1 |
| 24 | `#5948d5` | `oklch(50.56% 0.2070 281.51)` | Iris | white, 6.3 to 1 |
| 25 | `#5f48d5` | `oklch(51.07% 0.2059 284.00)` | Iris | white, 6.2 to 1 |
| 26 | `#6648d5` | `oklch(51.68% 0.2048 286.50)` | Waiporoporo Purple | white, 6 to 1 |
| 27 | `#6c49d5` | `oklch(52.35% 0.2038 288.94)` | Aconite Purple | white, 5.9 to 1 |
| 28 | `#7249d5` | `oklch(53.04% 0.2028 291.27)` | Aconite Purple | white, 5.7 to 1 |
| 29 | `#774ad5` | `oklch(53.70% 0.2019 293.43)` | Aconite Purple | white, 5.6 to 1 |
| 30 | `#7c4bd5` | `oklch(54.30% 0.2010 295.35)` | Aconite Purple | white, 5.4 to 1 |
| 31 | `#804cd5` | `oklch(54.78% 0.2003 296.98)` | Aconite Purple | white, 5.3 to 1 |
| 32 | `#834cd4` | `oklch(55.12% 0.1998 298.25)` | Aconite Purple | white, 5.3 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #0084b7 0.0%, #0083b8 3.2%, #0082ba 6.5%, #0081bb 9.7%, #007fbe 12.9%, #007ec0 16.1%, #007cc3 19.4%, #007ac6 22.6%, #0077ca 25.8%, #0075ce 29.0%, #0072d2 32.3%, #006ed7 35.5%, #006ade 38.7%, #0064e5 41.9%, #135ee7 45.2%, #225be5 48.4%, #2d57e2 51.6%, #3553df 54.8%, #3b50dc 58.1%, #414dda 61.3%, #474bd8 64.5%, #4d49d6 67.7%, #5248d5 71.0%, #5948d5 74.2%, #5f48d5 77.4%, #6648d5 80.6%, #6c49d5 83.9%, #7249d5 87.1%, #774ad5 90.3%, #7c4bd5 93.5%, #804cd5 96.8%, #834cd4 100.0%);
background: conic-gradient(from 135deg in oklch, oklch(57.88% 0.1225 234.86) 0.0%, oklch(57.73% 0.1241 235.94) 3.2%, oklch(57.55% 0.1262 237.30) 6.5%, oklch(57.35% 0.1290 238.90) 9.7%, oklch(57.12% 0.1324 240.70) 12.9%, oklch(56.86% 0.1366 242.65) 16.1%, oklch(56.58% 0.1416 244.71) 19.4%, oklch(56.28% 0.1475 246.84) 22.6%, oklch(55.96% 0.1544 249.00) 25.8%, oklch(55.61% 0.1623 251.14) 29.0%, oklch(55.25% 0.1715 253.21) 32.3%, oklch(54.84% 0.1820 255.22) 35.5%, oklch(54.32% 0.1950 257.28) 38.7%, oklch(53.72% 0.2122 259.38) 41.9%, oklch(53.06% 0.2188 261.51) 45.2%, oklch(52.39% 0.2176 263.67) 48.4%, oklch(51.75% 0.2161 265.86) 51.6%, oklch(51.16% 0.2145 268.05) 54.8%, oklch(50.65% 0.2130 270.25) 58.1%, oklch(50.27% 0.2115 272.44) 61.3%, oklch(50.05% 0.2102 274.62) 64.5%, oklch(50.01% 0.2091 276.78) 67.7%, oklch(50.20% 0.2081 279.08) 71.0%, oklch(50.56% 0.2070 281.51) 74.2%, oklch(51.07% 0.2059 284.00) 77.4%, oklch(51.68% 0.2048 286.50) 80.6%, oklch(52.35% 0.2038 288.94) 83.9%, oklch(53.04% 0.2028 291.27) 87.1%, oklch(53.70% 0.2019 293.43) 90.3%, oklch(54.30% 0.2010 295.35) 93.5%, oklch(54.78% 0.2003 296.98) 96.8%, oklch(55.12% 0.1998 298.25) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.579 | 0.2 | 234.8 |
| 2 | 0.551 | 0.22 | 253.9 |
| 3 | 0.5 | 0.209 | 276.1 |
| 4 | 0.551 | 0.2 | 298.2 |

## In these collections

- [Blue and purple gradients](https://grabient.com/blue-and-purple-gradients)

## Other forms

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