# Navy and ochre color palette

The Navy and ochre color palette brings together dark blue, gold, and light yellow. The colors span a broad lightness range, combining moderate 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 light yellow.

- Also called: Navy, brown, mustard and beige linear swatches
- Seed: `kUODa3xySqtu2wVylkDg`
- Page: https://grabient.com/kUODa3xySqtu2wVylkDg?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: dark to light, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 13 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 | `#02193c` | `oklch(22.05% 0.0744 258.05)` | Maastricht Blue | white, 17.3 to 1 |
| 2 | `#946c24` | `oklch(55.91% 0.1006 78.40)` | Armageddon Dunes | white, 4.7 to 1 |
| 3 | `#c89f00` | `oklch(72.05% 0.1472 90.01)` | Molten Bronze | black, 8.4 to 1 |
| 4 | `#e8e0b2` | `oklch(90.16% 0.0606 98.48)` | Paccheri | black, 15.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #02193c 0.000% 25.000%, #946c24 25.000% 50.000%, #c89f00 50.000% 75.000%, #e8e0b2 75.000% 100.000%);
background: linear-gradient(90deg, oklch(22.05% 0.0744 258.05) 0.000% 25.000%, oklch(55.91% 0.1006 78.40) 25.000% 50.000%, oklch(72.05% 0.1472 90.01) 50.000% 75.000%, oklch(90.16% 0.0606 98.48) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.22 | 0.074 | 258 |
| 2 | 0.559 | 0.101 | 78.4 |
| 3 | 0.72 | 0.15 | 90 |
| 4 | 0.902 | 0.061 | 98.5 |

## In these collections

- [Luxury swatches](https://grabient.com/luxury-swatches)
- [Navy and gold swatches](https://grabient.com/navy-and-gold-swatches)

## Other forms

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