#524037
#8E6C5A
#ADF2DF
#FDF9F4
#3B2A22Espresso
#7A5A48Cocoa
#8FD3C0Turquoise
#F5F1ECLinen
Café Mint is a complementary color palette tagged coffee, modern, muted. Near-complementary hues (about 144° 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 |
|---|---|---|---|---|---|
| Espresso | #3B2A22 | rgb(59, 42, 34) | hsl(19, 27%, 18%) | oklch(30.3% 0.029 46) | |
| Cocoa | #7A5A48 | rgb(122, 90, 72) | hsl(22, 26%, 38%) | oklch(49.6% 0.051 51) | |
| Turquoise | #8FD3C0 | rgb(143, 211, 192) | hsl(163, 44%, 69%) | oklch(81.6% 0.074 175) | |
| Linen | #F5F1EC | rgb(245, 241, 236) | hsl(33, 31%, 94%) | oklch(96.0% 0.008 74) |
Why it works and how to use it
With 4 chromatic colors, Turquoise takes the lead while the rest support. Lightness runs from 18% to 94%. Well suited to websites, presentations and branding.
- Background: Linen (#F5F1EC) is the lightest color, so it belongs on large surfaces.
- Text: Espresso (#3B2A22) on #F5F1EC gives 12.13:1, passing WCAG AAA.
- Primary: Turquoise (#8FD3C0) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Cocoa (#7A5A48) for highlights, badges and hover states.
3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Linen at 12.13:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Café Mint
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
#3B2A22
#7A5A48
#8FD3C0
#F5F1EC
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#3B2A22 on #F5F1EC | Aa | 12.13:1 | AAA |
#3B2A22 on #8FD3C0 | Aa | 7.95:1 | AAA |
#7A5A48 on #F5F1EC | Aa | 5.52:1 | AA |
#7A5A48 on #8FD3C0 | Aa | 3.62:1 | AA large only |
#3B2A22 on #7A5A48 | Aa | 2.2:1 | Fail |
#8FD3C0 on #F5F1EC | Aa | 1.52:1 | Fail |
Similar palettes 24 more in this mood
#3E2723
#6D4C41
#A1887F
#EFEBE9
#42322D
#896B5E
#C39675
#FFF9F2
#42352D
#7D6452
#DFBF88
#FCF8F2
#322825
#786155
#A4836D
#FFF9F3
#584343
#A07470
#FFD3D1
#FFF8F7
#302521
#72584A
#C49A78
#FFF9F3
#3F2B2B
#8A5F5C
#F2B8B5
#FBF4F2
#4B3832
#854442
#BE9B7B
#FFF4E6
#5B3F2E
#8B6A4E
#D9C2A0
#F6EFE3
#1E1410
#5B4235
#A57C5B
#E8DCCF
#2E1F1A
#725548
#A67B5B
#F0E6DA
#F8F4F0
#E6DAD0
#8B5E3C
#2A1E17
#573E3A
#89665B
#B99F96
#FDF9F7
#624E47
#9E5A58
#D8B493
#FFF9F2
#715342
#9E7C5F
#F7E0BD
#FFF9F0
#1C1310
#5D473C
#8A6A55
#EADFD3
#261B17
#64524A
#9E6C59
#D4C3AD
#7F5539
#B08968
#DDB892
#EDE0D4
#543123
#594B2C
#8F9F7D
#A6CEC0
#C9B491
#B09E76
#816F54
#251900
#C4D7C5
#8F9784
#5C5A44
#21190C
#0F3D3E
#1E6F6F
#C8B89A
#F3EFE7
#564842
#9B857C
#DCA18B
#FFEBD2