# Champagne orange palette

The Champagne orange palette brings together pale orange, light orange, and orange. The colors span a moderate lightness range, combining moderate 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 pale orange.

- Also called: Analogous beige and orange angular swatches
- Seed: `kY9hlA85m_OwoPzksz827a_VKzP0`
- Page: https://grabient.com/kY9hlA85m_OwoPzksz827a_VKzP0?style=angularSwatches&steps=6&angle=180
- Drawn as: angular swatches, 6 steps, 180 degrees
- Kinds: light to dark, pastel, light, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 3 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 | `#fdf4db` | `oklch(96.85% 0.0344 90.70)` | Desert Lily | black, 19.1 to 1 |
| 2 | `#f7deac` | `oklch(90.94% 0.0703 84.36)` | Dumpling | black, 16 to 1 |
| 3 | `#f6c578` | `oklch(85.04% 0.1102 78.02)` | Sunday Afternoon | black, 13.1 to 1 |
| 4 | `#f2ab47` | `oklch(79.13% 0.1406 71.68)` | Artisans Gold | black, 10.6 to 1 |
| 5 | `#e38f22` | `oklch(72.05% 0.1502 66.40)` | Hotter Butter | black, 8.2 to 1 |
| 6 | `#cb781e` | `oklch(64.96% 0.1406 61.11)` | Ochre | black, 6.2 to 1 |

## CSS

```css
background: conic-gradient(from 180deg, #fdf4db 0.000% 16.667%, #f7deac 16.667% 33.333%, #f6c578 33.333% 50.000%, #f2ab47 50.000% 66.667%, #e38f22 66.667% 83.333%, #cb781e 83.333% 100.000%);
background: conic-gradient(from 180deg, oklch(96.85% 0.0344 90.70) 0.000% 16.667%, oklch(90.94% 0.0703 84.36) 16.667% 33.333%, oklch(85.04% 0.1102 78.02) 33.333% 50.000%, oklch(79.13% 0.1406 71.68) 50.000% 66.667%, oklch(72.05% 0.1502 66.40) 66.667% 83.333%, oklch(64.96% 0.1406 61.11) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.969 | 0.034 | 90.7 |
| 2 | 0.909 | 0.07 | 84.4 |
| 3 | 0.85 | 0.11 | 78 |
| 4 | 0.791 | 0.141 | 71.7 |
| 5 | 0.72 | 0.15 | 66.4 |
| 6 | 0.65 | 0.141 | 61.1 |

## In these collections

- [Orange swatches](https://grabient.com/orange-swatches)

## Other forms

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