Back to palettes

Palette

Coffee Bean Aroma

A deep, rich palette that captures the intense, robust essence of dark roasted coffee beans.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#362828#4D3A3A#6E5C5C#908080#1A1212

Palette guide

How to use Coffee Bean Aroma

Overview

The Coffee Bean Aroma palette (ID: coffee-bean-aroma-2) offers a deep, rich collection that captures the intense, robust essence of dark roasted coffee beans. With shades ranging from the near-black #1A1212 to the softer #908080, alongside a warming #362828 and #4D3A3A, this palette exudes sophistication and warmth. Designers can use these dark, earthy tones to convey luxury, stability, and comfort. It's particularly effective for creating an inviting yet elegant atmosphere, perfect for brands that value richness and depth. Developers will find these colors suitable for high-contrast dark mode interfaces or sophisticated branding.

Best used for

  • Luxury coffee brand packaging
  • High-end lounge or bar interiors
  • Masculine product branding
  • Sophisticated website dark modes
  • Winter fashion collections
  • Editorial design for gourmet publications

Suggested color roles

primary

Use #1A1212 or #362828 for dominant elements like navigation, footers, or main brand colors to establish a strong, dark presence.

secondary

Apply #4D3A3A or #6E5C5C for subheadings, secondary buttons, or background sections that require slightly more warmth and depth.

accent

Employ #908080 sparingly for subtle highlights, borders, or icons to add a touch of gentle contrast without breaking the mood.

background

The darkest shades like #1A1212 provide a luxurious dark background. For a lighter contrast, use #908080 with dark text.

text

For optimal readability, use white or very light cream text on the darker shades. #908080 can accommodate dark brown or black text.

Accessibility notes

  • Ensure high contrast when pairing text with the darkest shades by using white or very light cream colors.
  • The lighter #908080 may require dark text (e.g., #1A1212 or black) to meet contrast standards.
  • Avoid using adjacent shades for text and background as contrast will be too low.
  • Consider larger font sizes for text used on mid-tones like #6E5C5C to enhance readability.

Recommended combinations

Deep Roast

Creates a profound, luxurious dark base for brand identity or elegant backgrounds.

#1A1212 · #362828 · #4D3A3A

Warm Comfort

Ideal for content areas, offering a comforting gradient of warm, muted browns and greys.

#362828 · #6E5C5C · #908080

Subtle Contrast

Perfect for UI elements, borders, or secondary information where a delicate presence is desired.

#4D3A3A · #6E5C5C · #908080

CSS variables

:root {
  --coffee-bean-aroma-2-1: #362828;
  --coffee-bean-aroma-2-2: #4D3A3A;
  --coffee-bean-aroma-2-3: #6E5C5C;
  --coffee-bean-aroma-2-4: #908080;
  --coffee-bean-aroma-2-5: #1A1212;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coffee-bean-aroma-2": {
        1: "#362828",
        2: "#4D3A3A",
        3: "#6E5C5C",
        4: "#908080",
        5: "#1A1212",
      }
    }
  }
}

Related searches

dark coffee colorsrich brown grey palettesophisticated earth tonesdeep warm neutralsrobust color scheme

Palette colors

Hex values

Color 1#362828
·
Color 2#4D3A3A
·
Color 3#6E5C5C
·
Color 4#908080
·
Color 5#1A1212
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.2:1Fail
3.7:1AA18
1.3:1Fail
2
1.3:1Fail
1.7:1Fail
2.8:1Fail
1.7:1Fail
3
2.2:1Fail
1.7:1Fail
1.7:1Fail
2.9:1Fail
4
3.7:1AA18
2.8:1Fail
1.7:1Fail
4.9:1AA
5
1.3:1Fail
1.7:1Fail
2.9:1Fail
4.9:1AA

Similar palettes

More like Coffee Bean Aroma

View all dark