Palette

Cacao Bean Reverie

A rich, sophisticated blend of deep browns and warm creams, inspired by luxurious cocoa beans.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cacao Bean Reverie 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 Reverie.

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

Data visualization

#4E342E#795548#A1887F#D7CCC8#6D4C41

Palette guide

How to use Cacao Bean Reverie

Overview

The Cacao Bean Reverie palette is a rich, sophisticated blend of deep browns and warm creams, inspired by luxurious cocoa beans. This elegant collection features the dark chocolate of #4E342E, the medium chocolate of #795548, the light brown of #A1887F, the pale grey-brown of #D7CCC8, and the darker brown of #6D4C41. It's an excellent choice for designers aiming to create refined, inviting, and deliciously inspired visuals. The palette evokes a sense of gourmet quality, cozy warmth, and understated luxury, perfect for projects that celebrate premium products, natural textures, and a sophisticated aesthetic.

Best used for

High-end chocolate branding and packaging
Gourmet coffee shops and roasteries
Sophisticated dark mode interfaces
Luxury product packaging
Elegant interior design and decor
Natural beauty products and skincare

Suggested color roles

primary

Use #795548 as a rich, sophisticated chocolate brown primary color, providing an inviting and stable foundation.

secondary

Apply #4E342E as a deep espresso secondary color, offering grounding support and luxury.

accent

Introduce #A1887F as a light brown, warm accent, ideal for subtle highlights or decorative details.

background

Utilize #D7CCC8 as a pale cream background, creating a soft and elegant canvas for other elements.

text

For body text, #4E342E (deep espresso) offers excellent readability against lighter colors in the palette, ensuring strong contrast.

Accessibility notes

#4E342E and #795548 offer strong contrast for text against the lighter colors, especially #D7CCC8, ensuring readability.
Be cautious when using #A1887F or #D7CCC8 for text, as they may have low contrast against each other for smaller fonts.
Ensure interactive elements are clearly defined; consider using the darkest brown for calls to action or active states.
For body text, stick to the darkest browns to ensure maximum readability for all users, meeting WCAG standards.

Recommended combinations

Espresso Dream

Ideal for sophisticated headers, dark mode interfaces, or creating a sense of rich depth.

#4E342E · #795548 · #D7CCC8

Cocoa Cream

Great for textural elements, elegant background patterns, or adding subtle visual richness.

#A1887F · #6D4C41 · #795548

Rich Earth

Perfect for creating a clean, luxurious layout with natural warmth or elegant editorial designs.

#D7CCC8 · #4E342E · #A1887F

CSS variables

:root {
  --cacao-bean-reverie-1: #4E342E;
  --cacao-bean-reverie-2: #795548;
  --cacao-bean-reverie-3: #A1887F;
  --cacao-bean-reverie-4: #D7CCC8;
  --cacao-bean-reverie-5: #6D4C41;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cacao-bean-reverie": {
        1: "#4E342E",
        2: "#795548",
        3: "#A1887F",
        4: "#D7CCC8",
        5: "#6D4C41",
      }
    }
  }
}

Hex values

Color 1#4E342E

Color 2#795548

Color 3#A1887F

Color 4#D7CCC8

Color 5#6D4C41

Accessibility

Contrast checker

1.7:1Fail

3.4:1AA18

7.2:1AAA

1.5:1Fail

1.7:1Fail

2:1Fail

4.2:1AA18

1.2:1Fail

3.4:1AA18

2:1Fail

2.1:1Fail

2.3:1Fail