Palette

Cinnamon Stick Brew

A comforting blend of browns, reminiscent of a warm, spiced brew on a cool autumn evening.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4E2A1E#7C482C#AA6B3E#D89C6F#F2C7A8

Palette guide

How to use Cinnamon Stick Brew

Overview

The Cinnamon Stick Brew palette offers a comforting blend of browns, reminiscent of a warm, spiced brew on a cool autumn evening. This inviting collection transitions from the deep, rich #4E2A1E to the soft, airy #F2C7A8, providing a harmonious range of dark to light browns. Shades like #7C482C, #AA6B3E, and #D89C6F create a natural progression, perfect for designs that aim for a cozy, rustic, and inviting atmosphere. Designers can leverage these hex codes to evoke warmth, natural charm, and a sense of comforting tradition. Developers will find this palette excellent for crafting serene UI, sophisticated branding, or tranquil digital experiences, making it ideal for coffee shops, home goods, or autumnal themes.

Best used for

cafe and coffee shop branding
rustic home decor websites
autumn seasonal marketing materials
artisanal food packaging
cozy blog and website themes
natural beauty product packaging

Suggested color roles

primary

The rich #AA6B3E serves as a warm, inviting primary color, ideal for main content areas, headings, or prominent branding elements.

secondary

The medium brown #7C482C provides a comforting secondary option, perfect for subheadings, interactive elements, or backgrounds that need a gentle touch.

accent

The deepest tone, #4E2A1E, can be used sparingly for impactful accents, adding sophistication and depth to calls-to-action or important details.

background

The soft #F2C7A8 creates a light, airy background, promoting readability and a comforting user experience. For a slightly richer background, consider #D89C6F.

text

For lighter backgrounds like #F2C7A8, use #4E2A1E or a deep charcoal for body text. For darker backgrounds, white or a very light cream provides excellent contrast.

Accessibility notes

Ensure sufficient contrast when pairing #D89C6F with #F2C7A8 for text, as they are very close in luminosity.
The darkest color, #4E2A1E, offers strong contrast for light text (e.g., white or #F2C7A8).
Avoid using #AA6B3E for small text against #7C482C backgrounds without careful WCAG contrast checking.
For optimal readability, use a dark brown or black for body text on the lighter palette shades.

Recommended combinations

Brew Layers

Create deep, grounding sections or a sophisticated base for a natural brand identity.

#4E2A1E · #7C482C · #AA6B3E

Warm Comfort

Use the lighter shades for text or backgrounds, balanced by a medium brown for accents.

#D89C6F · #F2C7A8 · #AA6B3E

Spiced Gradient

Ideal for creating smooth transitions, evocative backgrounds, or layered graphic elements with a refined feel.

#7C482C · #AA6B3E · #D89C6F

CSS variables

:root {
  --cinnamon-stick-brew-1: #4E2A1E;
  --cinnamon-stick-brew-2: #7C482C;
  --cinnamon-stick-brew-3: #AA6B3E;
  --cinnamon-stick-brew-4: #D89C6F;
  --cinnamon-stick-brew-5: #F2C7A8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cinnamon-stick-brew": {
        1: "#4E2A1E",
        2: "#7C482C",
        3: "#AA6B3E",
        4: "#D89C6F",
        5: "#F2C7A8",
      }
    }
  }
}

Hex values

Color 1#4E2A1E

Color 2#7C482C

Color 3#AA6B3E

Color 4#D89C6F

Color 5#F2C7A8

Accessibility

Contrast checker

1.7:1Fail

2.9:1Fail

5.3:1AA

8.1:1AAA

1.7:1Fail

3.2:1AA18

4.8:1AA

2.9:1Fail

1.7:1Fail

1.8:1Fail

2.8:1Fail

5.3:1AA

3.2:1AA18

1.8:1Fail

1.5:1Fail

8.1:1AAA

4.8:1AA

2.8:1Fail

1.5:1Fail

Similar palettes

More like Cinnamon Stick Brew

Cinnamon Stick Brew

See it in context.

Ready when you are.

Built with Cinnamon Stick Brew.

How to use Cinnamon Stick Brew

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Brew Layers

Warm Comfort

Spiced Gradient

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cinnamon Stick Brew