# Blue and ochre navy and gold palette

The Blue and ochre navy and gold palette brings together dark blue, blue, light yellow, and orange. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is light yellow.

- Also called: Navy, beige and orange angular swatches
- Seed: `kWNSa4q58-kMaP1xly5Xz29A`
- Page: https://grabient.com/kWNSa4q58-kMaP1xly5Xz29A?style=angularSwatches&steps=5&angle=315
- Drawn as: angular swatches, 5 steps, 315 degrees
- Hues: complementary
- Contrast of its darkest and lightest colors: 12.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 | `#081730` | `oklch(20.87% 0.0524 259.45)` | Liberty Blue | white, 17.8 to 1 |
| 2 | `#083b62` | `oklch(34.25% 0.0854 247.83)` | Poseidon | white, 11.6 to 1 |
| 3 | `#447091` | `oklch(52.76% 0.0717 242.55)` | Sailor’s Bay | white, 5.2 to 1 |
| 4 | `#eadcad` | `oklch(89.37% 0.0634 93.54)` | Star Bright | black, 15.3 to 1 |
| 5 | `#ee9700` | `oklch(74.80% 0.1628 69.22)` | Wiener Schnitzel | black, 9 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #081730 0.000% 20.000%, #083b62 20.000% 40.000%, #447091 40.000% 60.000%, #eadcad 60.000% 80.000%, #ee9700 80.000% 100.000%);
background: conic-gradient(from 315deg, oklch(20.87% 0.0524 259.45) 0.000% 20.000%, oklch(34.25% 0.0854 247.83) 20.000% 40.000%, oklch(52.76% 0.0717 242.55) 40.000% 60.000%, oklch(89.37% 0.0634 93.54) 60.000% 80.000%, oklch(74.80% 0.1628 69.22) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.209 | 0.052 | 259.5 |
| 2 | 0.343 | 0.085 | 247.8 |
| 3 | 0.528 | 0.072 | 242.5 |
| 4 | 0.894 | 0.063 | 93.5 |
| 5 | 0.748 | 0.169 | 69.2 |

## In these collections

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

## Other forms

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