# Blue and stone color palette

The Blue and stone color palette brings together blue, off-white, and dark blue. The colors span a very broad lightness range, combining moderate 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: Blue, lavender, gray and black angular swatches
- Seed: `kWelfD1qDA3ODwFJpMCGZI_Q`
- Page: https://grabient.com/kWelfD1qDA3ODwFJpMCGZI_Q?style=angularSwatches&steps=5&angle=270
- Drawn as: angular swatches, 5 steps, 270 degrees
- Kinds: light center, 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 | `#4b56a0` | `oklch(48.03% 0.1199 274.92)` | Governor Bay | white, 6.7 to 1 |
| 2 | `#9092cf` | `oklch(68.11% 0.0896 282.32)` | Adora | black, 7.1 to 1 |
| 3 | `#e0e0e7` | `oklch(90.94% 0.0096 285.49)` | Amourette Eternelle | black, 16 to 1 |
| 4 | `#7a6fb1` | `oklch(57.87% 0.1006 290.77)` | Clear Mauve | black, 4.7 to 1 |
| 5 | `#15122b` | `oklch(20.08% 0.0496 285.49)` | Lost in Sadness | white, 18.2 to 1 |

## CSS

```css
background: conic-gradient(from 270deg, #4b56a0 0.000% 20.000%, #9092cf 20.000% 40.000%, #e0e0e7 40.000% 60.000%, #7a6fb1 60.000% 80.000%, #15122b 80.000% 100.000%);
background: conic-gradient(from 270deg, oklch(48.03% 0.1199 274.92) 0.000% 20.000%, oklch(68.11% 0.0896 282.32) 20.000% 40.000%, oklch(90.94% 0.0096 285.49) 40.000% 60.000%, oklch(57.87% 0.1006 290.77) 60.000% 80.000%, oklch(20.08% 0.0496 285.49) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.48 | 0.12 | 274.9 |
| 2 | 0.681 | 0.09 | 282.3 |
| 3 | 0.909 | 0.01 | 285.5 |
| 4 | 0.579 | 0.101 | 290.8 |
| 5 | 0.201 | 0.05 | 285.5 |

## In these collections

- [Violet swatches](https://grabient.com/violet-swatches)
- [Monochromatic swatches](https://grabient.com/monochromatic-swatches)
- [Indigo swatches](https://grabient.com/indigo-swatches)
- [Cool swatches](https://grabient.com/cool-swatches)

## Other forms

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