# Champagne and terracotta color palette

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

- Also called: Analogous beige, yellow and orange linear gradient
- Seed: `kW8yI-9CtAes4PrdNz5SrK8w`
- Page: https://grabient.com/kW8yI-9CtAes4PrdNz5SrK8w?steps=6&angle=180
- Drawn as: linear gradient, 6 steps, 180 degrees
- Kinds: light to dark, vivid, light, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.8 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 | `#fef0ce` | `oklch(95.67% 0.0469 87.89)` | Walnut Milkies | black, 18.5 to 1 |
| 2 | `#ffe593` | `oklch(92.45% 0.1052 92.16)` | Chilled Lemonade | black, 16.8 to 1 |
| 3 | `#ffcf59` | `oklch(87.50% 0.1440 86.72)` | Casandora Yellow | black, 14.3 to 1 |
| 4 | `#f7af2c` | `oklch(80.30% 0.1565 76.89)` | Tangerine Twist | black, 11.1 to 1 |
| 5 | `#df8723` | `oklch(70.31% 0.1495 62.92)` | French Toast | black, 7.6 to 1 |
| 6 | `#bf5b33` | `oklch(58.66% 0.1392 41.39)` | Tartare | black, 4.7 to 1 |

## CSS

```css
background: linear-gradient(180deg, #fef0ce 0.0%, #ffe593 20.0%, #ffcf59 40.0%, #f7af2c 60.0%, #df8723 80.0%, #bf5b33 100.0%);
background: linear-gradient(180deg in oklch, oklch(95.67% 0.0469 87.89) 0.0%, oklch(92.45% 0.1052 92.16) 20.0%, oklch(87.50% 0.1440 86.72) 40.0%, oklch(80.30% 0.1565 76.89) 60.0%, oklch(70.31% 0.1495 62.92) 80.0%, oklch(58.66% 0.1392 41.39) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.957 | 0.047 | 87.9 |
| 2 | 0.913 | 0.119 | 92.1 |
| 3 | 0.843 | 0.154 | 81.6 |
| 4 | 0.732 | 0.152 | 67.8 |
| 5 | 0.587 | 0.139 | 41.4 |

## In these collections

- [Thanksgiving gradients](https://grabient.com/thanksgiving-gradients)
- [Golden hour gradients](https://grabient.com/golden-hour-gradients)
- [Wheat field sunset](https://grabient.com/wheat-field-sunset)

## Other forms

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