Color collection
Vintage Brown Color Palettes
Brown vintage palettes for coffee brands, handmade shops, packaging, and cozy websites.
VintageBrownCoffee
Best for: coffee brands, bakeries, and handmade ecommerceExport: CSS, Tailwind, JSON, SVGPreview: dashboard, landing, mobile UI
Vintage Brown 7Vintage / Brown / CoffeeQuality 98Primary
#3169D8Accent#D651AESurface#EBEDF4Text#121621Support#CE829CVintage Brown 6Vintage / Brown / CoffeeQuality 97Primary#3198D8Accent#C051D6Surface#EBF0F4Text#121A21Support#CE82B1Vintage Brown 8Vintage / Brown / CoffeeQuality 96Primary#313AD8Accent#D65170Surface#ECEBF4Text#131221Support#CE8286Vintage Brown 10Vintage / Brown / CoffeeQuality 96Primary#8731D8Accent#D6AE51Surface#F1EBF4Text#1B1221Support#CEAA82Vintage Brown 1Vintage / Brown / CoffeeQuality 95Primary#37D831Accent#51D694Surface#EBF4ECText#122113Support#8285CEVintage Brown 2Vintage / Brown / CoffeeQuality 95Primary#31D85BAccent#51D6D2Surface#EBF4EFText#122117Support#9582CEHow to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for coffee brands, bakeries, and handmade ecommerce. Use dark brown text with tan surfaces and one muted green or blue support color.
Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.
UI previewPrimary
Card
Button
Accent
CSS Variables
:root {
--primary: #3169D8;
--accent: #D651AE;
--surface: #EBEDF4;
--text: #121621;
--support: #CE829C;
}Text / Surface contrast: 15.44:1
FAQ
Where should I use vintage brown color palettes?
These palettes are designed for coffee brands, bakeries, and handmade ecommerce.
Can I copy these colors into a design system?
Yes. Each palette includes clear interface roles such as Primary, Accent, Surface, Text, and Support.
How do I avoid low contrast?
Use dark brown text with tan surfaces and one muted green or blue support color.