# Violet and blue spring palette

The Violet and blue spring palette brings together purple, blue, light blue, and off-white. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits seasonal campaigns and event graphics. Its darkest tone is purple, and its lightest tone is off-white.

- Also called: Analogous purple, blue and gray linear swatches
- Seed: `kUa2bV0cG72mgu96A7_g`
- Page: https://grabient.com/kUa2bV0cG72mgu96A7_g?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 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 | `#5b358d` | `oklch(42.13% 0.1406 300.23)` | Blue Magenta Violet | white, 8.9 to 1 |
| 2 | `#5785f9` | `oklch(64.17% 0.1805 265.36)` | Skinny Jeans | black, 6.1 to 1 |
| 3 | `#89d3f7` | `oklch(83.07% 0.0896 230.49)` | Kul Sharif Blue | black, 12.6 to 1 |
| 4 | `#ecf3f7` | `oklch(96.06% 0.0096 230.49)` | Insignia White | black, 18.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #5b358d 0.000% 25.000%, #5785f9 25.000% 50.000%, #89d3f7 50.000% 75.000%, #ecf3f7 75.000% 100.000%);
background: linear-gradient(90deg, oklch(42.13% 0.1406 300.23) 0.000% 25.000%, oklch(64.17% 0.1805 265.36) 25.000% 50.000%, oklch(83.07% 0.0896 230.49) 50.000% 75.000%, oklch(96.06% 0.0096 230.49) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.421 | 0.141 | 300.2 |
| 2 | 0.642 | 0.181 | 265.4 |
| 3 | 0.831 | 0.09 | 230.5 |
| 4 | 0.961 | 0.01 | 230.5 |

## In these collections

- [Spring swatches](https://grabient.com/spring-swatches)

## Other forms

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