#7F5539
#B08968
#DDB892
#EDE0D4
#6B4936Coffee
#6D6541Cocoa
#869884Stone
#ADD7D2Powder Blue
Coffee & Cocoa Haze is a complementary color palette tagged skin, muted, warm. Near-complementary hues (about 151° 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 |
|---|---|---|---|---|---|
| Coffee | #6B4936 | rgb(107, 73, 54) | hsl(22, 33%, 32%) | oklch(43.8% 0.055 50) | |
| Cocoa | #6D6541 | rgb(109, 101, 65) | hsl(49, 25%, 34%) | oklch(50.5% 0.053 97) | |
| Stone | #869884 | rgb(134, 152, 132) | hsl(114, 9%, 56%) | oklch(66.0% 0.036 142) | |
| Powder Blue | #ADD7D2 | rgb(173, 215, 210) | hsl(173, 34%, 76%) | oklch(84.8% 0.045 187) |
Why it works and how to use it
With 3 chromatic colors, Cocoa takes the lead while the rest support. Lightness runs from 32% to 76%. Well suited to wellness, organic and outdoor brands.
- Background: Powder Blue (#ADD7D2) is the lightest color, so it belongs on large surfaces.
- Text: Coffee (#6B4936) on #ADD7D2 gives 5.1:1, passing WCAG AA.
- Primary: Cocoa (#6D6541) is the most saturated mid-tone; use it for buttons and links (3.74:1 against the background, fine for UI elements).
- Accent: Stone (#869884) for highlights, badges and hover states.
1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Coffee on Powder Blue at 5.1:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Coffee & Cocoa Haze
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
#6B4936
#6D6541
#869884
#ADD7D2
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#6B4936 on #ADD7D2 | Aa | 5.1:1 | AA |
#6D6541 on #ADD7D2 | Aa | 3.74:1 | AA large only |
#6B4936 on #869884 | Aa | 2.6:1 | Fail |
#869884 on #ADD7D2 | Aa | 1.96:1 | Fail |
#6D6541 on #869884 | Aa | 1.91:1 | Fail |
#6B4936 on #6D6541 | Aa | 1.36:1 | Fail |
Similar palettes 24 more in this mood
#E8C2D7
#D0A6A9
#986C5A
#583E19
#57340F
#AB694D
#C28682
#FFADC1
#B9EDCE
#8CA863
#807239
#6C4419
#653D01
#9F5E41
#E3A19F
#FFDCE8
#582D0D
#90574A
#D79A9E
#F6C6D8
#D9A691
#A17A6A
#785D54
#3E2E25
#916043
#ECBBA4
#A88774
#443128
#B08968
#DDB892
#E6CCB2
#FFF6EA
#B98874
#8B6556
#664C43
#26170F
#FFD9A8
#CA8800
#9A6200
#4A2A00
#CBAD73
#B59453
#9C7A3E
#80612F
#683800
#934734
#C47281
#FFC8E8
#654F3D
#875E54
#D2A8AD
#F5D9E8
#B2DFD2
#859577
#776A4C
#41271C
#522800
#805B00
#BAB682
#D3EBB8
#FDE7D9
#F5D0B8
#E8B598
#C68F6D
#D9A57B
#C48B5E
#A9724A
#8A5A3A
#7E4F32
#CB9C85
#8B6B59
#2F1E15
#FFEFE1
#F9C196
#DBA076
#BE8865
#E1BC94
#CBA476
#AC8660
#7D5E43
#E4D9A7
#CFBE7D
#B49A54
#8D7335
#C9A57E
#B08A5C
#8F6B45
#6A4C32
#F1C9A5
#E0A97F
#C58B62
#9E6A48