Tan & Brown Color Palette

01 #D2B48C
02 #BC6F5B
03 #A52A2A
04 #F2E9DD
05 #421111

Why do Tan and Brown go well together?

Pairing Tan (#D2B48C) with Brown (#A52A2A) yields a sophisticated design palette. With a calculated contrast ratio of 3.59:1, this visual pairing works comfortably for large text elements and button outlines but should be avoided for small body paragraph overlays. Designers can leverage this coordination to build visually balanced screen graphics.

How to use the Tan & Brown color combination

From a marketing standpoint, combining Tan and Brown communicates professional structure combined with creative accents. It is popular in corporate branding, clean lifestyle blogs, and editorial design. We recommend using #D2B48C as the dominant canvas background and #A52A2A for buttons, active link indicators, or highlights.

👁 Live UI Mockup Preview

See how this palette coordinates on actual web components.

Tan Canvas

Tan & Brown UI Layout

This component template demonstrates Tan styling applied to headers and Brown styled interactive blocks.

Brown Focus Rate 85%

🛠 Stylesheet Integration Codes

CSS Variables 
:root {
  --color-primary:   #D2B48C;
  --color-secondary: #A52A2A;
  --color-midtone:   #BC6F5B;
  --color-highlight: #F2E9DD;
  --color-shadow:    #421111;
}

◉ Parent Color Reference Sheets

Tan Details All web and printing specifications
Brown Details All web and printing specifications
Copied!