# Lavender Porcelain, Navy Accent

The Blue color palette brings together pale blue, light blue, and dark blue. The colors span a very broad lightness range, combining restrained color with high contrast. Its balanced and composed character suits holiday stationery and seasonal displays. Its darkest tone is dark blue, and its lightest tone is pale blue.

- Also called: Analogous gray, lavender and navy angular swatches
- Seed: `kW9BLScBC_-cUP1eEL9GZY9g`
- Page: https://grabient.com/kW9BLScBC_-cUP1eEL9GZY9g?style=angularSwatches&steps=5&angle=225
- Drawn as: angular swatches, 5 steps, 225 degrees
- Kinds: light to dark, pastel, light, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 16.1 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 | `#f3f0ff` | `oklch(96.06% 0.0208 295.32)` | Cloud Break | black, 18.6 to 1 |
| 2 | `#dad3f4` | `oklch(88.19% 0.0455 295.31)` | Japan Blush | black, 14.5 to 1 |
| 3 | `#c0bce3` | `oklch(81.10% 0.0551 290.03)` | Pretty Posie | black, 11.5 to 1 |
| 4 | `#a7a7c7` | `oklch(74.02% 0.0455 284.74)` | Wisteria Light Soft Blue | black, 9 to 1 |
| 5 | `#081431` | `oklch(20.08% 0.0606 264.67)` | Squid’s Ink | white, 18.1 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #f3f0ff 0.000% 20.000%, #dad3f4 20.000% 40.000%, #c0bce3 40.000% 60.000%, #a7a7c7 60.000% 80.000%, #081431 80.000% 100.000%);
background: conic-gradient(from 225deg, oklch(96.06% 0.0208 295.32) 0.000% 20.000%, oklch(88.19% 0.0455 295.31) 20.000% 40.000%, oklch(81.10% 0.0551 290.03) 40.000% 60.000%, oklch(74.02% 0.0455 284.74) 60.000% 80.000%, oklch(20.08% 0.0606 264.67) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.961 | 0.025 | 295.3 |
| 2 | 0.882 | 0.045 | 295.3 |
| 3 | 0.811 | 0.055 | 290 |
| 4 | 0.74 | 0.045 | 284.7 |
| 5 | 0.201 | 0.061 | 264.7 |

## In these collections

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

## Other forms

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