# Ochre, stone and navy color palette

The Ochre, stone and navy color palette brings together orange, off-white, teal, and dark blue. The colors span a broad lightness range, combining restrained color with clear 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: Complementary brown, gray and navy linear swatches
- Seed: `kUeig69gbG1eJRslGcbA`
- Page: https://grabient.com/kUeig69gbG1eJRslGcbA?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: light center, neutral
- Hues: complementary
- Contrast of its darkest and lightest colors: 11.5 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 | `#6d5b39` | `oklch(48.03% 0.0551 82.27)` | Bali Batik | white, 6.5 to 1 |
| 2 | `#e1ebe0` | `oklch(92.91% 0.0179 140.39)` | Loggia Lights | black, 17.1 to 1 |
| 3 | `#8aa0a1` | `oklch(68.90% 0.0248 198.51)` | Aqua Smoke | black, 7.6 to 1 |
| 4 | `#122c4e` | `oklch(29.13% 0.0703 256.63)` | Midnight Ocean | white, 14 to 1 |

## CSS

```css
background: linear-gradient(90deg, #6d5b39 0.000% 25.000%, #e1ebe0 25.000% 50.000%, #8aa0a1 50.000% 75.000%, #122c4e 75.000% 100.000%);
background: linear-gradient(90deg, oklch(48.03% 0.0551 82.27) 0.000% 25.000%, oklch(92.91% 0.0179 140.39) 25.000% 50.000%, oklch(68.90% 0.0248 198.51) 50.000% 75.000%, oklch(29.13% 0.0703 256.63) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.48 | 0.055 | 82.3 |
| 2 | 0.929 | 0.018 | 140.4 |
| 3 | 0.689 | 0.025 | 198.5 |
| 4 | 0.291 | 0.07 | 256.6 |

## In these collections

- [Luxury swatches](https://grabient.com/luxury-swatches)
- [Calm swatches](https://grabient.com/calm-swatches)
- [Dusty swatches](https://grabient.com/dusty-swatches)
- [Elegant swatches](https://grabient.com/elegant-swatches)

## Other forms

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