# Champagne and stone color palette

The Champagne and stone color palette brings together off-white, light gray, light orange, and orange. The colors span a moderate 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: White and gray linear swatches
- Seed: `kU9Q098Ye_WaMv7YED-A`
- Page: https://grabient.com/kU9Q098Ye_WaMv7YED-A?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: neutral, 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 | `#f9f3e6` | `oklch(96.46% 0.0179 86.48)` | Milk Moustache | black, 18.9 to 1 |
| 2 | `#e9e2d5` | `oklch(91.42% 0.0191 82.42)` | Panda White | black, 16.2 to 1 |
| 3 | `#d8cdbb` | `oklch(85.31% 0.0271 80.01)` | Perfect Crust | black, 13.4 to 1 |
| 4 | `#c4b49d` | `oklch(77.78% 0.0374 78.29)` | Windsor Greige | black, 10.3 to 1 |
| 5 | `#ac997e` | `oklch(69.29% 0.0441 75.92)` | Smallmouth Bass | black, 7.6 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f9f3e6 0.000% 20.000%, #e9e2d5 20.000% 40.000%, #d8cdbb 40.000% 60.000%, #c4b49d 60.000% 80.000%, #ac997e 80.000% 100.000%);
background: linear-gradient(90deg, oklch(96.46% 0.0179 86.48) 0.000% 20.000%, oklch(91.42% 0.0191 82.42) 20.000% 40.000%, oklch(85.31% 0.0271 80.01) 40.000% 60.000%, oklch(77.78% 0.0374 78.29) 60.000% 80.000%, oklch(69.29% 0.0441 75.92) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.965 | 0.018 | 86.5 |
| 2 | 0.894 | 0.021 | 81.2 |
| 3 | 0.807 | 0.034 | 79.1 |
| 4 | 0.693 | 0.044 | 75.9 |

## In these collections

- [Wood color palette](https://grabient.com/wood-color-palette)
- [Beige swatches](https://grabient.com/beige-swatches)
- [Tan color palette](https://grabient.com/tan-color-palette)
- [Sherwin Williams 2027 swatches](https://grabient.com/sherwin-williams-2027-swatches)

## Other forms

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