Palette

Cinnamon Bark Brew

Deep, comforting browns and fiery oranges, reminiscent of spiced beverages and natural wood.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cinnamon Bark Brew 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 Cinnamon Bark Brew.

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

Data visualization

#4A2A1A#7B3F00#B96B00#E2B276#2E1B10

Palette guide

How to use Cinnamon Bark Brew

Overview

The Cinnamon Bark Brew palette is a rich and comforting collection, evoking the warmth of spiced beverages and natural wood. It features deep, earthy browns like #2E1B10 (Dark Coffee) and #4A2A1A (Dark Reddish Brown), transitioning to the warm and inviting #7B3F00 (Burnt Orange) and #B96B00 (Golden Brown). The lightest shade, #E2B276 (Light Tan), adds a creamy, frothy touch, reminiscent of a spiced latte. This palette is ideal for designers seeking to convey warmth, comfort, and a natural, artisanal feel. It's particularly effective for food and beverage branding, rustic aesthetics, or any design that benefits from an inviting, cozy, and organic visual experience.

Best used for

Coffee and spice brand packaging
Rustic cafe and restaurant branding
Autumn and fall themed designs
Cozy interior design concepts
Artisanal craft product marketing
Comfort food blog design

Suggested color roles

primary

Utilize #7B3F00 (Burnt Orange) for main content areas or substantial branding elements, establishing warmth.

secondary

Apply #4A2A1A (Dark Reddish Brown) for strong headings, navigation, or as a grounding dark element.

accent

Employ #B96B00 (Golden Brown) for call-to-action buttons, highlights, or decorative elements to add a warm glow.

background

Use #E2B276 (Light Tan) as a creamy, inviting background that provides excellent contrast for darker text.

text

A deep brown (#2E1B10) or black (#000000) is recommended for body text to ensure optimal readability against the light background.

Accessibility notes

Ensure sufficient contrast for text on #E2B276 background; use dark brown or black.
Pair white or very light cream text with #2E1B10, #4A2A1A, and #7B3F00 for readability.
Avoid using similar shades of brown for text and background to prevent readability issues.
Test contrast ratios for interactive elements, ensuring they are clearly distinguishable and accessible.

Recommended combinations

Spiced Comfort

Ideal for main branding, with #2E1B10 as a deep base, #E2B276 for text/background, and #7B3F00 for content.

#2E1B10 · #E2B276 · #7B3F00

Warm Gradient

Perfect for illustrations, infographics, or sections needing a gradient of warm, earthy browns.

#4A2A1A · #7B3F00 · #B96B00

Brewed Contrast

Combine for a light background with a warm secondary color and a deep, grounding accent.

#E2B276 · #B96B00 · #2E1B10

CSS variables

:root {
  --cinnamon-bark-brew-2-1: #4A2A1A;
  --cinnamon-bark-brew-2-2: #7B3F00;
  --cinnamon-bark-brew-2-3: #B96B00;
  --cinnamon-bark-brew-2-4: #E2B276;
  --cinnamon-bark-brew-2-5: #2E1B10;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cinnamon-bark-brew-2": {
        1: "#4A2A1A",
        2: "#7B3F00",
        3: "#B96B00",
        4: "#E2B276",
        5: "#2E1B10",
      }
    }
  }
}

Hex values

Color 1#4A2A1A

Color 2#7B3F00

Color 3#B96B00

Color 4#E2B276

Color 5#2E1B10

Accessibility

Contrast checker

1.6:1Fail

3.2:1AA18

6.6:1AA

1.3:1Fail

1.6:1Fail

2:1Fail

4.3:1AA18

2:1Fail

3.2:1AA18

2:1Fail

2.1:1Fail

4:1AA18

6.6:1AA

4.3:1AA18

2.1:1Fail

8.5:1AAA

1.3:1Fail

2:1Fail

4:1AA18

8.5:1AAA

Similar palettes

More like Cinnamon Bark Brew

Barista's Brew Comfort

Cinnamon Bark Brew

See it in context.

Ready when you are.

Built with Cinnamon Bark Brew.

How to use Cinnamon Bark Brew

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Spiced Comfort

Warm Gradient

Brewed Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cinnamon Bark Brew