Palette

Velvet Cacao Bean

A decadent and comforting palette inspired by the deep, earthy tones of cocoa beans and fine chocolate.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F1F1D#5C3317#A67B5B#DAA520#F5F5DC

Palette guide

How to use Velvet Cacao Bean

Overview

The Velvet Cacao Bean palette is a decadent and comforting collection inspired by the deep, earthy tones of cocoa beans and fine chocolate. It features rich browns like #2F1F1D and #5C3317, a warmer mid-tone #A67B5B, and a luxurious pop of golden yellow, #DAA520. The palette is completed by the creamy #F5F5DC. This scheme is ideal for designers seeking to evoke warmth, richness, and an artisanal quality. It provides excellent depth and a sophisticated contrast, perfect for high-end food branding, cozy digital experiences, or elegant lifestyle content.

Best used for

Gourmet food and beverage branding (coffee, chocolate)
Rustic luxury interior design concepts
Autumnal fashion and lifestyle branding
Artisanal product packaging
Sophisticated restaurant and cafe websites
Cozy and inviting digital interfaces

Suggested color roles

primary

Utilize #2F1F1D as the dominant background or primary brand color to establish a rich, grounding presence.

secondary

Employ #5C3317 and #A67B5B for secondary content blocks, panels, or detailed graphic elements, adding warmth.

accent

The vibrant #DAA520 is perfect for calls to action, highlights, or metallic accents, providing a luxurious focal point.

background

The light #F5F5DC provides a clean, creamy backdrop, while #2F1F1D offers a deep, luxurious base.

text

For maximum readability on light backgrounds, use #2F1F1D. On dark backgrounds, #F5F5DC or #DAA520 can be used for headings.

Accessibility notes

Ensure #F5F5DC text on #2F1F1D or #5C3317 backgrounds meets WCAG contrast requirements (at least 4.5:1).
Be cautious when pairing #DAA520 with #F5F5DC for text, as the contrast might be insufficient.
For interactive elements, ensure distinct hover/focus states, especially with the golden accent.
Use #2F1F1D for all body text on lighter backgrounds to guarantee legibility.

Recommended combinations

Rich Dessert

Ideal for main content sections, offering a deep, elegant background with warm mid-tones and clear, creamy text.

#2F1F1D · #A67B5B · #F5F5DC

Golden Accent

Excellent for highlighting key messages, calls to action, or creating luxurious graphic elements that pop.

#5C3317 · #DAA520 · #F5F5DC

Earthy Layers

Perfect for subtle gradients, layered UI components, or creating depth in illustrations and textures.

#2F1F1D · #5C3317 · #A67B5B

CSS variables

:root {
  --velvet-cacao-bean-1: #2F1F1D;
  --velvet-cacao-bean-2: #5C3317;
  --velvet-cacao-bean-3: #A67B5B;
  --velvet-cacao-bean-4: #DAA520;
  --velvet-cacao-bean-5: #F5F5DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "velvet-cacao-bean": {
        1: "#2F1F1D",
        2: "#5C3317",
        3: "#A67B5B",
        4: "#DAA520",
        5: "#F5F5DC",
      }
    }
  }
}

Hex values

Color 1#2F1F1D

Color 2#5C3317

Color 3#A67B5B

Color 4#DAA520

Color 5#F5F5DC

Accessibility

Contrast checker

1.5:1Fail

4.2:1AA18

7:1AAA

14.2:1AAA

1.5:1Fail

2.9:1Fail

4.8:1AA

9.8:1AAA

4.2:1AA18

2.9:1Fail

1.7:1Fail

3.4:1AA18

7:1AAA

4.8:1AA

1.7:1Fail

2:1Fail

14.2:1AAA

9.8:1AAA

3.4:1AA18

2:1Fail

Similar palettes

More like Velvet Cacao Bean