# Off-white and blue color palette

The Off-white and blue color palette brings together off-white, gray, and blue. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is gray, and its lightest tone is off-white.

- Also called: Monochrome white, gray and blue linear swatches
- Seed: `kU7gGsMAZBEcMP3DJsAA`
- Page: https://grabient.com/kU7gGsMAZBEcMP3DJsAA?style=linearSwatches&steps=4&angle=180
- Drawn as: linear swatches, 4 steps, 180 degrees
- Kinds: dark center, neutral, cool
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 8.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 | `#e9eaeb` | `oklch(93.70% 0.0014 241.87)` | Mourn Mountain Snow | black, 17.4 to 1 |
| 2 | `#3c434b` | `oklch(37.80% 0.0165 251.39)` | Arsenic | white, 10 to 1 |
| 3 | `#657687` | `oklch(55.91% 0.0331 247.16)` | Space Convoy | white, 4.6 to 1 |
| 4 | `#326fa5` | `oklch(52.76% 0.1061 248.22)` | Mega Blue | white, 5.3 to 1 |

## CSS

```css
background: linear-gradient(180deg, #e9eaeb 0.000% 25.000%, #3c434b 25.000% 50.000%, #657687 50.000% 75.000%, #326fa5 75.000% 100.000%);
background: linear-gradient(180deg, oklch(93.70% 0.0014 241.87) 0.000% 25.000%, oklch(37.80% 0.0165 251.39) 25.000% 50.000%, oklch(55.91% 0.0331 247.16) 50.000% 75.000%, oklch(52.76% 0.1061 248.22) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.937 | 0.001 | 241.9 |
| 2 | 0.378 | 0.017 | 251.4 |
| 3 | 0.559 | 0.033 | 247.2 |
| 4 | 0.528 | 0.106 | 248.2 |

## In these collections

- [Modern swatches](https://grabient.com/modern-swatches)
- [Minimal color palette](https://grabient.com/minimal-color-palette)
- [Presentation swatches](https://grabient.com/presentation-swatches)
- [UI swatches](https://grabient.com/ui-swatches)

## Other forms

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