Back to palettes

Palette

Cacao Bean Roast

Deep, roasted browns and warm caramels, evoking the rich aroma of fresh cacao beans.

DarkDark5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cacao Bean Roast reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Cacao Bean Roast.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#2C1A1C#4E2C2B#73453E#9B6554#C68E75

Palette guide

How to use Cacao Bean Roast

Overview

The Cacao Bean Roast palette features deep, roasted browns and warm caramels, evoking the rich aroma of fresh cacao beans. This dark collection includes the very dark brown of #2C1A1C, the deep brown of #4E2C2B, the medium brown-red of #73453E, the caramel brown of #9B6554, and the light caramel of #C68E75. It's an excellent choice for designers aiming to create rich, inviting, and deliciously inspired visuals. The palette evokes a sense of gourmet quality, cozy warmth, and rustic elegance, perfect for projects that celebrate coffee culture, premium products, and a sophisticated, grounded aesthetic.

Best used for

  • Coffee brand packaging and branding
  • Cozy cafe and coffee shop interiors
  • Sophisticated dark mode themes and apps
  • Gourmet food blogs and recipe sites
  • Rustic elegant branding and design
  • Warm editorial designs and publications

Suggested color roles

primary

Use #4E2C2B as a deep, roasted brown primary color, providing a rich and inviting foundation.

secondary

Apply #73453E as a warm brown-red secondary color, offering supportive earthy tones.

accent

Introduce #9B6554 as a caramel brown accent, ideal for warm highlights or decorative details.

background

Utilize #2C1A1C as the deepest brown background, creating a luxurious and grounding base.

text

For headings, #C68E75 (light caramel) offers excellent readability on dark backgrounds. For body text, white or a very light cream is essential for optimal readability.

Accessibility notes

  • This is a dark palette; use light text, such as #C68E75 or white, for readability on all dark backgrounds.
  • The contrast between the darkest shades can be low; reserve them for large blocks or subtle gradients rather than text.
  • Ensure interactive elements are clearly defined, perhaps with a slight border or brighter text on hover to improve usability.
  • Prioritize strong contrast for body text to ensure accessibility for all users, meeting WCAG standards.

Recommended combinations

Roasted Depths

Ideal for dark, sophisticated backgrounds with luminous text, or creating a sense of rich depth.

#2C1A1C · #4E2C2B · #C68E75

Caramel Infusion

Great for elegant branding, textural elements, or creating a layered, inviting effect.

#73453E · #9B6554 · #4E2C2B

Warm Brew

Perfect for highlighting key information, creating a cozy, rich atmosphere, or subtle decorative elements.

#C68E75 · #2C1A1C · #73453E

CSS variables

:root {
  --cacao-bean-roast-1: #2C1A1C;
  --cacao-bean-roast-2: #4E2C2B;
  --cacao-bean-roast-3: #73453E;
  --cacao-bean-roast-4: #9B6554;
  --cacao-bean-roast-5: #C68E75;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cacao-bean-roast": {
        1: "#2C1A1C",
        2: "#4E2C2B",
        3: "#73453E",
        4: "#9B6554",
        5: "#C68E75",
      }
    }
  }
}

Related searches

cacao bean roast palettedeep coffee brownwarm caramel huessophisticated dark browngourmet coffee branding

Palette colors

Hex values

Color 1#2C1A1C
·
Color 2#4E2C2B
·
Color 3#73453E
·
Color 4#9B6554
·
Color 5#C68E75
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
3.4:1AA18
5.9:1AA
2
1.4:1Fail
1.5:1Fail
2.5:1Fail
4.4:1AA18
3
2.1:1Fail
1.5:1Fail
1.7:1Fail
2.8:1Fail
4
3.4:1AA18
2.5:1Fail
1.7:1Fail
1.7:1Fail
5
5.9:1AA
4.4:1AA18
2.8:1Fail
1.7:1Fail

Similar palettes

More like Cacao Bean Roast

View all Dark
Velvet Clove Dream
Abyssal Bioluminescence
Abyssal Seaweed Garden
Cosmic Dust Cloud
Cyber City Echoes
Dark Academia Ink