# Stone and blue indigo palette

The Stone and blue indigo palette brings together light gray, light blue, and blue. The colors span a moderate lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is blue, and its lightest tone is light gray.

- Also called: Monochrome gray and blue linear swatches
- Seed: `kW2wew3aRB06uP7Aq0AujXBI`
- Page: https://grabient.com/kW2wew3aRB06uP7Aq0AujXBI?style=linearSwatches&steps=13
- Drawn as: linear swatches, 13 steps, 90 degrees
- Kinds: light to dark, cool, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 4.9 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 | `#cdd2d8` | `oklch(86.22% 0.0096 248.20)` | Shiny Nickel | black, 13.8 to 1 |
| 2 | `#b7c9de` | `oklch(82.93% 0.0352 252.98)` | Mystic River | black, 12.4 to 1 |
| 3 | `#9ebae6` | `oklch(78.23% 0.0706 259.51)` | Sky Blue | black, 10.5 to 1 |
| 4 | `#8aa9e9` | `oklch(73.62% 0.0992 264.05)` | Queer Blue | black, 8.9 to 1 |
| 5 | `#7a9ce4` | `oklch(69.60% 0.1143 264.52)` | Portage | black, 7.6 to 1 |
| 6 | `#6990dc` | `oklch(65.66% 0.1225 263.00)` | Little Boy Blue | black, 6.5 to 1 |
| 7 | `#5a84d1` | `oklch(61.81% 0.1268 261.94)` | Berlin Blue | black, 5.6 to 1 |
| 8 | `#5078c4` | `oklch(57.86% 0.1253 262.02)` | Diva Violet | black, 4.8 to 1 |
| 9 | `#486cb4` | `oklch(54.00% 0.1198 262.57)` | Azraq Blue | white, 5.1 to 1 |
| 10 | `#4262a9` | `oklch(50.79% 0.1185 264.05)` | Kakitsubata Blue | white, 5.8 to 1 |
| 11 | `#3f59a6` | `oklch(48.45% 0.1265 267.34)` | Blasphemous Blue | white, 6.5 to 1 |
| 12 | `#4051a7` | `oklch(46.78% 0.1386 271.57)` | Dazzling Blue | white, 7.1 to 1 |
| 13 | `#414ba7` | `oklch(45.67% 0.1474 274.62)` | Dazzling Blue | white, 7.5 to 1 |

## CSS

```css
background: linear-gradient(90deg, #cdd2d8 0.000% 7.692%, #b7c9de 7.692% 15.385%, #9ebae6 15.385% 23.077%, #8aa9e9 23.077% 30.769%, #7a9ce4 30.769% 38.462%, #6990dc 38.462% 46.154%, #5a84d1 46.154% 53.846%, #5078c4 53.846% 61.538%, #486cb4 61.538% 69.231%, #4262a9 69.231% 76.923%, #3f59a6 76.923% 84.615%, #4051a7 84.615% 92.308%, #414ba7 92.308% 100.000%);
background: linear-gradient(90deg, oklch(86.22% 0.0096 248.20) 0.000% 7.692%, oklch(82.93% 0.0352 252.98) 7.692% 15.385%, oklch(78.23% 0.0706 259.51) 15.385% 23.077%, oklch(73.62% 0.0992 264.05) 23.077% 30.769%, oklch(69.60% 0.1143 264.52) 30.769% 38.462%, oklch(65.66% 0.1225 263.00) 38.462% 46.154%, oklch(61.81% 0.1268 261.94) 46.154% 53.846%, oklch(57.86% 0.1253 262.02) 53.846% 61.538%, oklch(54.00% 0.1198 262.57) 61.538% 69.231%, oklch(50.79% 0.1185 264.05) 69.231% 76.923%, oklch(48.45% 0.1265 267.34) 76.923% 84.615%, oklch(46.78% 0.1386 271.57) 84.615% 92.308%, oklch(45.67% 0.1474 274.62) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.862 | 0.01 | 248.2 |
| 2 | 0.736 | 0.099 | 264.1 |
| 3 | 0.618 | 0.127 | 261.9 |
| 4 | 0.508 | 0.119 | 264.1 |
| 5 | 0.457 | 0.147 | 274.6 |

## In these collections

- [Indigo swatches](https://grabient.com/indigo-swatches)

## Other forms

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