# Blue, purple and brown angular gradient

Blue, purple and brown angular gradient with 32 colors: #4444aa, #4542a8, #453ea5, #463aa2, #47359f, #48319b, #492d98, #4b2a94, #4c2791, #4d258e, #4f238a, #502187, #522083, #542080, #56217c, #582179, #5a2376, #5c2472, #5e276e, #61296a, #622d67, #633163, #633660, #653a5d, #673e59, #694255, #6d4650, #714b4a, #725146, #725844, #705e45, #6e6247. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYcnPFsrvBS-4QYxLUHtpbDL-Py4`
- Page: https://grabient.com/kYcnPFsrvBS-4QYxLUHtpbDL-Py4?style=angularGradient&steps=32&angle=30
- Drawn as: angular gradient, 32 steps, 30 degrees
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.8 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 | `#4444aa` | `oklch(44.88% 0.1585 277.73)` | Megadrive Screen | white, 7.8 to 1 |
| 2 | `#4542a8` | `oklch(44.32% 0.1592 278.93)` | Megadrive Screen | white, 8.1 to 1 |
| 3 | `#453ea5` | `oklch(43.51% 0.1604 280.55)` | Megadrive Screen | white, 8.4 to 1 |
| 4 | `#463aa2` | `oklch(42.57% 0.1617 282.48)` | Royal Wisteria | white, 8.7 to 1 |
| 5 | `#47359f` | `oklch(41.58% 0.1629 284.61)` | Royal Wisteria | white, 9.2 to 1 |
| 6 | `#48319b` | `oklch(40.66% 0.1638 286.80)` | Galactic Purple | white, 9.6 to 1 |
| 7 | `#492d98` | `oklch(39.89% 0.1640 288.95)` | Galactic Purple | white, 9.9 to 1 |
| 8 | `#4b2a94` | `oklch(39.30% 0.1636 291.00)` | Galactic Purple | white, 10.2 to 1 |
| 9 | `#4c2791` | `oklch(38.77% 0.1629 293.10)` | KSU Purple | white, 10.4 to 1 |
| 10 | `#4d258e` | `oklch(38.31% 0.1618 295.24)` | KSU Purple | white, 10.6 to 1 |
| 11 | `#4f238a` | `oklch(37.93% 0.1603 297.45)` | KSU Purple | white, 10.8 to 1 |
| 12 | `#502187` | `oklch(37.64% 0.1582 299.74)` | Kalish Violet | white, 10.9 to 1 |
| 13 | `#522083` | `oklch(37.45% 0.1556 302.12)` | Kalish Violet | white, 11 to 1 |
| 14 | `#542080` | `oklch(37.36% 0.1523 304.56)` | Kalish Violet | white, 11 to 1 |
| 15 | `#56217c` | `oklch(37.38% 0.1488 306.97)` | Kalish Violet | white, 11 to 1 |
| 16 | `#582179` | `oklch(37.49% 0.1447 309.42)` | Violethargic | white, 10.9 to 1 |
| 17 | `#5a2376` | `oklch(37.68% 0.1400 312.01)` | Violethargic | white, 10.8 to 1 |
| 18 | `#5c2472` | `oklch(37.97% 0.1346 314.81)` | Violethargic | white, 10.7 to 1 |
| 19 | `#5e276e` | `oklch(38.33% 0.1283 317.94)` | Violethargic | white, 10.5 to 1 |
| 20 | `#61296a` | `oklch(38.77% 0.1208 321.34)` | Imperial | white, 10.3 to 1 |
| 21 | `#622d67` | `oklch(39.29% 0.1113 324.10)` | Imperial | white, 10 to 1 |
| 22 | `#633163` | `oklch(39.90% 0.1004 326.62)` | Wineberry | white, 9.7 to 1 |
| 23 | `#633660` | `oklch(40.59% 0.0889 329.67)` | Opulent Purple | white, 9.4 to 1 |
| 24 | `#653a5d` | `oklch(41.36% 0.0778 334.01)` | Precious Jewels | white, 9 to 1 |
| 25 | `#673e59` | `oklch(42.20% 0.0681 340.39)` | Primitive Plum | white, 8.7 to 1 |
| 26 | `#694255` | `oklch(43.10% 0.0607 349.63)` | Delicious Berry | white, 8.3 to 1 |
| 27 | `#6d4650` | `oklch(44.22% 0.0553 3.53)` | Mixed Berry Jam | white, 7.9 to 1 |
| 28 | `#714b4a` | `oklch(45.51% 0.0512 21.12)` | Marron | white, 7.4 to 1 |
| 29 | `#725146` | `oklch(46.86% 0.0482 40.26)` | Bigfoot | white, 7 to 1 |
| 30 | `#725844` | `oklch(48.14% 0.0460 58.83)` | Cinnamon Crumble | white, 6.5 to 1 |
| 31 | `#705e45` | `oklch(49.23% 0.0443 74.71)` | Prairie Foliage | white, 6.2 to 1 |
| 32 | `#6e6247` | `oklch(50.00% 0.0427 85.76)` | Kelp Brown | white, 6 to 1 |

