# Midnight Champagne Quartet

The Champagne, rose and mauve color palette brings together pale orange, dark blue, orange, and magenta. 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 pale orange.

- Also called: Gray, navy, tan and purple angular swatches
- Seed: `kU5BY9JRUqtej1Q5k7HA`
- Page: https://grabient.com/kU5BY9JRUqtej1Q5k7HA?style=angularSwatches&steps=4&angle=45
- Drawn as: angular swatches, 4 steps, 45 degrees
- Kinds: dark center, muted
- Hues: wide
- Contrast of its darkest and lightest colors: 10.4 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 | `#e6dcc7` | `oklch(89.76% 0.0303 85.78)` | Eiderdown | black, 15.4 to 1 |
| 2 | `#1e2a48` | `oklch(29.13% 0.0579 266.13)` | Fainting Light | white, 14.1 to 1 |
| 3 | `#b79650` | `oklch(68.90% 0.0978 84.72)` | Viva Las Vegas | black, 7.5 to 1 |
| 4 | `#664c67` | `oklch(45.28% 0.0537 325.31)` | Bunchberry | white, 7.5 to 1 |

## CSS

```css
background: conic-gradient(from 45deg, #e6dcc7 0.000% 25.000%, #1e2a48 25.000% 50.000%, #b79650 50.000% 75.000%, #664c67 75.000% 100.000%);
background: conic-gradient(from 45deg, oklch(89.76% 0.0303 85.78) 0.000% 25.000%, oklch(29.13% 0.0579 266.13) 25.000% 50.000%, oklch(68.90% 0.0978 84.72) 50.000% 75.000%, oklch(45.28% 0.0537 325.31) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.898 | 0.03 | 85.8 |
| 2 | 0.291 | 0.058 | -93.9 |
| 3 | 0.689 | 0.098 | 84.7 |
| 4 | 0.453 | 0.054 | -34.7 |

## In these collections

- [Indigo yukata](https://grabient.com/indigo-yukata)
- [Champagne silk reception](https://grabient.com/champagne-silk-reception)
- [Calm swatches](https://grabient.com/calm-swatches)

## Other forms

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