#A47864
#C9A58B
#E8D9CB
#F7F3EE
#EAEFFFFrost
#9BADEDHeather
#926528Cocoa
#413D34Taupe
Cocoa & Heather Glow is a complementary color palette tagged muted, white, brown. Near-complementary hues (about 168° 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 |
|---|---|---|---|---|---|
| Frost | #EAEFFF | rgb(234, 239, 255) | hsl(226, 100%, 96%) | oklch(95.3% 0.022 272) | |
| Heather | #9BADED | rgb(155, 173, 237) | hsl(227, 69%, 77%) | oklch(75.8% 0.095 272) | |
| Cocoa | #926528 | rgb(146, 101, 40) | hsl(35, 57%, 36%) | oklch(54.2% 0.096 71) | |
| Taupe | #413D34 | rgb(65, 61, 52) | hsl(42, 11%, 23%) | oklch(36.1% 0.016 87) |
Why it works and how to use it
It works because the lightness range is wide (23% to 96%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.
- Background: Frost (#EAEFFF) is the lightest color, so it belongs on large surfaces.
- Text: Taupe (#413D34) on #EAEFFF gives 9.42:1, passing WCAG AAA.
- Primary: Heather (#9BADED) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Cocoa (#926528) for highlights, badges and hover states.
2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Frost on Taupe at 9.42:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Cocoa & Heather Glow
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
#EAEFFF
#9BADED
#926528
#413D34
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#EAEFFF on #413D34 | Aa | 9.42:1 | AAA |
#9BADED on #413D34 | Aa | 4.94:1 | AA |
#EAEFFF on #926528 | Aa | 4.45:1 | AA large only |
#9BADED on #926528 | Aa | 2.33:1 | Fail |
#926528 on #413D34 | Aa | 2.12:1 | Fail |
#EAEFFF on #9BADED | Aa | 1.91:1 | Fail |
Similar palettes 24 more in this mood
#3E2723
#6D4C41
#A1887F
#EFEBE9
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#4B3832
#854442
#BE9B7B
#FFF4E6
#9E6B73
#C99CA2
#E9D5D3
#F7F2EF
#924A43
#5C6049
#D5D2BF
#F5F3ED
#FFE9DF
#D29E75
#AAB891
#807B73
#452700
#686265
#FFB9A3
#FFEAEC
#586557
#96856F
#E3D0B5
#FFFAEF
#0F3D3E
#1E6F6F
#C8B89A
#F3EFE7
#663537
#955558
#E2DAD5
#F5F2F1
#9E9B8A
#C39F63
#ADE0C7
#FFEBE6
#3B4A3E
#728C69
#D3E0C3
#FCFAF3
#624E4E
#9A7977
#E8BFBA
#FFF8F7
#524037
#8E6C5A
#ADF2DF
#FDF9F4
#EDEFFF
#ADE0C7
#C39F63
#464334
#B89F6E
#DAC9A1
#6A6A5A
#F5F3EE
#F0F6FF
#A7C9FA
#6C5A3F
#262320
#FBF7F0
#EADFCD
#C9B79C
#7A6A55
#BBA77C
#CFC2A5
#898A78
#F0EEE6
#875543
#B7876F
#E9DECF
#F9F6F2
#42322D
#896B5E
#C39675
#FFF9F2
#FFF8F3
#EFDACF
#E5BAA6
#7A5A4E
#FFE5E1
#A98579
#664F47
#302D2C