# Vivid blue, green and orange linear gradient

Vivid blue, green and orange linear gradient with 32 colors: #412da2, #3d32a0, #36389d, #2f3e99, #274594, #1e4b90, #19528a, #1a5983, #1e5e7e, #216479, #1f6974, #206f6d, #277464, #33785b, #3f7c54, #48804e, #508447, #598741, #658a39, #728b33, #7f8d2f, #8b8e2c, #968e29, #a28e24, #ad8e21, #b88c20, #c28b20, #cb8821, #d38520, #da821f, #df7f1f, #e37c21. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcZoHJNS-9jubO3CnzhSio8lErvLWMLx17m9o`
- Page: https://grabient.com/kcZoHJNS-9jubO3CnzhSio8lErvLWMLx17m9o?steps=32&angle=150
- Drawn as: linear gradient, 32 steps, 150 degrees
- Kinds: vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 3.3 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 | `#412da2` | `oklch(40.16% 0.1778 282.66)` | Purple Cabbage | white, 9.8 to 1 |
| 2 | `#3d32a0` | `oklch(40.34% 0.1705 279.84)` | Purple Cabbage | white, 9.7 to 1 |
| 3 | `#36389d` | `oklch(40.56% 0.1603 275.96)` | Bluebell | white, 9.5 to 1 |
| 4 | `#2f3e99` | `oklch(40.91% 0.1484 271.09)` | Liquid Denim | white, 9.2 to 1 |
| 5 | `#274594` | `oklch(41.43% 0.1360 265.32)` | Cascade Twilight | white, 8.9 to 1 |
| 6 | `#1e4b90` | `oklch(42.22% 0.1236 258.74)` | Dancing Sea | white, 8.4 to 1 |
| 7 | `#19528a` | `oklch(43.27% 0.1088 251.48)` | Frank Blue | white, 8 to 1 |
| 8 | `#1a5983` | `oklch(44.50% 0.0938 243.27)` | Whale’s Tale | white, 7.5 to 1 |
| 9 | `#1e5e7e` | `oklch(45.78% 0.0812 233.83)` | Suez Canal | white, 7 to 1 |
| 10 | `#216479` | `oklch(47.02% 0.0737 222.84)` | Bold Bolection | white, 6.6 to 1 |
| 11 | `#1f6974` | `oklch(48.24% 0.0720 208.89)` | Persian Mosaic | white, 6.2 to 1 |
| 12 | `#206f6d` | `oklch(49.47% 0.0742 192.88)` | Marine Wonder | white, 5.9 to 1 |
| 13 | `#277464` | `oklch(50.72% 0.0788 176.95)` | Nordic Forest | white, 5.5 to 1 |
| 14 | `#33785b` | `oklch(51.99% 0.0840 163.27)` | Scouring Rush | white, 5.2 to 1 |
| 15 | `#3f7c54` | `oklch(53.30% 0.0895 153.42)` | Rokushō Green | white, 4.9 to 1 |
| 16 | `#48804e` | `oklch(54.64% 0.0970 146.37)` | Tarmac Green | white, 4.7 to 1 |
| 17 | `#508447` | `oklch(55.99% 0.1050 140.86)` | Beanpole | black, 4.7 to 1 |
| 18 | `#598741` | `oklch(57.33% 0.1121 135.69)` | Shepherd’s Green | black, 4.9 to 1 |
| 19 | `#658a39` | `oklch(58.64% 0.1167 129.74)` | Gǎn Lǎn Lǜ Green | black, 5.2 to 1 |
| 20 | `#728b33` | `oklch(59.94% 0.1186 123.55)` | Pesto di Rucola | black, 5.4 to 1 |
| 21 | `#7f8d2f` | `oklch(61.24% 0.1188 117.43)` | Absinthe Dreams | black, 5.7 to 1 |
| 22 | `#8b8e2c` | `oklch(62.48% 0.1188 111.28)` | Wasabi Nuts | black, 5.9 to 1 |
| 23 | `#968e29` | `oklch(63.63% 0.1196 104.98)` | Nurgle’s Rot | black, 6.2 to 1 |
| 24 | `#a28e24` | `oklch(64.68% 0.1218 98.31)` | Guava Green | black, 6.4 to 1 |
| 25 | `#ad8e21` | `oklch(65.68% 0.1244 91.27)` | Titanite Yellow | black, 6.6 to 1 |
| 26 | `#b88c20` | `oklch(66.59% 0.1276 84.28)` | Loden Yellow | black, 6.8 to 1 |
| 27 | `#c28b20` | `oklch(67.35% 0.1313 77.79)` | Auric | black, 6.9 to 1 |
| 28 | `#cb8821` | `oklch(67.94% 0.1357 72.14)` | Chicken Masala | black, 7 to 1 |
| 29 | `#d38520` | `oklch(68.34% 0.1417 66.89)` | Dulce de Leche | black, 7.1 to 1 |
| 30 | `#da821f` | `oklch(68.60% 0.1483 62.16)` | Dulce de Leche | black, 7.1 to 1 |
| 31 | `#df7f1f` | `oklch(68.77% 0.1543 58.25)` | Sports Fan | black, 7.1 to 1 |
| 32 | `#e37c21` | `oklch(68.90% 0.1585 55.45)` | First of Fall | black, 7.1 to 1 |

