Champagne is an elegant and subtle color that blends beige with warm hints of yellow or pink undertones. It sits on the lighter end of the beige spectrum and symbolizes sophistication and luxury. The color captures variations like pale gold and soft beige. Its delicate and refined appeal makes it ideal for designs that require a touch of understated elegance.

Champagne is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #F7E6CA
- RGB value: 96.9% red, 90.2% green and 79.2% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
When incorporating champagne into UI design, consider these ideas:
- Evoke elegance and subtlety. Champagne adds an understated elegance to UI elements, ideal for luxury or high-end brands wanting to convey sophistication.
- Use as a background or accent. Its neutral yet warm undertone makes champagne a versatile choice for backgrounds or as an accent color.
- Highlight sophistication. Use champagne to highlight important sections or features, adding a refined touch to the user interface.
- Pair with bold or dark colors. Champagne works well with bold or dark colors like navy, burgundy, or black, providing a soft contrast that enhances readability and visual interest.
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same soft, warm spectrum as champagne, consider:
- Vanilla (#F3E5AB) offers a slightly brighter, more yellow-toned hue reminiscent of the creamy delicacy of vanilla, sharing champagne's light and airy vibe.
- Almond (#EFDECD) is close in tone, with a hint more pink, providing a nutty warmth that complements the subtle sophistication of champagne.
- Pale gold (#E6BE8A) introduces a touch of metallic sheen, echoing champagne's understated elegance with a richer, more opulent warmth.
- Bisque (#FFE4C4) is lighter and softer, maintaining the neutral warmth with a more pronounced lean towards a creamy, comforting palette.
To complement champagne's delicate tones, consider pairing it with:
- Dusty rose (#DCA1A1) adds a gentle, romantic touch, its subdued pink hue harmonizing with champagne's neutral warmth for an elegant palette.
- Soft teal (#A0D6B4) offers a refreshing contrast, bringing a calm, serene element that balances the warmth of champagne with cool sophistication.
- Charcoal gray (#4A4A4A) provides a solid, grounding effect, offering a modern contrast that elevates champagne's lightness without overwhelming it.
- Rich burgundy (#800020) introduces depth and luxury, creating a dynamic, sophisticated contrast that highlights champagne's subtle elegance.
- Forest green (#228B22) adds a natural, earthy counterpoint, enhancing the neutral warmth of champagne with vibrant, life-affirming green.
Other colors worth considering include midnight blue for a deep, contemplative contrast, soft lilac for a playful, whimsical touch, and copper for a hint of rustic charm that complements champagne's understated luxury.
While champagne is versatile, it may clash with:
- Bright orange (#FFA500) can overwhelm champagne's subtle tones, creating a palette that might feel too aggressive or unbalanced.
- Neon green (#2CFF05), with its electric vibrancy, could disrupt the soft harmony of champagne, leading to a visually jarring combination.
- Electric blue (#00F0FF), while striking, may contrast too sharply against champagne's soft warmth, leading to a clash of intensities.
- Hot pink (#FF69B4), though lively, might overshadow the understated elegance of champagne with its boldness.
- Dark brown (#654321), although neutral, may dampen the light, airy quality of champagne, resulting in a heavier, less cohesive palette.
Champagne evokes elegance, sophistication, and understated luxury. Its subtle beige and pale pink blend conveys a sense of celebration and exclusivity. Its soft and neutral shade is often associated with timeless beauty. In color psychology, champagne evokes warmth, comfort, and calmness, making it a top choice in environments where relaxation and sophistication are essential.
In UI/UX design and branding, champagne is a color that conveys prestige and luxury without being overpowering. It's particularly effective in digital design for creating backgrounds that exude calm and elegance, enhancing UX with its soothing vibe. Using champagne in design is ideal for premium brands and services aiming to project exclusivity.
The color champagne was named after the famous sparkling wine from France's Champagne region. Its connection with the beverage, popular among Europe's royalty and aristocracy since the 17th century, has made champagne synonymous with wealth, victory, and festivity.
In the early 20th century, champagne as a color became a high-society wardrobe staple, offering a chic alternative to stark whites and bold colors. It also emerged in interior design, creating warm, inviting, and elegant spaces.
Through the latter half of the 20th century and into the digital age, champagne has continued to signify luxury and exclusivity, as seen in high-end products from cars to designer clothing.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Sepia Tone
Hamptons
Quiet Luxury
Contrast 1.23
- Large Text
#F7E6CA
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 17.13
- Large Text
#F7E6CA
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #F7E6CA, known as champagne, has RGB values of R:247, G:230, B:202 and CMYK values of C:0, M:0.07, Y:0.18, K:0.03.
| VALUE | CSS | |
|---|---|---|
| HEX | F7E6CA | #F7E6CA |
| RGB DECIMAL | 247, 230, 202 | rgb(247,230,202) |
| RGB PERCENTAGE | 96.9, 90.2, 79.2 | rgb(96.9%,90.2%,79.2%) |
| CMYK | 0, 7, 18, 3 | |
| HSL | 37.3°, 73.8, 88 | hsl(37.3,73.8%,88%) |
| HSV (OR HSB) | 37.3°, 18.2, 96.9 | |
| WEB SAFE | FFFFCC | #FFFFCC |
| CIE-LAB | 91.968, 1.361, 15.732 | |
| XYZ | 77.314, 80.633, 67.365 | |
| xyY | 0.343, 0.358, 80.633 | |
| CIE-LCH | 91.968, 15.791, 85.055 | |
| CIE-LUV | 91.968, 11.796, 22.797 | |
| HUNTER-LAB | 89.796, -3.456, 18.378 | |
| BINARY | 11110111, 11100110, 11001010 | |
| iOS - SwiftUI | Color(red: 247/255, green: 230/255, blue: 202/255) | |
| iOS - UIKit | UIColor(red: 247/255.0, green: 230/255.0, blue: 202/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFFF7E6CA) |


