# Champagne and bronze color palette

The Champagne and bronze color palette brings together pale yellow, light orange, gold, and orange. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits holiday stationery and seasonal displays. Its darkest tone is orange, and its lightest tone is pale yellow.

- Also called: Analogous beige, orange and brown radial gradient
- Seed: `kW9B1HcCC--MzPtSuj5P6g-I`
- Page: https://grabient.com/kW9B1HcCC--MzPtSuj5P6g-I?style=radialGradient&steps=32
- Drawn as: radial gradient, 32 steps, 90 degrees
- Kinds: light to dark, pastel, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 5.5 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 | `#f8f3d5` | `oklch(96.06% 0.0400 99.84)` | French 75 | black, 18.7 to 1 |
| 2 | `#f7f1d0` | `oklch(95.45% 0.0439 99.17)` | Flashpoint | black, 18.4 to 1 |
| 3 | `#f6eec9` | `oklch(94.65% 0.0492 98.29)` | Tart Gelato | black, 18 to 1 |
| 4 | `#f4ebc1` | `oklch(93.70% 0.0555 97.23)` | Transparent Beige | black, 17.5 to 1 |
| 5 | `#f3e7b8` | `oklch(92.63% 0.0625 96.06)` | Menoth White Base | black, 16.9 to 1 |
| 6 | `#f1e3ae` | `oklch(91.48% 0.0698 94.81)` | Lemon Appeal | black, 16.3 to 1 |
| 7 | `#f0dfa4` | `oklch(90.28% 0.0773 93.54)` | North Star | black, 15.7 to 1 |
| 8 | `#efda9a` | `oklch(89.08% 0.0845 92.29)` | Demeter | black, 15.1 to 1 |
| 9 | `#edd691` | `oklch(87.90% 0.0912 91.10)` | Tainted Gold | black, 14.5 to 1 |
| 10 | `#ecd187` | `oklch(86.70% 0.0981 89.96)` | Punch of Yellow | black, 14 to 1 |
| 11 | `#ebcc7c` | `oklch(85.47% 0.1052 88.83)` | Mountain Maize | black, 13.4 to 1 |
| 12 | `#eac771` | `oklch(84.20% 0.1125 87.69)` | Hit the Hay | black, 12.9 to 1 |
| 13 | `#e9c266` | `oklch(82.89% 0.1196 86.52)` | Quilt Gold | black, 12.3 to 1 |
| 14 | `#e8bc5a` | `oklch(81.54% 0.1264 85.30)` | Sundried | black, 11.7 to 1 |
| 15 | `#e6b64e` | `oklch(80.14% 0.1327 84.00)` | Honey Glow | black, 11.2 to 1 |
| 16 | `#e5b041` | `oklch(78.70% 0.1382 82.61)` | Quercitron | black, 10.6 to 1 |
| 17 | `#e3aa34` | `oklch(77.20% 0.1428 81.11)` | Tulip Tree | black, 10 to 1 |
| 18 | `#e1a326` | `oklch(75.64% 0.1473 79.50)` | Grapefruit Yellow | black, 9.4 to 1 |
| 19 | `#df9d10` | `oklch(74.04% 0.1515 77.80)` | Grapefruit Yellow | black, 8.9 to 1 |
| 20 | `#db9600` | `oklch(72.38% 0.1520 76.01)` | Beige Red | black, 8.3 to 1 |
| 21 | `#d79000` | `oklch(70.69% 0.1497 74.18)` | Harvest Eve Gold | black, 7.8 to 1 |
| 22 | `#d28a00` | `oklch(68.96% 0.1474 72.32)` | Lobster Butter Sauce | black, 7.3 to 1 |
| 23 | `#cd8300` | `oklch(67.20% 0.1452 70.45)` | Copious Caramel | black, 6.8 to 1 |
| 24 | `#c87d00` | `oklch(65.41% 0.1430 68.58)` | Bamboo Brown | black, 6.3 to 1 |
| 25 | `#c27700` | `oklch(63.53% 0.1407 66.67)` | Dirty Orange | black, 5.9 to 1 |
| 26 | `#bc6f00` | `oklch(61.42% 0.1383 64.55)` | Indocile Tiger | black, 5.4 to 1 |
| 27 | `#b56800` | `oklch(59.19% 0.1358 62.34)` | Brown Orange | black, 4.9 to 1 |
| 28 | `#ae6100` | `oklch(56.95% 0.1334 60.12)` | Orange Brown | white, 4.6 to 1 |
| 29 | `#a75a06` | `oklch(54.79% 0.1290 58.05)` | Raw Umber | white, 5.1 to 1 |
| 30 | `#9f5613` | `oklch(52.85% 0.1212 56.14)` | Bright Bronze | white, 5.5 to 1 |
| 31 | `#985219` | `oklch(51.21% 0.1147 54.54)` | Mammoth Wool | white, 5.9 to 1 |
| 32 | `#934f1c` | `oklch(50.00% 0.1102 53.35)` | Nightcap | white, 6.2 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #f8f3d5 0.0%, #f7f1d0 3.2%, #f6eec9 6.5%, #f4ebc1 9.7%, #f3e7b8 12.9%, #f1e3ae 16.1%, #f0dfa4 19.4%, #efda9a 22.6%, #edd691 25.8%, #ecd187 29.0%, #ebcc7c 32.3%, #eac771 35.5%, #e9c266 38.7%, #e8bc5a 41.9%, #e6b64e 45.2%, #e5b041 48.4%, #e3aa34 51.6%, #e1a326 54.8%, #df9d10 58.1%, #db9600 61.3%, #d79000 64.5%, #d28a00 67.7%, #cd8300 71.0%, #c87d00 74.2%, #c27700 77.4%, #bc6f00 80.6%, #b56800 83.9%, #ae6100 87.1%, #a75a06 90.3%, #9f5613 93.5%, #985219 96.8%, #934f1c 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(96.06% 0.0400 99.84) 0.0%, oklch(95.45% 0.0439 99.17) 3.2%, oklch(94.65% 0.0492 98.29) 6.5%, oklch(93.70% 0.0555 97.23) 9.7%, oklch(92.63% 0.0625 96.06) 12.9%, oklch(91.48% 0.0698 94.81) 16.1%, oklch(90.28% 0.0773 93.54) 19.4%, oklch(89.08% 0.0845 92.29) 22.6%, oklch(87.90% 0.0912 91.10) 25.8%, oklch(86.70% 0.0981 89.96) 29.0%, oklch(85.47% 0.1052 88.83) 32.3%, oklch(84.20% 0.1125 87.69) 35.5%, oklch(82.89% 0.1196 86.52) 38.7%, oklch(81.54% 0.1264 85.30) 41.9%, oklch(80.14% 0.1327 84.00) 45.2%, oklch(78.70% 0.1382 82.61) 48.4%, oklch(77.20% 0.1428 81.11) 51.6%, oklch(75.64% 0.1473 79.50) 54.8%, oklch(74.04% 0.1515 77.80) 58.1%, oklch(72.38% 0.1520 76.01) 61.3%, oklch(70.69% 0.1497 74.18) 64.5%, oklch(68.96% 0.1474 72.32) 67.7%, oklch(67.20% 0.1452 70.45) 71.0%, oklch(65.41% 0.1430 68.58) 74.2%, oklch(63.53% 0.1407 66.67) 77.4%, oklch(61.42% 0.1383 64.55) 80.6%, oklch(59.19% 0.1358 62.34) 83.9%, oklch(56.95% 0.1334 60.12) 87.1%, oklch(54.79% 0.1290 58.05) 90.3%, oklch(52.85% 0.1212 56.14) 93.5%, oklch(51.21% 0.1147 54.54) 96.8%, oklch(50.00% 0.1102 53.35) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.961 | 0.04 | 99.8 |
| 2 | 0.882 | 0.09 | 91.4 |
| 3 | 0.78 | 0.141 | 81.9 |
| 4 | 0.65 | 0.16 | 68.1 |
| 5 | 0.5 | 0.11 | 53.3 |

## In these collections

- [Warm swatches](https://grabient.com/warm-swatches)
- [Oktoberfest](https://grabient.com/oktoberfest)

## Other forms

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