#3E2723
#6D4C41
#A1887F
#EFEBE9
#F0F6FFSmoke
#A7C9FABaby Blue
#6C5A3FCoffee
#262320Raisin
Champagne Baby Blue & Coffee is a complementary color palette tagged dark, muted, minimal. Near-complementary hues (about 179° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Smoke | #F0F6FF | rgb(240, 246, 255) | hsl(216, 100%, 97%) | oklch(97.1% 0.014 258) | |
| Baby Blue | #A7C9FA | rgb(167, 201, 250) | hsl(215, 89%, 82%) | oklch(82.8% 0.078 257) | |
| Coffee | #6C5A3F | rgb(108, 90, 63) | hsl(36, 26%, 34%) | oklch(47.8% 0.047 77) | |
| Raisin | #262320 | rgb(38, 35, 32) | hsl(30, 9%, 14%) | oklch(25.8% 0.007 68) |
Why it works and how to use it
The palette holds together thanks to its complementary hue relationship and a strong light-to-dark ladder (97% down to 14% lightness). A natural fit for websites, presentations and branding.
- Background: Smoke (#F0F6FF) is the lightest color, so it belongs on large surfaces.
- Text: Raisin (#262320) on #F0F6FF gives 14.39:1, passing WCAG AAA.
- Primary: Baby Blue (#A7C9FA) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Coffee (#6C5A3F) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Smoke on Raisin at 14.39:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Champagne Baby Blue & Coffee
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
#F0F6FF
#A7C9FA
#6C5A3F
#262320
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#F0F6FF on #262320 | Aa | 14.39:1 | AAA |
#A7C9FA on #262320 | Aa | 9.21:1 | AAA |
#F0F6FF on #6C5A3F | Aa | 6.09:1 | AA |
#A7C9FA on #6C5A3F | Aa | 3.9:1 | AA large only |
#6C5A3F on #262320 | Aa | 2.36:1 | Fail |
#F0F6FF on #A7C9FA | Aa | 1.56:1 | Fail |
Similar palettes 24 more in this mood
#2C2B23
#676347
#7C7BFF
#F2F1EC
#FFE5E1
#A98579
#664F47
#302D2C
#1E1B18
#6B5D4F
#C9B79C
#F4EFE6
#2B2B2B
#6B4E3D
#0077B0
#F4EFEA
#F5EEE6
#E1D3C2
#6B3A5B
#3A1F33
#302521
#72584A
#C49A78
#FFF9F3
#0F1419
#3E4C59
#D9B99B
#F3EFE9
#141210
#4D4742
#C97B3A
#F2EAE2
#EDEEF0
#C9CCD1
#1D4ED8
#0B1220
#050505
#373737
#AA5C00
#FDFDFD
#2B2B2B
#6B4E3D
#677900
#F4EFEA
#2B2B2B
#6B4E3D
#C0392B
#F4EFEA
#050505
#373737
#007F9E
#FDFDFD
#1E1410
#5B4235
#A57C5B
#E8DCCF
#151515
#4E4E4E
#577AFF
#FAFAFA
#121214
#5D6064
#B3CCFF
#E6EEFF
#2E1F1A
#725548
#A67B5B
#F0E6DA
#2B1919
#704744
#DAA29F
#E1DAD8
#F3EFEA
#C7B7A7
#6D5D45
#1F1B15
#1E3033
#456578
#98BD9B
#F4FFE6
#F5FBF9
#D4E3DE
#374B00
#0A1100
#FFAEA7
#1E1913
#6E5A48
#EEEEEE
#2A1A12
#704E3C
#9C6B48
#E7D4C1