# Champagne and orange color palette

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

- Also called: Analogous off-white, beige and peach linear swatches
- Seed: `kW-RNC-Ro__IjvztHbz5qM9w`
- Page: https://grabient.com/kW-RNC-Ro__IjvztHbz5qM9w?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: pastel, light, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 1.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 | `#fef9e5` | `oklch(98.03% 0.0262 93.52)` | Magnolia | black, 19.8 to 1 |
| 2 | `#ffefba` | `oklch(95.27% 0.0700 93.53)` | Aztec Aura | black, 18.3 to 1 |
| 3 | `#f9da91` | `oklch(89.76% 0.0978 87.18)` | Meadow Yellow | black, 15.4 to 1 |
| 4 | `#f8c59a` | `oklch(85.83% 0.0813 61.81)` | Cream Blush | black, 13.4 to 1 |
| 5 | `#f5ac8d` | `oklch(80.71% 0.0965 43.85)` | October Haze | black, 11.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #fef9e5 0.000% 20.000%, #ffefba 20.000% 40.000%, #f9da91 40.000% 60.000%, #f8c59a 60.000% 80.000%, #f5ac8d 80.000% 100.000%);
background: linear-gradient(90deg, oklch(98.03% 0.0262 93.52) 0.000% 20.000%, oklch(95.27% 0.0700 93.53) 20.000% 40.000%, oklch(89.76% 0.0978 87.18) 40.000% 60.000%, oklch(85.83% 0.0813 61.81) 60.000% 80.000%, oklch(80.71% 0.0965 43.85) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.98 | 0.026 | 93.5 |
| 2 | 0.953 | 0.072 | 93.5 |
| 3 | 0.898 | 0.098 | 87.2 |
| 4 | 0.858 | 0.081 | 61.8 |
| 5 | 0.807 | 0.096 | 43.8 |

## In these collections

- [Warm swatches](https://grabient.com/warm-swatches)
- [Soft swatches](https://grabient.com/soft-swatches)

## Other forms

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