# Off-white, navy and stone runway flash photography

The Off-white, navy and stone runway flash photography brings together off-white, dark gray, blue, and light gray. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits fashion mood boards and lookbook graphics. Its darkest tone is dark gray, and its lightest tone is off-white.

- Also called: White, black, blue and gray linear swatches
- Seed: `kU9gHLnAg-T5IvveCD_g`
- Page: https://grabient.com/kU9gHLnAg-T5IvveCD_g?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: dark center, muted, monochrome
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 15.8 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 | `#f4f4f5` | `oklch(96.85% 0.0014 286.17)` | Chef’s Hat | black, 19.1 to 1 |
| 2 | `#171a25` | `oklch(22.05% 0.0220 272.43)` | Coarse Wool | white, 17.3 to 1 |
| 3 | `#2152cf` | `oklch(48.82% 0.1998 263.98)` | Dead Blue Eyes | white, 6.6 to 1 |
| 4 | `#a4abb9` | `oklch(74.02% 0.0220 263.98)` | Atelier | black, 9.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f4f4f5 0.000% 25.000%, #171a25 25.000% 50.000%, #2152cf 50.000% 75.000%, #a4abb9 75.000% 100.000%);
background: linear-gradient(90deg, oklch(96.85% 0.0014 286.17) 0.000% 25.000%, oklch(22.05% 0.0220 272.43) 25.000% 50.000%, oklch(48.82% 0.1998 263.98) 50.000% 75.000%, oklch(74.02% 0.0220 263.98) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.969 | 0.001 | 286.2 |
| 2 | 0.22 | 0.022 | 272.4 |
| 3 | 0.488 | 0.2 | 264 |
| 4 | 0.74 | 0.022 | 264 |

## In these collections

- [Runway flash photography](https://grabient.com/runway-flash-photography)

## Other forms

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