# Silver blue palette

The Silver blue palette brings together gray and blue. The colors span a moderate lightness range, combining restrained 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 gray.

- Also called: Monochrome gray and navy angular swatches
- Seed: `kSqQDAvZa8ygZxS`
- Page: https://grabient.com/kSqQDAvZa8ygZxS?style=angularSwatches&steps=13&angle=45
- Drawn as: angular swatches, 13 steps, 45 degrees
- Kinds: light to dark, muted, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.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 | `#949494` | `oklch(66.54% 0.0000 89.88)` | Grey Shingle | black, 6.8 to 1 |
| 2 | `#8c8e92` | `oklch(64.55% 0.0074 267.01)` | Aluminium Silver | black, 6.3 to 1 |
| 3 | `#808691` | `oklch(61.80% 0.0181 261.23)` | Cold Trade Winds | black, 5.7 to 1 |
| 4 | `#707d8e` | `oklch(58.54% 0.0305 254.72)` | Slate Expectations | black, 5 to 1 |
| 5 | `#5e748a` | `oklch(55.05% 0.0430 248.82)` | Lost Atlantis | white, 4.8 to 1 |
| 6 | `#4d6b85` | `oklch(51.58% 0.0541 244.90)` | Wedgewood | white, 5.5 to 1 |
| 7 | `#3f6380` | `oklch(48.43% 0.0620 244.28)` | Blue Ashes | white, 6.3 to 1 |
| 8 | `#37597a` | `oklch(45.34% 0.0666 248.10)` | Bluey | white, 7.2 to 1 |
| 9 | `#334e72` | `oklch(42.07% 0.0691 255.48)` | Airforce | white, 8.4 to 1 |
| 10 | `#32436a` | `oklch(38.83% 0.0700 264.82)` | Forlorn Cruise | white, 9.7 to 1 |
| 11 | `#323961` | `oklch(35.84% 0.0701 274.54)` | Blue Depths | white, 11 to 1 |
| 12 | `#323159` | `oklch(33.32% 0.0700 283.02)` | Quill Tip | white, 12.2 to 1 |
| 13 | `#312b53` | `oklch(31.50% 0.0703 288.67)` | Purple Noir | white, 13.1 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #949494 0.000% 7.692%, #8c8e92 7.692% 15.385%, #808691 15.385% 23.077%, #707d8e 23.077% 30.769%, #5e748a 30.769% 38.462%, #4d6b85 38.462% 46.154%, #3f6380 46.154% 53.846%, #37597a 53.846% 61.538%, #334e72 61.538% 69.231%, #32436a 69.231% 76.923%, #323961 76.923% 84.615%, #323159 84.615% 92.308%, #312b53 92.308% 100.000%);
background: conic-gradient(from 45deg, oklch(66.54% 0.0000 89.88) 0.000% 7.692%, oklch(64.55% 0.0074 267.01) 7.692% 15.385%, oklch(61.80% 0.0181 261.23) 15.385% 23.077%, oklch(58.54% 0.0305 254.72) 23.077% 30.769%, oklch(55.05% 0.0430 248.82) 30.769% 38.462%, oklch(51.58% 0.0541 244.90) 38.462% 46.154%, oklch(48.43% 0.0620 244.28) 46.154% 53.846%, oklch(45.34% 0.0666 248.10) 53.846% 61.538%, oklch(42.07% 0.0691 255.48) 61.538% 69.231%, oklch(38.83% 0.0700 264.82) 69.231% 76.923%, oklch(35.84% 0.0701 274.54) 76.923% 84.615%, oklch(33.32% 0.0700 283.02) 84.615% 92.308%, oklch(31.50% 0.0703 288.67) 92.308% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.665 | 0 | 270.7 |
| 2 | 0.484 | 0.062 | 244.3 |
| 3 | 0.315 | 0.07 | 288.7 |

## In these collections

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

## Other forms

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