# Blue and ochre color palette

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

- Also called: Navy, blue, tan and brown linear swatches
- Seed: `kWOzG4rSU_8OjvxpL61068-g`
- Page: https://grabient.com/kWOzG4rSU_8OjvxpL61068-g?style=linearSwatches&steps=5&angle=180
- Drawn as: linear swatches, 5 steps, 180 degrees
- Kinds: vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 9.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 | `#081c3d` | `oklch(23.23% 0.0675 259.45)` | Maastricht Blue | white, 16.8 to 1 |
| 2 | `#183a70` | `oklch(35.43% 0.1020 259.45)` | Tardis Blue | white, 11.2 to 1 |
| 3 | `#3f6fa3` | `oklch(53.15% 0.0978 252.06)` | Mega Blue | white, 5.2 to 1 |
| 4 | `#e0c659` | `oklch(82.68% 0.1309 95.66)` | Chicco d’Oro | black, 12.3 to 1 |
| 5 | `#b78916` | `oklch(65.75% 0.1295 84.03)` | Loden Yellow | black, 6.6 to 1 |

## CSS

```css
background: linear-gradient(180deg, #081c3d 0.000% 20.000%, #183a70 20.000% 40.000%, #3f6fa3 40.000% 60.000%, #e0c659 60.000% 80.000%, #b78916 80.000% 100.000%);
background: linear-gradient(180deg, oklch(23.23% 0.0675 259.45) 0.000% 20.000%, oklch(35.43% 0.1020 259.45) 20.000% 40.000%, oklch(53.15% 0.0978 252.06) 40.000% 60.000%, oklch(82.68% 0.1309 95.66) 60.000% 80.000%, oklch(65.75% 0.1295 84.03) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.232 | 0.068 | 259.5 |
| 2 | 0.354 | 0.102 | 259.5 |
| 3 | 0.531 | 0.098 | 252.1 |
| 4 | 0.827 | 0.131 | 95.7 |
| 5 | 0.657 | 0.13 | 84 |

## In these collections

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

## Other forms

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