# Blue and mint spring palette

The Blue and mint spring palette brings together off-white, light blue, and light green. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its light and open character suits seasonal campaigns and event graphics. Its darkest tone is light blue, and its lightest tone is off-white.

- Also called: Pastel gray and blue linear swatches
- Seed: `kW8xHTbBi_N8jPngnjqbJk3A`
- Page: https://grabient.com/kW8xHTbBi_N8jPngnjqbJk3A?style=linearSwatches&steps=5&angle=45
- Drawn as: linear swatches, 5 steps, 45 degrees
- Kinds: pastel, light, cool
- Hues: two-hue
- Contrast of its darkest and lightest colors: 1.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 | `#f2eeff` | `oklch(95.67% 0.0233 296.73)` | Foundation White | black, 18.4 to 1 |
| 2 | `#cdc7f8` | `oklch(85.04% 0.0675 290.38)` | Innocent Snowdrop | black, 13.1 to 1 |
| 3 | `#9ea8ea` | `oklch(74.80% 0.0965 277.70)` | Maximum Blue Purple | black, 9.2 to 1 |
| 4 | `#79bbdd` | `oklch(75.98% 0.0827 232.26)` | Pacific Harbour | black, 9.9 to 1 |
| 5 | `#aaddbe` | `oklch(85.43% 0.0689 157.23)` | Mountain Mint | black, 13.8 to 1 |

## CSS

```css
background: linear-gradient(45deg, #f2eeff 0.000% 20.000%, #cdc7f8 20.000% 40.000%, #9ea8ea 40.000% 60.000%, #79bbdd 60.000% 80.000%, #aaddbe 80.000% 100.000%);
background: linear-gradient(45deg, oklch(95.67% 0.0233 296.73) 0.000% 20.000%, oklch(85.04% 0.0675 290.38) 20.000% 40.000%, oklch(74.80% 0.0965 277.70) 40.000% 60.000%, oklch(75.98% 0.0827 232.26) 60.000% 80.000%, oklch(85.43% 0.0689 157.23) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.957 | 0.023 | 296.7 |
| 2 | 0.85 | 0.068 | 290.4 |
| 3 | 0.748 | 0.096 | 277.7 |
| 4 | 0.76 | 0.083 | 232.3 |
| 5 | 0.854 | 0.069 | 157.2 |

## In these collections

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

## Other forms

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