# Champagne and gray color palette

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

- Also called: Gray and tan angular swatches
- Seed: `kY5hQ-54-_VkQvuyg0-SY4vl2UQQ`
- Page: https://grabient.com/kY5hQ-54-_VkQvuyg0-SY4vl2UQQ?style=angularSwatches&steps=6
- Drawn as: angular swatches, 6 steps, 90 degrees
- Kinds: dark center, neutral, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 6.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 | `#e7dfcc` | `oklch(90.55% 0.0276 87.89)` | Spellbound | black, 15.8 to 1 |
| 2 | `#d0c1a4` | `oklch(81.50% 0.0427 82.61)` | Stylish | black, 11.8 to 1 |
| 3 | `#b09b80` | `oklch(70.08% 0.0455 74.15)` | Incense | black, 7.8 to 1 |
| 4 | `#424849` | `oklch(39.76% 0.0083 206.25)` | Big Dipper | white, 9.2 to 1 |
| 5 | `#8a7662` | `oklch(57.87% 0.0386 67.81)` | Mink | black, 4.8 to 1 |
| 6 | `#bda683` | `oklch(73.62% 0.0551 77.32)` | Mojave Desert | black, 8.9 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #e7dfcc 0.000% 16.667%, #d0c1a4 16.667% 33.333%, #b09b80 33.333% 50.000%, #424849 50.000% 66.667%, #8a7662 66.667% 83.333%, #bda683 83.333% 100.000%);
background: conic-gradient(from 90deg, oklch(90.55% 0.0276 87.89) 0.000% 16.667%, oklch(81.50% 0.0427 82.61) 16.667% 33.333%, oklch(70.08% 0.0455 74.15) 33.333% 50.000%, oklch(39.76% 0.0083 206.25) 50.000% 66.667%, oklch(57.87% 0.0386 67.81) 66.667% 83.333%, oklch(73.62% 0.0551 77.32) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.906 | 0.028 | 87.9 |
| 2 | 0.815 | 0.043 | 82.6 |
| 3 | 0.701 | 0.045 | 74.2 |
| 4 | 0.398 | 0.008 | 206.2 |
| 5 | 0.579 | 0.039 | 67.8 |
| 6 | 0.736 | 0.055 | 77.3 |

## In these collections

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

## Other forms

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