earthywarmmonochrome
Coffee House Color Palette
Coffee House is a earthy, warm and monochrome color palette of 5 colors: Jet (#3e2723), Taupe (#5d4037), Mocha (#8d6e63), Light Gray (#d7ccc8) and Linen (#efebe9). Its dominant hue is red.
The darkest color, Jet, on the lightest, Linen, gives a 11.66:1 contrast ratio — enough for body text at WCAG AAA. 4 pairs in this palette pass AA for normal text. Taupe (#5d4037) is its most saturated color and a natural choice for buttons and links.
Colors
- Jet
- Taupe
- Mocha
- Light Gray
- Linen
CSS Output
:root {
--coffee-house-1: #3e2723;
--coffee-house-2: #5d4037;
--coffee-house-3: #8d6e63;
--coffee-house-4: #d7ccc8;
--coffee-house-5: #efebe9;
}Coffee House on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Jet on Linen#3e2723 on #efebe911.66:1AAA
- Jet on Light Gray#3e2723 on #d7ccc88.79:1AAA
- Taupe on Linen#5d4037 on #efebe97.86:1AAA
- Taupe on Light Gray#5d4037 on #d7ccc85.92:1AA
- Mocha on Linen#8d6e63 on #efebe93.90:1AA Large