# Blue and stone navy palette

The Blue and stone navy palette brings together dark blue, blue, light gray, and off-white. The colors span a very broad lightness range, combining moderate color with high contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is off-white.

- Also called: Monochrome navy, gray and white linear swatches
- Seed: `kWQD-6MaU_ccZP5whr8fAE-A`
- Page: https://grabient.com/kWQD-6MaU_ccZP5whr8fAE-A?style=linearSwatches&steps=5&angle=180
- Drawn as: linear swatches, 5 steps, 180 degrees
- Kinds: dark to light, muted, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 15 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 | `#081f4b` | `oklch(25.20% 0.0868 261.56)` | Oxford Blue | white, 16 to 1 |
| 2 | `#1d447a` | `oklch(38.98% 0.1020 257.34)` | Theatre Blue | white, 9.6 to 1 |
| 3 | `#58769c` | `oklch(55.91% 0.0689 254.17)` | Quiet Harbour | white, 4.6 to 1 |
| 4 | `#d0dbe5` | `oklch(88.58% 0.0179 246.77)` | London Lights | black, 14.9 to 1 |
| 5 | `#f5f8f9` | `oklch(97.64% 0.0028 230.92)` | Lynx White | black, 19.6 to 1 |

## CSS

```css
background: linear-gradient(180deg, #081f4b 0.000% 20.000%, #1d447a 20.000% 40.000%, #58769c 40.000% 60.000%, #d0dbe5 60.000% 80.000%, #f5f8f9 80.000% 100.000%);
background: linear-gradient(180deg, oklch(25.20% 0.0868 261.56) 0.000% 20.000%, oklch(38.98% 0.1020 257.34) 20.000% 40.000%, oklch(55.91% 0.0689 254.17) 40.000% 60.000%, oklch(88.58% 0.0179 246.77) 60.000% 80.000%, oklch(97.64% 0.0028 230.92) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.252 | 0.087 | 261.6 |
| 2 | 0.39 | 0.102 | 257.3 |
| 3 | 0.559 | 0.069 | 254.2 |
| 4 | 0.886 | 0.018 | 246.8 |
| 5 | 0.976 | 0.003 | 230.9 |

## In these collections

- [Navy](https://grabient.com/navy)

## Other forms

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