#F7E7CEChampagne hex code: #F7E7CE · RGB 247, 231, 206. Also called champagne beige, champagne gold.
Champagne is a pale, warm beige with a golden glow, named after the sparkling wine. The common reference value is #F7E7CE. It's warmer than cream and lighter than beige, with a hint of peach.
Champagne is a natural fit for weddings, events, hospitality, jewelry and luxury beauty. As a web background or card color it adds warmth and a quiet sense of occasion.
Use dark text on champagne. For a more festive, metallic feeling, pair it with champagne gold (#E6CFA7) and a deep accent like navy, burgundy or emerald. Avoid pairing it with pure yellow, which makes it look dingy.
Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.
#F7E7CErgb(247, 231, 206) · reference#E6CFA7rgb(230, 207, 167) · HueWiz pick#F1DDCFrgb(241, 221, 207) · HueWiz pick#D8BE94rgb(216, 190, 148) · HueWiz pickThe same base color in a light and a dark theme. Surfaces and text are tinted with champagne's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.
Spring collection
Designed around champagne.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#F9F6F2 · text #231F18 · link #7C6E58Spring collection
Designed around champagne.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#17130E · text #F0EEEB · link #F7E7CEHand-picked combinations that work with champagne. Hover a swatch to see its code; click to copy.
WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.
| Pairing | Ratio | Normal text | Large text |
|---|---|---|---|
| White text on champagne | 1.21:1 | Fail | Fail |
| Black text on champagne | 17.27:1 | AAA | AAA |
| Champagne text on white | 1.21:1 | Fail | Fail |
| Champagne text on near-black #111111 | 15.53:1 | AAA | AAA |
| White text on deeper champagne #82745D | 4.55:1 | AA | AAA |
An 11-step 50–950 ramp generated in OKLCH from #F7E7CE. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.
@import "tailwindcss";
@theme {
--color-champagne-50: #FFF5E7;
--color-champagne-100: #FAEBD2;
--color-champagne-200: #E8D9C1;
--color-champagne-300: #CEC1AC;
--color-champagne-400: #B0A593;
--color-champagne-500: #92897B;
--color-champagne-600: #766F64;
--color-champagne-700: #5E5950;
--color-champagne-800: #47433D;
--color-champagne-900: #312F2B;
--color-champagne-950: #1D1B18;
--color-champagne: #F7E7CE;
}:root {
--champagne: #F7E7CE;
--champagne-rgb: 247 231 206;
--champagne-light: #FAEBD2;
--champagne-dark: #47433D;
}
.btn-champagne {
background: #82745D;
color: #000000;
}Need semantic roles (surface, text, primary, accent) and exports? Open champagne in the Tailwind color generator.
#F7E7CE is the value HueWiz uses for champagne; it equals rgb(247, 231, 206). Other common versions include #E6CFA7 (champagne gold), #F1DDCF (pink champagne), #D8BE94 (deep champagne).
With an HSL hue of 37° and 72% saturation, champagne reads as a warm orange.
Use dark text. White on #F7E7CE measures 1.21:1 and black measures 17.27:1; WCAG AA needs 4.5:1 for normal text. For white text, deepen it to about #82745D.
Try champagne celebration (#F7E7CE, #E6CFA7, #FFFFFF); champagne & emerald (#F7E7CE, #046307, #D8BE94); soft luxury (#F1DDCF, #F7E7CE, #C9A9A6). Each palette above can be copied or opened in the HueWiz studio.
Champagne isn't a CSS keyword. These built-in CSS colors are the nearest by perceptual (OKLab) distance; lower ΔE means closer.