# Navy, turquoise and ochre bold palette

The Navy, turquoise and ochre bold palette brings together dark blue, blue, teal, green, 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, purple, green and yellow angular swatches
- Seed: `kWNSfNtLI_0sktxdN7hbzY5o`
- Page: https://grabient.com/kWNSfNtLI_0sktxdN7hbzY5o?style=angularSwatches&steps=5&angle=225
- Drawn as: angular swatches, 5 steps, 225 degrees
- Kinds: dark to light, vivid, cool, multicolor
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 12.3 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 | `#18132f` | `oklch(20.87% 0.0537 288.98)` | Lost in Sadness | white, 17.9 to 1 |
| 2 | `#4a3990` | `oklch(41.34% 0.1378 287.93)` | Blue Gem | white, 9.1 to 1 |
| 3 | `#0f8da1` | `oklch(59.06% 0.1006 212.90)` | Parrot Flight | black, 5.3 to 1 |
| 4 | `#5ac270` | `oklch(73.23% 0.1530 148.44)` | Emerald Cory | black, 9.3 to 1 |
| 5 | `#f3d453` | `oklch(87.40% 0.1488 95.60)` | Portica | black, 14.4 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #18132f 0.000% 20.000%, #4a3990 20.000% 40.000%, #0f8da1 40.000% 60.000%, #5ac270 60.000% 80.000%, #f3d453 80.000% 100.000%);
background: conic-gradient(from 225deg, oklch(20.87% 0.0537 288.98) 0.000% 20.000%, oklch(41.34% 0.1378 287.93) 20.000% 40.000%, oklch(59.06% 0.1006 212.90) 40.000% 60.000%, oklch(73.23% 0.1530 148.44) 60.000% 80.000%, oklch(87.40% 0.1488 95.60) 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.054 | 289 |
| 2 | 0.413 | 0.138 | 287.9 |
| 3 | 0.591 | 0.101 | 212.9 |
| 4 | 0.732 | 0.153 | 148.4 |
| 5 | 0.874 | 0.149 | 95.6 |

## In these collections

- [Bold swatches](https://grabient.com/bold-swatches)

## Other forms

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