Palette

Roasted Coffee Hues

Deep, roasted browns and mellow creams capturing the comforting aroma and robust flavors of coffee beans.

darkelegant5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Roasted Coffee Hues 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 Roasted Coffee Hues.

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

Data visualization

#4A322C#6A4B42#8B665D#AA867C#CBB7B1

Palette guide

How to use Roasted Coffee Hues

Overview

The Roasted Coffee Hues palette offers a collection of deep, roasted browns and mellow creams, perfectly capturing the comforting aroma and robust flavors of coffee beans. With shades ranging from the rich #4A322C to the soft #CBB7B1, this palette provides a warm and inviting aesthetic for designers and developers. The mid-tones like #8B665D offer versatile options for accents and complementary elements, ensuring a harmonious visual experience. This selection is ideal for projects aiming to convey warmth, authenticity, and a gourmet touch, from digital interfaces to food and beverage branding, providing a sophisticated yet approachable feel.

Best used for

Gourmet coffee branding and packaging
Warm and inviting web interfaces
Cozy home decor themes and textiles
Food and beverage marketing materials
Autumn fashion and lifestyle branding
Restaurant menus and digital displays

Suggested color roles

primary

#4A322C - A deep, rich roasted brown, perfect for establishing a sophisticated and warm brand identity or main backgrounds.

secondary

#6A4B42 - A robust, medium brown, ideal for complementary sections, subheadings, or secondary navigation elements.

accent

#8B665D - A warm, inviting mid-tone, excellent for call-to-action buttons, highlights, or decorative elements.

background

#CBB7B1 - A soft, creamy light brown, offering a gentle and comforting backdrop that enhances other palette colors.

text

#4A322C - The darkest shade provides optimal readability for body text and headings on lighter backgrounds like #CBB7B1.

Accessibility notes

Ensure #4A322C text has sufficient contrast on #CBB7B1 for optimal readability, meeting WCAG AA standards.
Avoid using #AA867C for small text on #CBB7B1 due to potential readability issues and low contrast.
Critical text should primarily use #4A322C to ensure legibility across various design contexts.
For text on dark backgrounds like #4A322C, use a near-white or very light cream for strong contrast.

Recommended combinations

Robust Roast

Creates a strong, comforting coffee aesthetic, perfect for headlines, key visuals, and robust branding.

#4A322C · #8B665D · #CBB7B1

Creamy Blend

For a softer, more mellow feel, suitable for inviting backgrounds, layered content, and subtle textures.

#6A4B42 · #AA867C · #CBB7B1

Deep Comfort

Layers the darker browns for a rich, sophisticated depth in branding, graphic design, and UI elements.

#4A322C · #6A4B42 · #8B665D

CSS variables

:root {
  --roasted-coffee-hues-1: #4A322C;
  --roasted-coffee-hues-2: #6A4B42;
  --roasted-coffee-hues-3: #8B665D;
  --roasted-coffee-hues-4: #AA867C;
  --roasted-coffee-hues-5: #CBB7B1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "roasted-coffee-hues": {
        1: "#4A322C",
        2: "#6A4B42",
        3: "#8B665D",
        4: "#AA867C",
        5: "#CBB7B1",
      }
    }
  }
}

Hex values

Color 1#4A322C

Color 2#6A4B42

Color 3#8B665D

Color 4#AA867C

Color 5#CBB7B1

Accessibility

Contrast checker

1.5:1Fail

2.3:1Fail

3.6:1AA18

6.1:1AA

1.5:1Fail

2.4:1Fail

4.1:1AA18

2.3:1Fail

1.5:1Fail

2.6:1Fail

3.6:1AA18

2.4:1Fail

1.5:1Fail

1.7:1Fail

6.1:1AA

4.1:1AA18

2.6:1Fail

1.7:1Fail

Similar palettes

More like Roasted Coffee Hues

Roasted Coffee Hues

See it in context.

Ready when you are.

Built with Roasted Coffee Hues.

How to use Roasted Coffee Hues

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Robust Roast

Creamy Blend

Deep Comfort

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Roasted Coffee Hues