# Purple, blue, green and brown linear gradient

Purple, blue, green and brown linear gradient with 32 colors: #662680, #652788, #632894, #602ba1, #5c31ae, #5a38b7, #5a41bf, #5a4cc6, #5a57cc, #5764d1, #5473d2, #5482d0, #578fcc, #5b9cc9, #59a7c6, #54b2c1, #54bdb7, #5ec4a9, #69c89b, #6ecb8f, #6ecd82, #6ccd76, #6fcb69, #74c55e, #75be57, #76b452, #7baa4b, #839e40, #8d8f38, #928039, #907440, #8c6c46. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcZ27fuUQ9MW9PhVobt4Kg3WC6vVVLz4xpi5Q`
- Page: https://grabient.com/kcZ27fuUQ9MW9PhVobt4Kg3WC6vVVLz4xpi5Q?steps=32&angle=270
- Drawn as: linear gradient, 32 steps, 270 degrees
- Kinds: light center, multicolor
- Hues: complementary
- 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 | `#662680` | `oklch(40.55% 0.1516 314.30)` | Sapphire Siren | white, 9.7 to 1 |
| 2 | `#652788` | `oklch(41.13% 0.1583 310.47)` | Sapphire Siren | white, 9.5 to 1 |
| 3 | `#632894` | `oklch(41.90% 0.1684 304.96)` | Queens of the Dead | white, 9.2 to 1 |
| 4 | `#602ba1` | `oklch(42.92% 0.1787 298.82)` | Wild Violet | white, 8.9 to 1 |
| 5 | `#5c31ae` | `oklch(44.23% 0.1860 293.10)` | Royalty | white, 8.4 to 1 |
| 6 | `#5a38b7` | `oklch(45.86% 0.1880 288.80)` | Illustrious Indigo | white, 7.8 to 1 |
| 7 | `#5a41bf` | `oklch(47.86% 0.1869 285.78)` | Dragonlord Purple | white, 7.1 to 1 |
| 8 | `#5a4cc6` | `oklch(50.12% 0.1830 283.04)` | Iris | white, 6.4 to 1 |
| 9 | `#5a57cc` | `oklch(52.56% 0.1762 279.55)` | Circumorbital Ring | white, 5.7 to 1 |
| 10 | `#5764d1` | `oklch(55.09% 0.1665 274.32)` | Borage Blue | white, 5 to 1 |
| 11 | `#5473d2` | `oklch(57.88% 0.1503 267.82)` | Cornflower | black, 4.7 to 1 |
| 12 | `#5482d0` | `oklch(60.88% 0.1294 260.33)` | Blue Sonki | black, 5.4 to 1 |
| 13 | `#578fcc` | `oklch(63.87% 0.1092 251.41)` | Blue Dart | black, 6.2 to 1 |
| 14 | `#5b9cc9` | `oklch(66.62% 0.0947 240.64)` | Tall Waves | black, 7 to 1 |
| 15 | `#59a7c6` | `oklch(69.04% 0.0895 226.82)` | Estero Sky | black, 7.7 to 1 |
| 16 | `#54b2c1` | `oklch(71.36% 0.0909 209.13)` | Aqua Verde | black, 8.5 to 1 |
| 17 | `#54bdb7` | `oklch(73.44% 0.0966 190.38)` | Hygiene Green | black, 9.3 to 1 |
| 18 | `#5ec4a9` | `oklch(75.12% 0.1044 173.50)` | Shoreline Green | black, 9.9 to 1 |
| 19 | `#69c89b` | `oklch(76.25% 0.1128 161.36)` | Intense Jade | black, 10.3 to 1 |
| 20 | `#6ecb8f` | `oklch(76.89% 0.1251 153.87)` | Van Gogh Green | black, 10.6 to 1 |
| 21 | `#6ecd82` | `oklch(77.09% 0.1399 149.24)` | Spring Bouquet | black, 10.7 to 1 |
| 22 | `#6ccd76` | `oklch(76.84% 0.1531 145.99)` | Snow Pea | black, 10.6 to 1 |
| 23 | `#6fcb69` | `oklch(76.13% 0.1608 142.62)` | Energise | black, 10.3 to 1 |
| 24 | `#74c55e` | `oklch(74.84% 0.1607 139.34)` | Mantis | black, 9.9 to 1 |
| 25 | `#75be57` | `oklch(72.95% 0.1553 137.42)` | Green Pear | black, 9.2 to 1 |
| 26 | `#76b452` | `oklch(70.68% 0.1464 135.24)` | Sparkling Apple | black, 8.4 to 1 |
| 27 | `#7baa4b` | `oklch(68.28% 0.1357 131.12)` | Asparagus | black, 7.6 to 1 |
| 28 | `#839e40` | `oklch(65.87% 0.1245 123.22)` | New Shoot | black, 6.9 to 1 |
| 29 | `#8d8f38` | `oklch(63.02% 0.1096 110.26)` | Sycamore | black, 6.1 to 1 |
| 30 | `#928039` | `oklch(60.02% 0.0930 95.04)` | Peas Please | black, 5.3 to 1 |
| 31 | `#907440` | `oklch(57.36% 0.0779 80.91)` | Cattail Brown | black, 4.7 to 1 |
| 32 | `#8c6c46` | `oklch(55.51% 0.0675 71.24)` | Grecian Helmet | white, 4.8 to 1 |