## CSS

```css
background: linear-gradient(150deg, #412da2 0.0%, #3d32a0 3.2%, #36389d 6.5%, #2f3e99 9.7%, #274594 12.9%, #1e4b90 16.1%, #19528a 19.4%, #1a5983 22.6%, #1e5e7e 25.8%, #216479 29.0%, #1f6974 32.3%, #206f6d 35.5%, #277464 38.7%, #33785b 41.9%, #3f7c54 45.2%, #48804e 48.4%, #508447 51.6%, #598741 54.8%, #658a39 58.1%, #728b33 61.3%, #7f8d2f 64.5%, #8b8e2c 67.7%, #968e29 71.0%, #a28e24 74.2%, #ad8e21 77.4%, #b88c20 80.6%, #c28b20 83.9%, #cb8821 87.1%, #d38520 90.3%, #da821f 93.5%, #df7f1f 96.8%, #e37c21 100.0%);
background: linear-gradient(150deg in oklch, oklch(40.16% 0.1778 282.66) 0.0%, oklch(40.34% 0.1705 279.84) 3.2%, oklch(40.56% 0.1603 275.96) 6.5%, oklch(40.91% 0.1484 271.09) 9.7%, oklch(41.43% 0.1360 265.32) 12.9%, oklch(42.22% 0.1236 258.74) 16.1%, oklch(43.27% 0.1088 251.48) 19.4%, oklch(44.50% 0.0938 243.27) 22.6%, oklch(45.78% 0.0812 233.83) 25.8%, oklch(47.02% 0.0737 222.84) 29.0%, oklch(48.24% 0.0720 208.89) 32.3%, oklch(49.47% 0.0742 192.88) 35.5%, oklch(50.72% 0.0788 176.95) 38.7%, oklch(51.99% 0.0840 163.27) 41.9%, oklch(53.30% 0.0895 153.42) 45.2%, oklch(54.64% 0.0970 146.37) 48.4%, oklch(55.99% 0.1050 140.86) 51.6%, oklch(57.33% 0.1121 135.69) 54.8%, oklch(58.64% 0.1167 129.74) 58.1%, oklch(59.94% 0.1186 123.55) 61.3%, oklch(61.24% 0.1188 117.43) 64.5%, oklch(62.48% 0.1188 111.28) 67.7%, oklch(63.63% 0.1196 104.98) 71.0%, oklch(64.68% 0.1218 98.31) 74.2%, oklch(65.68% 0.1244 91.27) 77.4%, oklch(66.59% 0.1276 84.28) 80.6%, oklch(67.35% 0.1313 77.79) 83.9%, oklch(67.94% 0.1357 72.14) 87.1%, oklch(68.34% 0.1417 66.89) 90.3%, oklch(68.60% 0.1483 62.16) 93.5%, oklch(68.77% 0.1543 58.25) 96.8%, oklch(68.90% 0.1585 55.45) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.402 | 0.178 | 282.7 |
| 2 | 0.417 | 0.131 | 262.6 |
| 3 | 0.469 | 0.074 | 224.5 |
| 4 | 0.524 | 0.085 | 160.1 |
| 5 | 0.583 | 0.116 | 131.5 |
| 6 | 0.638 | 0.12 | 104.1 |
| 7 | 0.677 | 0.134 | 74.5 |
| 8 | 0.689 | 0.158 | 55.5 |

## In these collections

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

## Other forms

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