## CSS

```css
background: conic-gradient(from 30deg, #4444aa 0.0%, #4542a8 3.2%, #453ea5 6.5%, #463aa2 9.7%, #47359f 12.9%, #48319b 16.1%, #492d98 19.4%, #4b2a94 22.6%, #4c2791 25.8%, #4d258e 29.0%, #4f238a 32.3%, #502187 35.5%, #522083 38.7%, #542080 41.9%, #56217c 45.2%, #582179 48.4%, #5a2376 51.6%, #5c2472 54.8%, #5e276e 58.1%, #61296a 61.3%, #622d67 64.5%, #633163 67.7%, #633660 71.0%, #653a5d 74.2%, #673e59 77.4%, #694255 80.6%, #6d4650 83.9%, #714b4a 87.1%, #725146 90.3%, #725844 93.5%, #705e45 96.8%, #6e6247 100.0%);
background: conic-gradient(from 30deg in oklch, oklch(44.88% 0.1585 277.73) 0.0%, oklch(44.32% 0.1592 278.93) 3.2%, oklch(43.51% 0.1604 280.55) 6.5%, oklch(42.57% 0.1617 282.48) 9.7%, oklch(41.58% 0.1629 284.61) 12.9%, oklch(40.66% 0.1638 286.80) 16.1%, oklch(39.89% 0.1640 288.95) 19.4%, oklch(39.30% 0.1636 291.00) 22.6%, oklch(38.77% 0.1629 293.10) 25.8%, oklch(38.31% 0.1618 295.24) 29.0%, oklch(37.93% 0.1603 297.45) 32.3%, oklch(37.64% 0.1582 299.74) 35.5%, oklch(37.45% 0.1556 302.12) 38.7%, oklch(37.36% 0.1523 304.56) 41.9%, oklch(37.38% 0.1488 306.97) 45.2%, oklch(37.49% 0.1447 309.42) 48.4%, oklch(37.68% 0.1400 312.01) 51.6%, oklch(37.97% 0.1346 314.81) 54.8%, oklch(38.33% 0.1283 317.94) 58.1%, oklch(38.77% 0.1208 321.34) 61.3%, oklch(39.29% 0.1113 324.10) 64.5%, oklch(39.90% 0.1004 326.62) 67.7%, oklch(40.59% 0.0889 329.67) 71.0%, oklch(41.36% 0.0778 334.01) 74.2%, oklch(42.20% 0.0681 340.39) 77.4%, oklch(43.10% 0.0607 349.63) 80.6%, oklch(44.22% 0.0553 3.53) 83.9%, oklch(45.51% 0.0512 21.12) 87.1%, oklch(46.86% 0.0482 40.26) 90.3%, oklch(48.14% 0.0460 58.83) 93.5%, oklch(49.23% 0.0443 74.71) 96.8%, oklch(50.00% 0.0427 85.76) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.449 | 0.158 | 277.7 |
| 2 | 0.398 | 0.164 | 289.4 |
| 3 | 0.374 | 0.154 | 303.1 |
| 4 | 0.386 | 0.124 | 320 |
| 5 | 0.429 | 0.062 | 347.5 |
| 6 | 0.5 | 0.043 | 445.8 |

## In these collections

- [Moody gradients](https://grabient.com/moody-gradients)

## Other forms

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