## CSS

```css
background: linear-gradient(270deg, #662680 0.0%, #652788 3.2%, #632894 6.5%, #602ba1 9.7%, #5c31ae 12.9%, #5a38b7 16.1%, #5a41bf 19.4%, #5a4cc6 22.6%, #5a57cc 25.8%, #5764d1 29.0%, #5473d2 32.3%, #5482d0 35.5%, #578fcc 38.7%, #5b9cc9 41.9%, #59a7c6 45.2%, #54b2c1 48.4%, #54bdb7 51.6%, #5ec4a9 54.8%, #69c89b 58.1%, #6ecb8f 61.3%, #6ecd82 64.5%, #6ccd76 67.7%, #6fcb69 71.0%, #74c55e 74.2%, #75be57 77.4%, #76b452 80.6%, #7baa4b 83.9%, #839e40 87.1%, #8d8f38 90.3%, #928039 93.5%, #907440 96.8%, #8c6c46 100.0%);
background: linear-gradient(270deg in oklch, oklch(40.55% 0.1516 314.30) 0.0%, oklch(41.13% 0.1583 310.47) 3.2%, oklch(41.90% 0.1684 304.96) 6.5%, oklch(42.92% 0.1787 298.82) 9.7%, oklch(44.23% 0.1860 293.10) 12.9%, oklch(45.86% 0.1880 288.80) 16.1%, oklch(47.86% 0.1869 285.78) 19.4%, oklch(50.12% 0.1830 283.04) 22.6%, oklch(52.56% 0.1762 279.55) 25.8%, oklch(55.09% 0.1665 274.32) 29.0%, oklch(57.88% 0.1503 267.82) 32.3%, oklch(60.88% 0.1294 260.33) 35.5%, oklch(63.87% 0.1092 251.41) 38.7%, oklch(66.62% 0.0947 240.64) 41.9%, oklch(69.04% 0.0895 226.82) 45.2%, oklch(71.36% 0.0909 209.13) 48.4%, oklch(73.44% 0.0966 190.38) 51.6%, oklch(75.12% 0.1044 173.50) 54.8%, oklch(76.25% 0.1128 161.36) 58.1%, oklch(76.89% 0.1251 153.87) 61.3%, oklch(77.09% 0.1399 149.24) 64.5%, oklch(76.84% 0.1531 145.99) 67.7%, oklch(76.13% 0.1608 142.62) 71.0%, oklch(74.84% 0.1607 139.34) 74.2%, oklch(72.95% 0.1553 137.42) 77.4%, oklch(70.68% 0.1464 135.24) 80.6%, oklch(68.28% 0.1357 131.12) 83.9%, oklch(65.87% 0.1245 123.22) 87.1%, oklch(63.02% 0.1096 110.26) 90.3%, oklch(60.02% 0.0930 95.04) 93.5%, oklch(57.36% 0.0779 80.91) 96.8%, oklch(55.51% 0.0675 71.24) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.406 | 0.152 | 314.3 |
| 2 | 0.449 | 0.187 | 291 |
| 3 | 0.547 | 0.168 | 275.2 |
| 4 | 0.673 | 0.092 | 237.2 |
| 5 | 0.76 | 0.11 | 164.2 |
| 6 | 0.76 | 0.161 | 142 |
| 7 | 0.669 | 0.13 | 127.3 |
| 8 | 0.555 | 0.068 | 71.2 |

## In these collections

- [Multicolor gradients](https://grabient.com/multicolor-gradients)

## Other forms

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