# Blue and stone color palette

The Blue and stone color palette brings together pale blue, light teal, 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 monochrome blue linear gradient
- Seed: `kW8hWc9Y9B24UvHmFD34o1Ho`
- Page: https://grabient.com/kW8hWc9Y9B24UvHmFD34o1Ho?steps=6&angle=225
- Drawn as: linear gradient, 6 steps, 225 degrees
- Kinds: pastel, light, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.7 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 | `#dbf4fd` | `oklch(95.28% 0.0289 220.08)` | Wizard White | black, 18.4 to 1 |
| 2 | `#d2eeff` | `oklch(93.32% 0.0375 235.40)` | Ice Castle | black, 17.3 to 1 |
| 3 | `#b6e4f3` | `oklch(89.16% 0.0515 219.44)` | Breaking the Ice | black, 15.3 to 1 |
| 4 | `#9ed7d6` | `oklch(83.95% 0.0580 194.71)` | Shallow Shoal | black, 13.1 to 1 |
| 5 | `#95c7c8` | `oklch(79.49% 0.0521 198.31)` | Continental Waters | black, 11.2 to 1 |
| 6 | `#a7b8cd` | `oklch(77.56% 0.0358 254.95)` | Uniform | black, 10.3 to 1 |

## CSS

```css
background: linear-gradient(225deg, #dbf4fd 0.0%, #d2eeff 20.0%, #b6e4f3 40.0%, #9ed7d6 60.0%, #95c7c8 80.0%, #a7b8cd 100.0%);
background: linear-gradient(225deg in oklch, oklch(95.28% 0.0289 220.08) 0.0%, oklch(93.32% 0.0375 235.40) 20.0%, oklch(89.16% 0.0515 219.44) 40.0%, oklch(83.95% 0.0580 194.71) 60.0%, oklch(79.49% 0.0521 198.31) 80.0%, oklch(77.56% 0.0358 254.95) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.953 | 0.029 | 220.1 |
| 2 | 0.925 | 0.041 | 235.9 |
| 3 | 0.866 | 0.056 | 206.3 |
| 4 | 0.803 | 0.055 | 189.4 |
| 5 | 0.776 | 0.036 | 255 |

## In these collections

- [Cool gray gradients](https://grabient.com/cool-gray-gradients)
- [Coastal swatches](https://grabient.com/coastal-swatches)

## Other forms

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