# Champagne, terracotta and burgundy two color palette

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

- Also called: Off-white to brown angular gradient
- Seed: `kQ9BI8ta86A`
- Page: https://grabient.com/kQ9BI8ta86A?style=angularGradient&steps=32&angle=315
- Drawn as: angular gradient, 32 steps, 315 degrees
- Kinds: light to dark, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.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 | `#faf1e0` | `oklch(96.06% 0.0248 85.08)` | Cotton Whisper | black, 18.7 to 1 |
| 2 | `#f7eedb` | `oklch(95.11% 0.0267 84.20)` | Home Plate | black, 18.2 to 1 |
| 3 | `#f5ead6` | `oklch(94.00% 0.0288 83.18)` | Marquee White | black, 17.6 to 1 |
| 4 | `#f2e6d0` | `oklch(92.74% 0.0312 82.02)` | French Creme | black, 16.9 to 1 |
| 5 | `#eee1ca` | `oklch(91.35% 0.0340 80.74)` | Ivory Stone | black, 16.2 to 1 |
| 6 | `#ebdbc3` | `oklch(89.83% 0.0369 79.34)` | Wild Oats | black, 15.4 to 1 |
| 7 | `#e7d5bb` | `oklch(88.20% 0.0401 77.84)` | Warm Buttercream | black, 14.6 to 1 |
| 8 | `#e3cfb3` | `oklch(86.47% 0.0434 76.24)` | Lovely Bluff | black, 13.8 to 1 |
| 9 | `#dfc9ab` | `oklch(84.64% 0.0470 74.56)` | Czech Bakery | black, 13 to 1 |
| 10 | `#dbc2a3` | `oklch(82.73% 0.0507 72.80)` | Louvre | black, 12.2 to 1 |
| 11 | `#d7bb9a` | `oklch(80.76% 0.0545 70.98)` | Terracotta Sand | black, 11.4 to 1 |
| 12 | `#d3b492` | `oklch(78.72% 0.0585 69.10)` | Crème de Caramel | black, 10.6 to 1 |
| 13 | `#cfac89` | `oklch(76.63% 0.0625 67.18)` | Cliff Brown | black, 9.8 to 1 |
| 14 | `#caa480` | `oklch(74.50% 0.0667 65.23)` | Siesta Dreams | black, 9.1 to 1 |
| 15 | `#c69c77` | `oklch(72.35% 0.0708 63.24)` | Chimaera Brown | black, 8.4 to 1 |
| 16 | `#c2956f` | `oklch(70.18% 0.0751 61.25)` | Lanyard | black, 7.7 to 1 |
| 17 | `#bd8d66` | `oklch(68.01% 0.0793 59.24)` | Tatami Tan | black, 7.1 to 1 |
| 18 | `#b9855e` | `oklch(65.84% 0.0835 57.25)` | Cognac Brown | black, 6.5 to 1 |
| 19 | `#b57d56` | `oklch(63.69% 0.0877 55.26)` | Pastry Shell | black, 6 to 1 |
| 20 | `#b0754e` | `oklch(61.56% 0.0918 53.31)` | Baked Bean | black, 5.5 to 1 |
| 21 | `#ac6d47` | `oklch(59.47% 0.0958 51.38)` | Flickering Flame | black, 5 to 1 |
| 22 | `#a86640` | `oklch(57.43% 0.0998 49.51)` | Amazonian | black, 4.6 to 1 |
| 23 | `#a35e3a` | `oklch(55.45% 0.1036 47.68)` | Desert Soil | white, 4.9 to 1 |
| 24 | `#9f5734` | `oklch(53.55% 0.1074 45.93)` | Cinnamon Sparkle | white, 5.3 to 1 |
| 25 | `#9b502e` | `oklch(51.72% 0.1109 44.25)` | Hawaiian Coconut | white, 5.8 to 1 |
| 26 | `#984a28` | `oklch(49.99% 0.1143 42.65)` | Coco Muck | white, 6.3 to 1 |
| 27 | `#944424` | `oklch(48.35% 0.1174 41.15)` | Fluorescent Fire | white, 6.7 to 1 |
| 28 | `#903e1f` | `oklch(46.84% 0.1204 39.75)` | Fire | white, 7.2 to 1 |
| 29 | `#8d381b` | `oklch(45.44% 0.1231 38.47)` | Red Prairie | white, 7.7 to 1 |
| 30 | `#8a3318` | `oklch(44.19% 0.1255 37.31)` | Rogan Josh | white, 8.1 to 1 |
| 31 | `#882e15` | `oklch(43.08% 0.1277 36.29)` | Kobe | white, 8.5 to 1 |
| 32 | `#852a12` | `oklch(42.13% 0.1295 35.41)` | Red Shade Wash | white, 8.9 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #faf1e0 0.0%, #f7eedb 3.2%, #f5ead6 6.5%, #f2e6d0 9.7%, #eee1ca 12.9%, #ebdbc3 16.1%, #e7d5bb 19.4%, #e3cfb3 22.6%, #dfc9ab 25.8%, #dbc2a3 29.0%, #d7bb9a 32.3%, #d3b492 35.5%, #cfac89 38.7%, #caa480 41.9%, #c69c77 45.2%, #c2956f 48.4%, #bd8d66 51.6%, #b9855e 54.8%, #b57d56 58.1%, #b0754e 61.3%, #ac6d47 64.5%, #a86640 67.7%, #a35e3a 71.0%, #9f5734 74.2%, #9b502e 77.4%, #984a28 80.6%, #944424 83.9%, #903e1f 87.1%, #8d381b 90.3%, #8a3318 93.5%, #882e15 96.8%, #852a12 100.0%);
background: conic-gradient(from 315deg in oklch, oklch(96.06% 0.0248 85.08) 0.0%, oklch(95.11% 0.0267 84.20) 3.2%, oklch(94.00% 0.0288 83.18) 6.5%, oklch(92.74% 0.0312 82.02) 9.7%, oklch(91.35% 0.0340 80.74) 12.9%, oklch(89.83% 0.0369 79.34) 16.1%, oklch(88.20% 0.0401 77.84) 19.4%, oklch(86.47% 0.0434 76.24) 22.6%, oklch(84.64% 0.0470 74.56) 25.8%, oklch(82.73% 0.0507 72.80) 29.0%, oklch(80.76% 0.0545 70.98) 32.3%, oklch(78.72% 0.0585 69.10) 35.5%, oklch(76.63% 0.0625 67.18) 38.7%, oklch(74.50% 0.0667 65.23) 41.9%, oklch(72.35% 0.0708 63.24) 45.2%, oklch(70.18% 0.0751 61.25) 48.4%, oklch(68.01% 0.0793 59.24) 51.6%, oklch(65.84% 0.0835 57.25) 54.8%, oklch(63.69% 0.0877 55.26) 58.1%, oklch(61.56% 0.0918 53.31) 61.3%, oklch(59.47% 0.0958 51.38) 64.5%, oklch(57.43% 0.0998 49.51) 67.7%, oklch(55.45% 0.1036 47.68) 71.0%, oklch(53.55% 0.1074 45.93) 74.2%, oklch(51.72% 0.1109 44.25) 77.4%, oklch(49.99% 0.1143 42.65) 80.6%, oklch(48.35% 0.1174 41.15) 83.9%, oklch(46.84% 0.1204 39.75) 87.1%, oklch(45.44% 0.1231 38.47) 90.3%, oklch(44.19% 0.1255 37.31) 93.5%, oklch(43.08% 0.1277 36.29) 96.8%, oklch(42.13% 0.1295 35.41) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.961 | 0.025 | 85.1 |
| 2 | 0.421 | 0.13 | 35.4 |

## In these collections

- [Linear gradients](https://grabient.com/linear-gradients)
- [Two color gradients](https://grabient.com/two-color-gradients)

## Other forms

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