#4D3424
#88604A
#BBE9CD
#F6FCF8
#3B2314Espresso
#6B4530Coffee
#A8D5BACeladon
#F1F7F3Smoke
Chocolate & Mint is a split color palette tagged food, dark, muted. A split scheme: Espresso plays against Celadon across roughly 123° of hue. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Espresso | #3B2314 | rgb(59, 35, 20) | hsl(23, 49%, 15%) | oklch(28.3% 0.045 52) | |
| Coffee | #6B4530 | rgb(107, 69, 48) | hsl(21, 38%, 30%) | oklch(42.9% 0.062 49) | |
| Celadon | #A8D5BA | rgb(168, 213, 186) | hsl(144, 35%, 75%) | oklch(83.4% 0.060 158) | |
| Smoke | #F1F7F3 | rgb(241, 247, 243) | hsl(140, 27%, 96%) | oklch(97.1% 0.008 157) |
Why it works and how to use it
The palette holds together thanks to its split hue relationship and a strong light-to-dark ladder (96% down to 15% lightness). A natural fit for menus and packaging.
- Background: Smoke (#F1F7F3) is the lightest color, so it belongs on large surfaces.
- Text: Espresso (#3B2314) on #F1F7F3 gives 13.46:1, passing WCAG AAA.
- Primary: Coffee (#6B4530) is the most saturated mid-tone; use it for buttons and links (7.68:1 against the background, fine for UI elements).
- Accent: Celadon (#A8D5BA) for highlights, badges and hover states.
4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Smoke at 13.46:1.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Chocolate & 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
#3B2314
#6B4530
#A8D5BA
#F1F7F3
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#3B2314 on #F1F7F3 | Aa | 13.46:1 | AAA |
#3B2314 on #A8D5BA | Aa | 8.97:1 | AAA |
#6B4530 on #F1F7F3 | Aa | 7.68:1 | AAA |
#6B4530 on #A8D5BA | Aa | 5.12:1 | AA |
#3B2314 on #6B4530 | Aa | 1.75:1 | Fail |
#A8D5BA on #F1F7F3 | Aa | 1.5:1 | Fail |
Similar palettes 24 more in this mood
#DD9F6E
#EDD693
#9DBE7C
#FDFDFD
#9B3E00
#D6B800
#1A1A1A
#FFF5E1
#FBF5EE
#F0D7C0
#E1AC85
#5D4535
#F9F2CF
#CAA779
#834642
#441F1D
#E16700
#D98900
#D5D65B
#67C48E
#FF8C00
#FFD23F
#8CC63F
#FFFFFF
#B3001B
#F2A900
#1A1A1A
#FFF5E1
#AD0054
#FF9E55
#1A1A1A
#FFF5E1
#DDA300
#D3E359
#35D07D
#FDFDFD
#FFBB81
#FFFBE4
#A4CC81
#77AB99
#B15959
#DFB2BB
#FAF2EC
#51423D
#C24F00
#F8A79C
#FFF1E6
#57412F
#E6FBBC
#C5AD39
#903F00
#491D00
#FFBA85
#FFEFC0
#A8E45F
#FAFAFA
#6B3A1F
#A65E2E
#D4A574
#FAF0E4
#FFF4E8
#FFD3A8
#FF9E4F
#6B3E1E
#3E2723
#6D4C41
#A1887F
#EFEBE9
#F94144
#F3722C
#F9C74F
#90BE6D
#F4A259
#F4E285
#8CB369
#5B8E7D
#FFF3B0
#E09F3E
#9E2A2B
#540B0E
#F24452
#FFD1DA
#FFF9F4
#75574E
#2A6C00
#646E00
#009E66
#D2B01B
#9C6500
#E26C53
#B89500
#FF9E5E