# Blue elegant palette

The Blue elegant palette brings together off-white, light blue, blue, magenta, and dark blue. The colors span a very broad lightness range, combining restrained color with high contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is off-white.

- Also called: Analogous gray, purple and navy angular swatches
- Seed: `kW5w3K34k_8iUP-zGcSmZC4w`
- Page: https://grabient.com/kW5w3K34k_8iUP-zGcSmZC4w?style=angularSwatches&steps=5&angle=45
- Drawn as: angular swatches, 5 steps, 45 degrees
- Kinds: light to dark, muted, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 13.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 | `#dfe0ed` | `oklch(90.94% 0.0179 284.77)` | Imagination | black, 16 to 1 |
| 2 | `#acadbe` | `oklch(75.20% 0.0248 284.77)` | Polar Mist | black, 9.4 to 1 |
| 3 | `#747397` | `oklch(57.09% 0.0551 284.77)` | Rhythm | black, 4.6 to 1 |
| 4 | `#5b3a5d` | `oklch(40.16% 0.0703 324.92)` | Purple Wineberry | white, 9.4 to 1 |
| 5 | `#0c152b` | `oklch(20.08% 0.0455 264.69)` | Liberty Blue | white, 18.1 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #dfe0ed 0.000% 20.000%, #acadbe 20.000% 40.000%, #747397 40.000% 60.000%, #5b3a5d 60.000% 80.000%, #0c152b 80.000% 100.000%);
background: conic-gradient(from 45deg, oklch(90.94% 0.0179 284.77) 0.000% 20.000%, oklch(75.20% 0.0248 284.77) 20.000% 40.000%, oklch(57.09% 0.0551 284.77) 40.000% 60.000%, oklch(40.16% 0.0703 324.92) 60.000% 80.000%, oklch(20.08% 0.0455 264.69) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.909 | 0.018 | 284.8 |
| 2 | 0.752 | 0.025 | 284.8 |
| 3 | 0.571 | 0.055 | 284.8 |
| 4 | 0.402 | 0.07 | 324.9 |
| 5 | 0.201 | 0.045 | 264.7 |

## In these collections

- [Elegant swatches](https://grabient.com/elegant-swatches)

## Other forms

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