# Navy, magenta and ochre funhaus palette

The Navy, magenta and ochre funhaus palette brings together blue, red, and gold. 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 gold.

- Also called: Tritone blue, red and yellow linear swatches
- Seed: `kUVlvFSKg91JKT1rtMcA`
- Page: https://grabient.com/kUVlvFSKg91JKT1rtMcA?style=linearSwatches&steps=4&angle=135
- Drawn as: linear swatches, 4 steps, 135 degrees
- Kinds: dark to light
- Hues: two-hue
- Contrast of its darkest and lightest colors: 7.6 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 | `#2b2b76` | `oklch(33.86% 0.1254 277.03)` | Blue Rose | white, 12.2 to 1 |
| 2 | `#4f78b8` | `oklch(57.09% 0.1102 259.07)` | Diva Violet | black, 4.6 to 1 |
| 3 | `#f14b3d` | `oklch(64.57% 0.2039 29.05)` | Strawberry Avalanche | black, 5.8 to 1 |
| 4 | `#f2c74d` | `oklch(84.65% 0.1447 89.28)` | Lauwiliwilinukunuku’oi’oi | black, 13 to 1 |

## CSS

```css
background: linear-gradient(135deg, #2b2b76 0.000% 25.000%, #4f78b8 25.000% 50.000%, #f14b3d 50.000% 75.000%, #f2c74d 75.000% 100.000%);
background: linear-gradient(135deg, oklch(33.86% 0.1254 277.03) 0.000% 25.000%, oklch(57.09% 0.1102 259.07) 25.000% 50.000%, oklch(64.57% 0.2039 29.05) 50.000% 75.000%, oklch(84.65% 0.1447 89.28) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.339 | 0.125 | 277 |
| 2 | 0.571 | 0.11 | 259.1 |
| 3 | 0.646 | 0.204 | 389 |
| 4 | 0.846 | 0.145 | 449.3 |

## In these collections

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

## Other forms

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