# Champagne color palette

The Champagne color palette brings together pale yellow, yellow, and gold. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is gold, and its lightest tone is pale yellow.

- Also called: Pastel beige, yellow and orange linear swatches
- Seed: `kW-CJG-KI_3ExP5ptr92jI-4`
- Page: https://grabient.com/kW-CJG-KI_3ExP5ptr92jI-4?style=linearSwatches&steps=5&angle=45
- Drawn as: linear swatches, 5 steps, 45 degrees
- Kinds: pastel, light, warm
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 2.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 | `#fff9d5` | `oklch(97.64% 0.0469 99.14)` | Reddish White | black, 19.6 to 1 |
| 2 | `#feefa6` | `oklch(94.88% 0.0937 98.08)` | Cream and Butter | black, 18.1 to 1 |
| 3 | `#f7da6a` | `oklch(88.98% 0.1350 94.91)` | Huáng Jīn Zhōu Gold | black, 15.1 to 1 |
| 4 | `#ecc33e` | `oklch(83.07% 0.1502 90.69)` | Lime Drop | black, 12.4 to 1 |
| 5 | `#cb9720` | `oklch(70.87% 0.1378 82.23)` | Retro Vibe | black, 8 to 1 |

## CSS

```css
background: linear-gradient(45deg, #fff9d5 0.000% 20.000%, #feefa6 20.000% 40.000%, #f7da6a 40.000% 60.000%, #ecc33e 60.000% 80.000%, #cb9720 80.000% 100.000%);
background: linear-gradient(45deg, oklch(97.64% 0.0469 99.14) 0.000% 20.000%, oklch(94.88% 0.0937 98.08) 20.000% 40.000%, oklch(88.98% 0.1350 94.91) 40.000% 60.000%, oklch(83.07% 0.1502 90.69) 60.000% 80.000%, oklch(70.87% 0.1378 82.23) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.976 | 0.047 | 99.1 |
| 2 | 0.949 | 0.094 | 98.1 |
| 3 | 0.89 | 0.135 | 94.9 |
| 4 | 0.831 | 0.15 | 90.7 |
| 5 | 0.709 | 0.138 | 82.2 |

## In these collections

- [Tint swatches](https://grabient.com/tint-swatches)
- [Yellow swatches](https://grabient.com/yellow-swatches)

## Other forms

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