# Blue and pale lavender color palette

The Blue and pale lavender color palette brings together pale blue, light blue, and pale purple. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is light blue, and its lightest tone is pale purple.

- Also called: Pastel analogous blue and lavender angular swatches
- Seed: `kU5SSnap1DfAZwz2DsIA`
- Page: https://grabient.com/kU5SSnap1DfAZwz2DsIA?style=angularSwatches&steps=4&angle=45
- Drawn as: angular swatches, 4 steps, 45 degrees
- Kinds: even lightness, pastel, light, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.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 | `#c0e5fb` | `oklch(90.16% 0.0496 234.84)` | Fresh Water | black, 15.7 to 1 |
| 2 | `#b0caff` | `oklch(83.86% 0.0797 264.43)` | Night Snow | black, 12.7 to 1 |
| 3 | `#d8d1ff` | `oklch(88.19% 0.0628 291.91)` | Pale Lavender | black, 14.5 to 1 |
| 4 | `#f0e1fc` | `oklch(92.91% 0.0400 309.87)` | Lavender Savour | black, 16.8 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #c0e5fb 0.000% 25.000%, #b0caff 25.000% 50.000%, #d8d1ff 50.000% 75.000%, #f0e1fc 75.000% 100.000%);
background: conic-gradient(from 45deg, oklch(90.16% 0.0496 234.84) 0.000% 25.000%, oklch(83.86% 0.0797 264.43) 25.000% 50.000%, oklch(88.19% 0.0628 291.91) 50.000% 75.000%, oklch(92.91% 0.0400 309.87) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.902 | 0.05 | 234.8 |
| 2 | 0.839 | 0.08 | 264.4 |
| 3 | 0.882 | 0.07 | 291.9 |
| 4 | 0.929 | 0.04 | 309.9 |

## In these collections

- [Cool swatches](https://grabient.com/cool-swatches)
- [Blue and purple swatches](https://grabient.com/blue-and-purple-swatches)

## Other forms

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