# Vivid blue, green and orange linear swatches

Vivid blue, green and orange linear swatches with 8 colors: #412da2, #234792, #21637a, #377959, #62893b, #988f28, #c78920, #e37c21. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcZoHJNS-9jubO3CnzhSio8lErvLWMLx17m9o`
- Page: https://grabient.com/kcZoHJNS-9jubO3CnzhSio8lErvLWMLx17m9o?style=linearSwatches&steps=8&angle=150
- Drawn as: linear swatches, 8 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 | `#234792` | `oklch(41.73% 0.1309 262.58)` | Cascade Twilight | white, 8.7 to 1 |
| 3 | `#21637a` | `oklch(46.85% 0.0744 224.53)` | Georgian Bay | white, 6.7 to 1 |
| 4 | `#377959` | `oklch(52.36% 0.0854 160.07)` | Liquid Green Stuff | white, 5.1 to 1 |
| 5 | `#62893b` | `oklch(58.27% 0.1157 131.54)` | Hidden Paradise | black, 5.1 to 1 |
| 6 | `#988f28` | `oklch(63.78% 0.1199 104.07)` | Nurgle’s Rot | black, 6.2 to 1 |
| 7 | `#c78920` | `oklch(67.72% 0.1337 74.48)` | Auric | black, 7 to 1 |
| 8 | `#e37c21` | `oklch(68.90% 0.1585 55.45)` | First of Fall | black, 7.1 to 1 |

## CSS

```css
background: linear-gradient(150deg, #412da2 0.000% 12.500%, #234792 12.500% 25.000%, #21637a 25.000% 37.500%, #377959 37.500% 50.000%, #62893b 50.000% 62.500%, #988f28 62.500% 75.000%, #c78920 75.000% 87.500%, #e37c21 87.500% 100.000%);
background: linear-gradient(150deg, oklch(40.16% 0.1778 282.66) 0.000% 12.500%, oklch(41.73% 0.1309 262.58) 12.500% 25.000%, oklch(46.85% 0.0744 224.53) 25.000% 37.500%, oklch(52.36% 0.0854 160.07) 37.500% 50.000%, oklch(58.27% 0.1157 131.54) 50.000% 62.500%, oklch(63.78% 0.1199 104.07) 62.500% 75.000%, oklch(67.72% 0.1337 74.48) 75.000% 87.500%, oklch(68.90% 0.1585 55.45) 87.500% 100.000%);
```

## 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?style=linearSwatches&steps=8&angle=150)
- [PNG](https://grabient.com/kcZoHJNS-9jubO3CnzhSio8lErvLWMLx17m9o.png?style=linearSwatches&steps=8&angle=150)
- [SVG](https://grabient.com/kcZoHJNS-9jubO3CnzhSio8lErvLWMLx17m9o.svg?style=linearSwatches&steps=8&angle=150)
- [CSS](https://grabient.com/kcZoHJNS-9jubO3CnzhSio8lErvLWMLx17m9o.css?style=linearSwatches&steps=8&angle=150)
- [ASE](https://grabient.com/kcZoHJNS-9jubO3CnzhSio8lErvLWMLx17m9o.ase?style=linearSwatches&steps=8&angle=150)
- [GPL](https://grabient.com/kcZoHJNS-9jubO3CnzhSio8lErvLWMLx17m9o.gpl?style=linearSwatches&steps=8&angle=150)
- [GRD](https://grabient.com/kcZoHJNS-9jubO3CnzhSio8lErvLWMLx17m9o.grd?style=linearSwatches&steps=8&angle=150)
- [Design tokens](https://grabient.com/kcZoHJNS-9jubO3CnzhSio8lErvLWMLx17m9o.tokens.json?style=linearSwatches&steps=8&angle=150)
- [Social card](https://grabient.com/api/og?seed=kcZoHJNS-9jubO3CnzhSio8lErvLWMLx17m9o&style=linearSwatches&steps=8&angle=150)
- [Palettes like this one](https://grabient.com/palettes?q=kcZoHJNS-9jubO3CnzhSio8lErvLWMLx17m9o)
- [Guide for agents](https://grabient.com/llms.txt)