#B8AA6D
#96C6AC
#CBD89D
#DDF5D8
#BC9D9CDust
#D6C6BFPutty
#EAD9A0Wheat
#FFE9D2Champagne
Champagne Wheat & Champagne is a pastel light, analogous color palette tagged muted, beige, gray. Analogous neighbors on the wheel (Dust, Putty, Wheat) give it a natural, low-tension flow. High lightness and gentle saturation put it firmly in pastel territory. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Dust | #BC9D9C | rgb(188, 157, 156) | hsl(2, 19%, 67%) | oklch(72.4% 0.037 20) | |
| Putty | #D6C6BF | rgb(214, 198, 191) | hsl(18, 22%, 79%) | oklch(83.8% 0.021 45) | |
| Wheat | #EAD9A0 | rgb(234, 217, 160) | hsl(46, 64%, 77%) | oklch(88.6% 0.076 93) | |
| Champagne | #FFE9D2 | rgb(255, 233, 210) | hsl(31, 100%, 91%) | oklch(94.6% 0.039 69) |
Why it works and how to use it
It works because the lightness steps are gentle (67% to 91%), which keeps the mood consistent from edge to edge. Try it for social media templates and gentle interfaces.
- Background: Champagne (#FFE9D2) is the lightest color, so it belongs on large surfaces.
- Text: Dust (#BC9D9C) on #FFE9D2 gives 2.11:1, so pair it with a darker neutral for body copy.
- Primary: Wheat (#EAD9A0) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Putty (#D6C6BF) for highlights, badges and hover states.
No pair inside the palette reaches 4.5:1, so add black or white for body text.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Champagne Wheat & Champagne
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryCard title
Card title
Card title
Roles are assigned by lightness.
Color blindness simulation
#BC9D9C
#D6C6BF
#EAD9A0
#FFE9D2
Color-blind check: under protanopia and tritanopia, Putty and Wheat become hard to tell apart, so do not rely on that pair alone to carry meaning.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#BC9D9C on #FFE9D2 | Aa | 2.11:1 | Fail |
#BC9D9C on #EAD9A0 | Aa | 1.77:1 | Fail |
#BC9D9C on #D6C6BF | Aa | 1.5:1 | Fail |
#D6C6BF on #FFE9D2 | Aa | 1.41:1 | Fail |
#EAD9A0 on #FFE9D2 | Aa | 1.19:1 | Fail |
#D6C6BF on #EAD9A0 | Aa | 1.18:1 | Fail |
Similar palettes 24 more in this mood
#ADB09D
#DDAB7F
#ACCBA5
#E2D3AE
#B8B2A4
#A7D39D
#D7E09F
#FFE9D5
#7CB38A
#B1C3BF
#DFCD8A
#DFF3BB
#BE9D76
#86B09B
#CCC596
#D9E2D3
#C09B81
#B7C385
#CEB6B3
#EBD299
#D69F74
#C5D9A6
#E5DCCD
#F8F1AF
#D198A5
#E0B289
#CDBAC8
#FFEBE6
#CB9F99
#D5C4B9
#FFC6D9
#FFEABB
#BCA19B
#E3AEBA
#F1C9A6
#FEEDB0
#C5988F
#EEA4B6
#EAB287
#E4D2AA
#D4DDC2
#A7D9A4
#C5BF9C
#B59A71
#EFE7D9
#D7F3B4
#90C59B
#AEAD93
#A2A285
#CE8F73
#E7C4A3
#FFE9B9
#BCB284
#EABBAB
#C2DA9E
#FFD3A5
#D2C6AC
#FFC6DB
#FFCFAF
#FFE5E2
#C2A167
#D292A5
#D9B2AD
#FFEDE2
#DD9A84
#C2BB86
#ECD0B1
#FFDFE4
#FBE6CF
#D3E6A6
#CFC59E
#86AE8A
#A99F74
#D0C28A
#F4D891
#FFF3AC
#FFDBD2
#EEB4DB
#EAB688
#B6979C
#B5AD75
#CEAFB4
#FCC3B0
#FDE7CF
#E9E6DD
#FFDB55
#B5AE96
#3C3829
#C6938B
#D8C99A
#FAB3CA
#FFE9D7