Coffee Color Palette

Updated April 17, 2026

A warm coffee shop color palette — espresso brown, cream, caramel, and roasted bean. Hex codes for cozy, café-inspired brand designs.

The Coffee Palette

• Foam #F5EDD6 rgb(245, 237, 214) hsl(45, 61%, 90%)
• Latte #E0C097 rgb(224, 192, 151) hsl(34, 54%, 74%)
• Caramel #C08552 rgb(192, 133, 82) hsl(28, 47%, 54%)
• Roast #8B5A2B rgb(139, 90, 43) hsl(29, 53%, 36%)
• Espresso #5A3A22 rgb(90, 58, 34) hsl(26, 45%, 24%)
• Dark Bean #2E1A0F rgb(46, 26, 15) hsl(21, 51%, 12%)

Hex Codes at a Glance

#F5EDD6, #E0C097, #C08552, #8B5A2B, #5A3A22, #2E1A0F

How to Use This Palette

• In CSS: Paste each hex into your :root custom properties or directly into background-color / color declarations.
• In Figma or Sketch: Copy the hex into any fill or stroke color field. Save each color to your local style library for reuse across frames.
• In Tailwind CSS: Add each hex to your tailwind.config.js file inside theme.extend.colors, then use classes like bg-palette-500.
• In Procreate or Photoshop: Create a new swatch set and paste each hex value. PhotoTones Pro exports ready-to-import .swatches and .ase files.

Build Your Own Palette

This coffee palette is one of many themed palettes in the PhotoTones gallery. To build a palette from your own photo, use the free PhotoTones color palette from image generator — it extracts up to 12 hex codes per image in under a second, entirely in your browser. No signup required.