# Navy, mauve and gold masquerade palette

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

- Also called: Navy and beige angular swatches
- Seed: `kUNB3BuSO98ggUxwj8Lg`
- Page: https://grabient.com/kUNB3BuSO98ggUxwj8Lg?style=angularSwatches&steps=4&angle=135
- Drawn as: angular swatches, 4 steps, 135 degrees
- Kinds: dark to light
- Hues: two-hue
- Contrast of its darkest and lightest colors: 12.7 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 | `#111629` | `oklch(20.47% 0.0400 272.11)` | Sambucus | white, 17.9 to 1 |
| 2 | `#2c568a` | `oklch(44.88% 0.0978 255.20)` | Royal Consort | white, 7.4 to 1 |
| 3 | `#9e6840` | `oklch(56.69% 0.0882 56.88)` | Bottled Ship | white, 4.6 to 1 |
| 4 | `#e8d7ba` | `oklch(88.58% 0.0427 82.25)` | Drumskin | black, 14.8 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #111629 0.000% 25.000%, #2c568a 25.000% 50.000%, #9e6840 50.000% 75.000%, #e8d7ba 75.000% 100.000%);
background: conic-gradient(from 135deg, oklch(20.47% 0.0400 272.11) 0.000% 25.000%, oklch(44.88% 0.0978 255.20) 25.000% 50.000%, oklch(56.69% 0.0882 56.88) 50.000% 75.000%, oklch(88.58% 0.0427 82.25) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.205 | 0.04 | 272.1 |
| 2 | 0.449 | 0.098 | 255.2 |
| 3 | 0.567 | 0.088 | 416.9 |
| 4 | 0.886 | 0.043 | 442.2 |

## In these collections

- [Masquerade swatches](https://grabient.com/masquerade-swatches)

## Other forms

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