# Navy, sage and gold color palette

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

- Also called: Navy, yellow and tan angular swatches
- Seed: `kYNie8JyI_bcSvLep676zXAnUiP2`
- Page: https://grabient.com/kYNie8JyI_bcSvLep676zXAnUiP2?style=angularSwatches&steps=6&angle=45
- Drawn as: angular swatches, 6 steps, 45 degrees
- Kinds: dark to light
- Hues: complementary
- Contrast of its darkest and lightest colors: 14 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 | `#0c1831` | `oklch(21.26% 0.0537 264.37)` | Liberty Blue | white, 17.6 to 1 |
| 2 | `#102d5e` | `oklch(30.71% 0.0937 260.15)` | Marine | white, 13.4 to 1 |
| 3 | `#325668` | `oklch(43.31% 0.0510 232.67)` | Deep Loch | white, 7.9 to 1 |
| 4 | `#c8a855` | `oklch(74.41% 0.1089 88.95)` | Glorious Gold | black, 9.2 to 1 |
| 5 | `#ebc948` | `oklch(84.25% 0.1474 94.24)` | Snake Eyes | black, 12.9 to 1 |
| 6 | `#fde39c` | `oklch(92.13% 0.0937 90.01)` | Crème Brûlée | black, 16.6 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #0c1831 0.000% 16.667%, #102d5e 16.667% 33.333%, #325668 33.333% 50.000%, #c8a855 50.000% 66.667%, #ebc948 66.667% 83.333%, #fde39c 83.333% 100.000%);
background: conic-gradient(from 45deg, oklch(21.26% 0.0537 264.37) 0.000% 16.667%, oklch(30.71% 0.0937 260.15) 16.667% 33.333%, oklch(43.31% 0.0510 232.67) 33.333% 50.000%, oklch(74.41% 0.1089 88.95) 50.000% 66.667%, oklch(84.25% 0.1474 94.24) 66.667% 83.333%, oklch(92.13% 0.0937 90.01) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.213 | 0.054 | 264.4 |
| 2 | 0.307 | 0.094 | 260.1 |
| 3 | 0.433 | 0.051 | 232.7 |
| 4 | 0.744 | 0.109 | 89 |
| 5 | 0.843 | 0.147 | 94.2 |
| 6 | 0.921 | 0.094 | 90 |

## In these collections

- [Navy and gold](https://grabient.com/navy-and-gold)
- [Wheat field sunset](https://grabient.com/wheat-field-sunset)

## Other forms

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