# Navy and ochre color palette

The Navy and ochre color palette brings together dark blue, blue, gold, and light yellow. 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 light yellow.

- Also called: Navy, mustard and beige linear swatches
- Seed: `kWKSi-qKS982kq7ftsE85ZAg`
- Page: https://grabient.com/kWKSi-qKS982kq7ftsE85ZAg?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: dark to light, vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 14.9 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 | `#050b25` | `oklch(16.14% 0.0551 267.89)` | Void | white, 19.4 to 1 |
| 2 | `#003360` | `oklch(31.90% 0.0930 251.08)` | Prussian Blue | white, 12.7 to 1 |
| 3 | `#a37c35` | `oklch(61.02% 0.1006 79.79)` | Arlington Bronze | black, 5.4 to 1 |
| 4 | `#d3a914` | `oklch(75.20% 0.1502 90.36)` | Armageddon Dust | black, 9.4 to 1 |
| 5 | `#ede2b4` | `oklch(90.94% 0.0606 95.64)` | Buttered | black, 16 to 1 |

## CSS

```css
background: linear-gradient(90deg, #050b25 0.000% 20.000%, #003360 20.000% 40.000%, #a37c35 40.000% 60.000%, #d3a914 60.000% 80.000%, #ede2b4 80.000% 100.000%);
background: linear-gradient(90deg, oklch(16.14% 0.0551 267.89) 0.000% 20.000%, oklch(31.90% 0.0930 251.08) 20.000% 40.000%, oklch(61.02% 0.1006 79.79) 40.000% 60.000%, oklch(75.20% 0.1502 90.36) 60.000% 80.000%, oklch(90.94% 0.0606 95.64) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.161 | 0.055 | 267.9 |
| 2 | 0.319 | 0.101 | 251 |
| 3 | 0.61 | 0.101 | 79.8 |
| 4 | 0.752 | 0.15 | 90.4 |
| 5 | 0.909 | 0.061 | 95.6 |

## In these collections

- [Blue and yellow swatches](https://grabient.com/blue-and-yellow-swatches)
- [Navy and gold swatches](https://grabient.com/navy-and-gold-swatches)
- [Jewel tones](https://grabient.com/jewel-tones)

## Other forms

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