Palette

Coffee Bean Richness

A deeply satisfying blend of dark, roasted browns, reflecting the robust aroma and flavor of coffee beans.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coffee Bean Richness 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 Coffee Bean Richness.

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

Data visualization

#362214#4D3425#644537#7B5649#92675B

Palette guide

How to use Coffee Bean Richness

Overview

The Coffee Bean Richness palette is a deeply satisfying blend of dark, roasted browns, reflecting the robust aroma and flavor of coffee beans. Featuring deep shades like #362214 and #4D3425, transitioning to the slightly lighter #7B5649 and #92675B, this palette exudes an elegant and inviting warmth. Designers can use these sophisticated browns to convey luxury, depth, and a gourmet sensibility. It's an excellent choice for brands that aim for a refined yet comforting presence. Developers will find these colors ideal for creating rich, immersive user experiences, especially in luxury or food-related digital platforms.

Best used for

Gourmet food and beverage branding
High-end restaurant and café interiors
Luxury product packaging
Sophisticated website themes
Elegant home decor accents
Editorial design for fine dining

Suggested color roles

primary

Use #362214 for dominant elements like headers, navigation, or main brand colors to establish a deep, luxurious foundation.

secondary

Apply #4D3425 or #644537 for subheadings, secondary buttons, or larger content blocks, adding subtle depth.

accent

Introduce #7B5649 or #92675B sparingly for delicate highlights, borders, or icons, providing gentle differentiation.

background

The darkest shades like #362214 create a rich, enveloping background. For contrast, a very light cream or off-white is recommended.

text

For optimal readability, use white or very light cream text on all shades within this palette, as they are all quite dark.

Accessibility notes

All colors in this palette are dark; ensure text used on them is white or a very light, contrasting color.
Avoid pairing adjacent shades for text and background as the contrast will be insufficient for readability.
For UI elements, use contrasting outlines or shadows to differentiate elements rather than relying solely on color shifts.
Consider using a stark white or light cream for all critical text and interactive elements to ensure visibility.

Recommended combinations

Deep Espresso

Creates a profound and elegant base, perfect for luxury branding or sophisticated dark mode designs.

#362214 · #4D3425 · #644537

Warm Layers

Ideal for subtle background variations or content areas, providing a soft, comforting gradient.

#4D3425 · #644537 · #7B5649

Rich Contrast

Use for highlights and accent elements, offering a gentle yet discernible contrast within the dark spectrum.

#362214 · #7B5649 · #92675B

CSS variables

:root {
  --coffee-bean-richness-1: #362214;
  --coffee-bean-richness-2: #4D3425;
  --coffee-bean-richness-3: #644537;
  --coffee-bean-richness-4: #7B5649;
  --coffee-bean-richness-5: #92675B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coffee-bean-richness": {
        1: "#362214",
        2: "#4D3425",
        3: "#644537",
        4: "#7B5649",
        5: "#92675B",
      }
    }
  }
}

Hex values

Color 1#362214

Color 2#4D3425

Color 3#644537

Color 4#7B5649

Color 5#92675B

Accessibility

Contrast checker

1.3:1Fail

1.8:1Fail

2.3:1Fail

3.1:1AA18

1.3:1Fail

1.8:1Fail

2.4:1Fail

1.8:1Fail

1.3:1Fail

1.8:1Fail

2.3:1Fail

1.8:1Fail

1.3:1Fail

3.1:1AA18

2.4:1Fail

1.8:1Fail

1.3:1Fail

Similar palettes

More like Coffee Bean Richness

Coffee Bean Richness

See it in context.

Ready when you are.

Built with Coffee Bean Richness.

How to use Coffee Bean Richness

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Espresso

Warm Layers

Rich Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coffee Bean Richness