# Champagne and stone color palette

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

- Also called: Off-white, beige and gray linear swatches
- Seed: `kW9RI88oxAWkMPtJgtLdQYtI`
- Page: https://grabient.com/kW9RI88oxAWkMPtJgtLdQYtI?style=linearSwatches&steps=5&angle=180
- Drawn as: linear swatches, 5 steps, 180 degrees
- Kinds: neutral, light
- Hues: achromatic
- 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 | `#fbf2e1` | `oklch(96.46% 0.0248 85.08)` | Damask | black, 18.9 to 1 |
| 2 | `#e8dec6` | `oklch(90.16% 0.0331 88.25)` | Adobe Sand | black, 15.6 to 1 |
| 3 | `#d2c4af` | `oklch(82.68% 0.0331 78.74)` | Russian Toffee | black, 12.2 to 1 |
| 4 | `#767b7e` | `oklch(57.87% 0.0069 238.31)` | Philosophical | black, 4.8 to 1 |
| 5 | `#ebe4d9` | `oklch(92.13% 0.0165 79.79)` | Shoelace | black, 16.6 to 1 |

## CSS

```css
background: linear-gradient(180deg, #fbf2e1 0.000% 20.000%, #e8dec6 20.000% 40.000%, #d2c4af 40.000% 60.000%, #767b7e 60.000% 80.000%, #ebe4d9 80.000% 100.000%);
background: linear-gradient(180deg, oklch(96.46% 0.0248 85.08) 0.000% 20.000%, oklch(90.16% 0.0331 88.25) 20.000% 40.000%, oklch(82.68% 0.0331 78.74) 40.000% 60.000%, oklch(57.87% 0.0069 238.31) 60.000% 80.000%, oklch(92.13% 0.0165 79.79) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.965 | 0.025 | 85.1 |
| 2 | 0.902 | 0.033 | 88.2 |
| 3 | 0.827 | 0.033 | 78.7 |
| 4 | 0.579 | 0.007 | 238.3 |
| 5 | 0.921 | 0.017 | 79.8 |

## In these collections

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

## Other forms

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