# Champagne and terracotta color palette

The Champagne and terracotta color palette brings together off-white, pale orange, light orange, and red. 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 red, and its lightest tone is off-white.

- Also called: Seamless off-white, beige and gray angular swatches
- Seed: `kY-RE_dYo_2yNPhMIDscQpFHkJwQ`
- Page: https://grabient.com/kY-RE_dYo_2yNPhMIDscQpFHkJwQ?style=angularSwatches&steps=6
- Drawn as: angular swatches, 6 steps, 90 degrees
- Kinds: dark center, neutral, light, warm, seamless
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.9 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 | `#fff8e7` | `oklch(98.03% 0.0234 88.59)` | Cosmic Latte | black, 19.8 to 1 |
| 2 | `#eee6d2` | `oklch(92.52% 0.0276 87.54)` | White Warm Wool | black, 16.8 to 1 |
| 3 | `#deccb6` | `oklch(85.43% 0.0358 71.69)` | Rice Crackers | black, 13.4 to 1 |
| 4 | `#ae6b60` | `oklch(59.84% 0.0882 30.47)` | Scene Stealer | black, 5 to 1 |
| 5 | `#e6d8c7` | `oklch(88.98% 0.0276 73.80)` | Dépaysement | black, 15 to 1 |
| 6 | `#f8eedc` | `oklch(95.28% 0.0262 83.31)` | Creamy Cameo | black, 18.2 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #fff8e7 0.000% 16.667%, #eee6d2 16.667% 33.333%, #deccb6 33.333% 50.000%, #ae6b60 50.000% 66.667%, #e6d8c7 66.667% 83.333%, #f8eedc 83.333% 100.000%);
background: conic-gradient(from 90deg, oklch(98.03% 0.0234 88.59) 0.000% 16.667%, oklch(92.52% 0.0276 87.54) 16.667% 33.333%, oklch(85.43% 0.0358 71.69) 33.333% 50.000%, oklch(59.84% 0.0882 30.47) 50.000% 66.667%, oklch(88.98% 0.0276 73.80) 66.667% 83.333%, oklch(95.28% 0.0262 83.31) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.98 | 0.023 | 88.6 |
| 2 | 0.925 | 0.028 | 87.5 |
| 3 | 0.854 | 0.036 | 71.7 |
| 4 | 0.598 | 0.088 | 30.5 |
| 5 | 0.89 | 0.028 | 73.8 |
| 6 | 0.953 | 0.026 | 83.3 |

## In these collections

- [White swatches](https://grabient.com/white-swatches)
- [Cream](https://grabient.com/cream)

## Other forms

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