Back to palettes

Palette

Cinnamon Bark Brew

Warm, inviting browns and beiges, reminiscent of aromatic cinnamon sticks steeped in a comforting brew.

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

#F0E6D0#D3B99C#B38C6C#8B5F3E#6A3F22

Palette guide

How to use Cinnamon Bark Brew

Overview

The Cinnamon Bark Brew palette offers a comforting array of warm, earthy tones, perfect for creating inviting and natural designs. With shades ranging from the light, creamy #F0E6D0 to the deep, rich #6A3F22, designers can evoke a sense of coziness and rustic elegance. This harmonious blend of browns and beiges, including the mid-tones like #D3B99C and #B38C6C, provides a versatile foundation for projects seeking a grounded and organic aesthetic. Developers will find these hex codes easy to implement across web and UI components, ensuring a consistent and warm user experience. The palette's natural progression allows for subtle gradients and sophisticated layering, making it ideal for branding, digital interfaces, and print materials that aim for a gentle, comforting appeal.

Best used for

  • cozy cafe branding and menus
  • rustic wedding invitations and decor
  • home goods e-commerce websites
  • autumn-themed digital illustrations
  • natural beauty product packaging
  • blog designs focused on comfort food or hygge

Suggested color roles

primary

The warm, medium brown #8B5F3E serves as an excellent anchor, offering stability and natural depth for main sections or prominent UI elements.

secondary

The lighter, inviting #D3B99C provides a gentle contrast, ideal for subheadings, secondary buttons, or background panels that need a touch of warmth.

accent

The deepest tone, #6A3F22, can be used sparingly for impactful accents, such as call-to-action buttons or important icons, adding a sophisticated, grounded touch.

background

The softest beige, #F0E6D0, creates a light, airy background, perfect for content areas, ensuring readability and a comforting visual base.

text

For dark text, a rich charcoal like #333333 or the darkest palette color #6A3F22 provides excellent contrast against lighter backgrounds. For light text, white on #6A3F22 or #8B5F3E.

Accessibility notes

  • Ensure sufficient contrast when using #F0E6D0 with #D3B99C for text, as they are close in value.
  • Pair #6A3F22 or #8B5F3E with light text (e.g., white or #F0E6D0) for optimal readability.
  • Avoid using #B38C6C for small text against #D3B99C or #8B5F3E backgrounds without checking contrast ratios.
  • Consider a dark charcoal or black for body text on #F0E6D0 to meet WCAG AA standards.

Recommended combinations

Warm Base

Create soft, layered backgrounds or a gentle primary color scheme for web pages.

#F0E6D0 · #D3B99C · #B38C6C

Rich Contrast

Use the dark browns for headings and accents, with the light beige for body text and backgrounds.

#8B5F3E · #6A3F22 · #F0E6D0

Earthy Depth

Ideal for textural elements, borders, or to add visual weight to a section with a natural, organic feel.

#D3B99C · #B38C6C · #6A3F22

CSS variables

:root {
  --cinnamon-bark-brew-1: #F0E6D0;
  --cinnamon-bark-brew-2: #D3B99C;
  --cinnamon-bark-brew-3: #B38C6C;
  --cinnamon-bark-brew-4: #8B5F3E;
  --cinnamon-bark-brew-5: #6A3F22;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cinnamon-bark-brew": {
        1: "#F0E6D0",
        2: "#D3B99C",
        3: "#B38C6C",
        4: "#8B5F3E",
        5: "#6A3F22",
      }
    }
  }
}

Related searches

warm brown color schemesearthy beige palettesnatural comfort colorsrustic design inspirationcinnamon coffee tones

Palette colors

Hex values

Color 1#F0E6D0
·
Color 2#D3B99C
·
Color 3#B38C6C
·
Color 4#8B5F3E
·
Color 5#6A3F22
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.5:1Fail
4.5:1AA18
7.2:1AAA
2
1.5:1Fail
1.6:1Fail
2.9:1Fail
4.8:1AA
3
2.5:1Fail
1.6:1Fail
1.8:1Fail
2.9:1Fail
4
4.5:1AA18
2.9:1Fail
1.8:1Fail
1.6:1Fail
5
7.2:1AAA
4.8:1AA
2.9:1Fail
1.6:1Fail

Similar palettes

More like Cinnamon Bark Brew

View all warm
Autumn Harvest Spices
Autumn Hearth Spice
Chai Latte
Cinnamon Bark Spice
Cinnamon Hearth
Cozy Cabin Hearth