# Ochre, moss and navy color palette

The Ochre, moss and navy color palette brings together gold, teal, red, and dark blue. 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 gold.

- Also called: Rainbow from yellow to navy angular swatches
- Seed: `kU2oNE1D3MFbMLAjq7JA`
- Page: https://grabient.com/kU2oNE1D3MFbMLAjq7JA?style=angularSwatches&steps=4&angle=45
- Drawn as: angular swatches, 4 steps, 45 degrees
- Kinds: light to dark, vivid, rainbow
- Hues: multi-hue
- Contrast of its darkest and lightest colors: 9.8 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 | `#f3cf00` | `oklch(85.83% 0.1767 96.32)` | Endless Summer | black, 13.6 to 1 |
| 2 | `#00a7ac` | `oklch(66.14% 0.1125 198.84)` | Blue Bolero | black, 7.1 to 1 |
| 3 | `#ff5740` | `oklch(68.11% 0.2082 30.81)` | Ogre Odour | black, 6.6 to 1 |
| 4 | `#1c1c62` | `oklch(27.95% 0.1199 275.62)` | Pure Midnight | white, 15.1 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #f3cf00 0.000% 25.000%, #00a7ac 25.000% 50.000%, #ff5740 50.000% 75.000%, #1c1c62 75.000% 100.000%);
background: conic-gradient(from 45deg, oklch(85.83% 0.1767 96.32) 0.000% 25.000%, oklch(66.14% 0.1125 198.84) 25.000% 50.000%, oklch(68.11% 0.2082 30.81) 50.000% 75.000%, oklch(27.95% 0.1199 275.62) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.858 | 0.181 | 96.3 |
| 2 | 0.661 | 0.169 | 198.8 |
| 3 | 0.681 | 0.209 | 30.8 |
| 4 | 0.28 | 0.12 | -84.4 |

## In these collections

- [Primary color swatches](https://grabient.com/primary-color-swatches)
- [Energetic swatches](https://grabient.com/energetic-swatches)
- [Happy swatches](https://grabient.com/happy-swatches)

## Other forms

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