#F7F0E8 Curated color palette
Brown Color Palette
An earthy brown palette with cream, tan, warm brown, walnut, and deep espresso tones.
Brown spans many red-, yellow-, and gray-biased families; this set intentionally follows a warm earthy direction.
Palette colors
#DDB892 #B08968 #7F5539 #4A2C1B Each swatch chooses black or white label text using the higher WCAG contrast ratio for that single solid color. Final component contrast still depends on your actual text size and context.
Suggested use
A grounded palette for food, interiors, heritage, craft, outdoor, and editorial work that benefits from warm neutrals instead of gray.
Surface Brown Color Palette Example action
CSS variables
:root {
--palette-1: #F7F0E8;
--palette-2: #DDB892;
--palette-3: #B08968;
--palette-4: #7F5539;
--palette-5: #4A2C1B;
}Contrast snapshot
Cream
#F7F0E8 Best of black/white: 18.58:1 Sand
#DDB892 Best of black/white: 11.35:1 Tan
#B08968 Best of black/white: 6.62:1 Walnut
#7F5539 Best of black/white: 6.44:1 Espresso
#4A2C1B Best of black/white: 12.60:1 This is a quick black/white text comparison, not a full accessibility audit. Use the Contrast Checker for the exact foreground/background pair you plan to ship.
More Brown palette directions
Coffee
Cream-to-espresso palette for food and editorial use.
#FAF3E8#D7B899#B7794B#795238#3F2A20 Clay
Redder earth tones with a soft neutral surface.
#F3E4D7#C98B70#A95D45#784536#4A2A23 Cool taupe
Less orange, more neutral brown-gray.
#F4F1EE#C7BBB0#9B8E83#6F625A#433A35 Related palettes
Blue Color Palette
A blue palette moving from a near-white cool surface through a saturated action blue to a deep navy.
Calm Violet UI Palette
A restrained violet interface palette with neutral surfaces, a soft supporting violet, and a strong primary action color.
Dark Color Palette
A dark neutral palette for interfaces with near-black navy, charcoal, slate, and muted blue-gray values.
Green Color Palette
A balanced green palette with pale surfaces, fresh mids, a forest accent, and a deep green neutral.