# Blue and pale lavender color palette

The Blue and pale lavender color palette brings together blue, purple, and light purple. The colors span a moderate lightness range, combining strong color with clear contrast. Its balanced and composed character suits game interface concepts and stream graphics. Its darkest tone is blue, and its lightest tone is light purple.

- Also called: Vivid analogous blue and lavender angular swatches
- Seed: `kWdOC9vulBEfcQRWx0F66dBo`
- Page: https://grabient.com/kWdOC9vulBEfcQRWx0F66dBo?style=angularSwatches&steps=5&angle=45
- Drawn as: angular swatches, 5 steps, 45 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 5 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 | `#1c01fe` | `oklch(45.67% 0.3087 266.48)` | Blue Pencil | white, 8.4 to 1 |
| 2 | `#4a1eff` | `oklch(49.21% 0.2894 276.00)` | Nimbus Blue | white, 7.1 to 1 |
| 3 | `#7248ff` | `oklch(56.30% 0.2531 285.51)` | Pink OCD | white, 5.1 to 1 |
| 4 | `#aa77ff` | `oklch(68.11% 0.1953 298.19)` | Purple Illusionist | black, 6.7 to 1 |
| 5 | `#e5b8ff` | `oklch(84.65% 0.1075 312.98)` | Lavender Fragrance | black, 12.6 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #1c01fe 0.000% 20.000%, #4a1eff 20.000% 40.000%, #7248ff 40.000% 60.000%, #aa77ff 60.000% 80.000%, #e5b8ff 80.000% 100.000%);
background: conic-gradient(from 45deg, oklch(45.67% 0.3087 266.48) 0.000% 20.000%, oklch(49.21% 0.2894 276.00) 20.000% 40.000%, oklch(56.30% 0.2531 285.51) 40.000% 60.000%, oklch(68.11% 0.1953 298.19) 60.000% 80.000%, oklch(84.65% 0.1075 312.98) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.457 | 0.309 | 266.5 |
| 2 | 0.492 | 0.289 | 276 |
| 3 | 0.563 | 0.254 | 285.5 |
| 4 | 0.681 | 0.196 | 298.2 |
| 5 | 0.846 | 0.107 | 313 |

## In these collections

- [Neon swatches](https://grabient.com/neon-swatches)
- [Vaporwave color palette](https://grabient.com/vaporwave-color-palette)

## Other forms

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