# Stone and blue color palette

The Stone and blue color palette brings together light gray, light teal, 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 holiday stationery and seasonal displays. Its darkest tone is dark blue, and its lightest tone is off-white.

- Also called: Gray, light blue, white and navy linear swatches
- Seed: `kU2gmc4Js__sCQyXHUMg`
- Page: https://grabient.com/kU2gmc4Js__sCQyXHUMg?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: light center, pastel, light, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 17.3 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 | `#c8d2d6` | `oklch(85.83% 0.0124 220.08)` | Fairfax Grey | black, 13.6 to 1 |
| 2 | `#7abdd2` | `oklch(75.98% 0.0744 220.08)` | Cologne | black, 9.9 to 1 |
| 3 | `#f2f5f8` | `oklch(96.85% 0.0055 247.55)` | Child of Light | black, 19.1 to 1 |
| 4 | `#0a0a34` | `oklch(18.11% 0.0799 275.03)` | Cosmic Void | white, 18.9 to 1 |

## CSS

```css
background: linear-gradient(90deg, #c8d2d6 0.000% 25.000%, #7abdd2 25.000% 50.000%, #f2f5f8 50.000% 75.000%, #0a0a34 75.000% 100.000%);
background: linear-gradient(90deg, oklch(85.83% 0.0124 220.08) 0.000% 25.000%, oklch(75.98% 0.0744 220.08) 25.000% 50.000%, oklch(96.85% 0.0055 247.55) 50.000% 75.000%, oklch(18.11% 0.0799 275.03) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.858 | 0.012 | 220.1 |
| 2 | 0.76 | 0.074 | 220.1 |
| 3 | 0.969 | 0.006 | 247.6 |
| 4 | 0.181 | 0.08 | 275 |

## In these collections

- [Winter](https://grabient.com/winter)

## Other forms

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