# Champagne and stone color palette

The Champagne and stone color palette brings together off-white, light orange, orange, and light gray. The colors span a narrow lightness range, combining restrained color with gentle contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is orange, and its lightest tone is off-white.

- Also called: Gray and tan angular swatches
- Seed: `kW5w4-aAu_NcRvzgjcB7ghAQ`
- Page: https://grabient.com/kW5w4-aAu_NcRvzgjcB7ghAQ?style=angularSwatches&steps=5&angle=315
- Drawn as: angular swatches, 5 steps, 315 degrees
- Kinds: neutral, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.1 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 | `#e7e1d3` | `oklch(90.94% 0.0193 87.19)` | Crisp Linen | black, 16 to 1 |
| 2 | `#cec2ad` | `oklch(81.89% 0.0317 80.85)` | Merino Wool | black, 11.9 to 1 |
| 3 | `#ac9679` | `oklch(68.50% 0.0482 74.51)` | Serengeti | black, 7.3 to 1 |
| 4 | `#beaf97` | `oklch(75.98% 0.0372 78.73)` | British Khaki | black, 9.7 to 1 |
| 5 | `#dad2c3` | `oklch(86.61% 0.0220 81.90)` | Natural Tan | black, 13.9 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #e7e1d3 0.000% 20.000%, #cec2ad 20.000% 40.000%, #ac9679 40.000% 60.000%, #beaf97 60.000% 80.000%, #dad2c3 80.000% 100.000%);
background: conic-gradient(from 315deg, oklch(90.94% 0.0193 87.19) 0.000% 20.000%, oklch(81.89% 0.0317 80.85) 20.000% 40.000%, oklch(68.50% 0.0482 74.51) 40.000% 60.000%, oklch(75.98% 0.0372 78.73) 60.000% 80.000%, oklch(86.61% 0.0220 81.90) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.909 | 0.019 | 87.2 |
| 2 | 0.819 | 0.032 | 80.8 |
| 3 | 0.685 | 0.048 | 74.5 |
| 4 | 0.76 | 0.037 | 78.7 |
| 5 | 0.866 | 0.022 | 81.9 |

## In these collections

- [Minimal color palette](https://grabient.com/minimal-color-palette)
- [Beige swatches](https://grabient.com/beige-swatches)
- [Beige](https://grabient.com/beige)
- [Neutral swatches](https://grabient.com/neutral-swatches)

## Other forms

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