Artisanal Espresso, Creamy Oat Milk & Roasted Hazelnut Category: Mood 8,100/mo searches

Coffee Brown Palette — HEX Codes, Swatches & UI Palette

Rich roasted coffee beans, warm ceramic mugs, and velvety latte art. A decadent, tactile palette evoking craft bakeries, cozy coffee shops, and artisanal leather goods.

Authoritative Dark

Dark Roast Espresso

#3E2723

Warm Woody Midtone

Roasted Hazelnut

#6D4C41

Rich Warm Accent

Caramel Macchiato

#A1887F

Soft Foam Neutral

Creamy Oat Milk

#D7CCC8

Warm Inviting Surface

Vanilla Crème

#FFF8E1

Open in Web Studio Color Wheel Tint & Shade Scale

Color Swatches & Technical Specifications

Exact color codes, luminance values, and WCAG contrast ratings for each swatch in the Coffee Brown Palette.

Dark Roast Espresso

Authoritative Dark

HEX #3E2723

RGB rgb(62, 39, 35)

HSL hsl(9deg, 28%, 19%)

vs White: 13.82:1 (AAA) vs Black: 1.52:1 (Fail)

Roasted Hazelnut

Warm Woody Midtone

HEX #6D4C41

RGB rgb(109, 76, 65)

HSL hsl(15deg, 25%, 34%)

vs White: 7.61:1 (AAA) vs Black: 2.76:1 (Fail)

Caramel Macchiato

Rich Warm Accent

HEX #A1887F

RGB rgb(161, 136, 127)

HSL hsl(16deg, 15%, 56%)

vs White: 3.31:1 (AA Large) vs Black: 6.34:1 (AA)

Creamy Oat Milk

Soft Foam Neutral

HEX #D7CCC8

RGB rgb(215, 204, 200)

HSL hsl(16deg, 16%, 81%)

vs White: 1.57:1 (Fail) vs Black: 13.36:1 (AAA)

Vanilla Crème

Warm Inviting Surface

HEX #FFF8E1

RGB rgb(255, 248, 225)

HSL hsl(46deg, 100%, 94%)

vs White: 1.06:1 (Fail) vs Black: 19.77:1 (AAA)

UI Design & Color Hierarchy Guide

Brown is experiencing a massive modern revival in lifestyle branding. Rich espresso brown (#3E2723) looks significantly more premium than standard black when paired with creamy beige (#FFF8E1).

60% Dominant Base

Use the primary neutral/light swatch (Vanilla Crème) for canvas backgrounds and card surfaces.

30% Structural Secondary

Apply midtones for navigation bars, card headers, borders, and secondary buttons.

10% Accent Callout

Reserve high-saturation focal colors for CTAs, conversion badges, and active state highlights.

WCAG 2.1 Accessibility & Contrast Matrix

Legibility ratings between palette elements and key backgrounds (Lightest: Vanilla Crème | Darkest: Dark Roast Espresso):

Swatch	Contrast vs Light Canvas	Contrast vs Dark Canvas
Dark Roast Espresso (#3E2723)	13.0:1 AAA	1.0:1 Fail
Roasted Hazelnut (#6D4C41)	7.16:1 AAA	1.82:1 Fail
Caramel Macchiato (#A1887F)	3.12:1 AA Large	4.17:1 AA Large
Creamy Oat Milk (#D7CCC8)	1.48:1 Fail	8.79:1 AAA
Vanilla Crème (#FFF8E1)	1.0:1 Fail	13.0:1 AAA

CSS Custom Properties & Design Tokens

Copy and paste production-ready tokens directly into your CSS stylesheet or Tailwind CSS configuration:

CSS Variables

:root {
  --color-1: #3E2723; /* Dark Roast Espresso - Authoritative Dark */
  --color-2: #6D4C41; /* Roasted Hazelnut - Warm Woody Midtone */
  --color-3: #A1887F; /* Caramel Macchiato - Rich Warm Accent */
  --color-4: #D7CCC8; /* Creamy Oat Milk - Soft Foam Neutral */
  --color-5: #FFF8E1; /* Vanilla Crème - Warm Inviting Surface */
}

Tailwind CSS Config

{
  colors: {
    'palette-1': '#3E2723',
    'palette-2': '#6D4C41',
    'palette-3': '#A1887F',
    'palette-4': '#D7CCC8',
    'palette-5': '#FFF8E1'
  }
}

Explore More Curated Color Palettes

Browse seasonal palettes, retro aesthetic color schemes, nature tones, and dark mode themes.

All Color Palettes Named Color Dictionary Interactive Color Wheel