# Stone blue palette

The Stone blue palette brings together pale blue and light blue. The colors span a narrow lightness range, combining restrained 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 blue.

- Also called: Pastel blue linear gradient
- Seed: `kQ4RjAYQ6_g`
- Page: https://grabient.com/kQ4RjAYQ6_g?steps=6&angle=180
- Drawn as: linear gradient, 6 steps, 180 degrees
- Kinds: pastel, light, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 1.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 | `#d1d9f0` | `oklch(88.58% 0.0331 270.00)` | Sachet Cushion | black, 14.8 to 1 |
| 2 | `#cad3eb` | `oklch(86.73% 0.0341 269.52)` | Garden Fairy | black, 14 to 1 |
| 3 | `#c1cae3` | `oklch(83.99% 0.0357 268.81)` | Silver Sweetpea | black, 12.8 to 1 |
| 4 | `#b6c1da` | `oklch(80.97% 0.0374 268.02)` | Xenon Blue | black, 11.5 to 1 |
| 5 | `#adb8d2` | `oklch(78.23% 0.0389 267.31)` | Over the Moon | black, 10.5 to 1 |
| 6 | `#a7b2cd` | `oklch(76.38% 0.0400 266.83)` | Kentucky Blue | black, 9.8 to 1 |

## CSS

```css
background: linear-gradient(180deg, #d1d9f0 0.0%, #cad3eb 20.0%, #c1cae3 40.0%, #b6c1da 60.0%, #adb8d2 80.0%, #a7b2cd 100.0%);
background: linear-gradient(180deg in oklch, oklch(88.58% 0.0331 270.00) 0.0%, oklch(86.73% 0.0341 269.52) 20.0%, oklch(83.99% 0.0357 268.81) 40.0%, oklch(80.97% 0.0374 268.02) 60.0%, oklch(78.23% 0.0389 267.31) 80.0%, oklch(76.38% 0.0400 266.83) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.886 | 0.033 | 270 |
| 2 | 0.764 | 0.04 | 266.8 |

## In these collections

- [Blue gradients](https://grabient.com/blue-gradients)

## Other forms

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