# Navy and ochre funhaus palette

The Navy and ochre funhaus palette brings together blue, teal, gold, red, and pale 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 blue, and its lightest tone is pale orange.

- Also called: Navy, yellow, red and beige linear swatches
- Seed: `kWWj-zx6C62u1MdMwjj9Y7Fw`
- Page: https://grabient.com/kWWj-zx6C62u1MdMwjj9Y7Fw?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 8.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 | `#143d67` | `oklch(35.43% 0.0868 252.42)` | Blue Opal | white, 11.1 to 1 |
| 2 | `#1e8392` | `oklch(56.30% 0.0896 209.10)` | True Teal | black, 4.7 to 1 |
| 3 | `#f2c74b` | `oklch(84.65% 0.1461 89.68)` | Lauwiliwilinukunuku’oi’oi | black, 13 to 1 |
| 4 | `#d84937` | `oklch(60.24% 0.1819 30.50)` | Goblet Waxcap | black, 4.9 to 1 |
| 5 | `#f5e4c9` | `oklch(92.52% 0.0400 80.17)` | Marble Dust | black, 16.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #143d67 0.000% 20.000%, #1e8392 20.000% 40.000%, #f2c74b 40.000% 60.000%, #d84937 60.000% 80.000%, #f5e4c9 80.000% 100.000%);
background: linear-gradient(90deg, oklch(35.43% 0.0868 252.42) 0.000% 20.000%, oklch(56.30% 0.0896 209.10) 20.000% 40.000%, oklch(84.65% 0.1461 89.68) 40.000% 60.000%, oklch(60.24% 0.1819 30.50) 60.000% 80.000%, oklch(92.52% 0.0400 80.17) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.354 | 0.087 | 252.4 |
| 2 | 0.563 | 0.09 | 209.1 |
| 3 | 0.846 | 0.146 | 89.7 |
| 4 | 0.602 | 0.182 | 30.5 |
| 5 | 0.925 | 0.04 | 80.2 |

## In these collections

- [Funhaus](https://grabient.com/funhaus)

## Other forms

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