Palette

Warm Cinnamon Embrace

Rich, comforting tones of cinnamon and spiced warmth, enveloping you in a cozy, autumnal embrace.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Warm Cinnamon Embrace 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 Warm Cinnamon Embrace.

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

Data visualization

#8A3D1E#B45C2D#D68F55#E5C39D#70301B

Palette guide

How to use Warm Cinnamon Embrace

Overview

The "Warm Cinnamon Embrace" palette offers a rich, comforting selection of earthy tones perfect for creating inviting digital and physical experiences. Anchored by the spiced orange of #B45C2D and the deep, grounding #70301B, this collection evokes a cozy, autumnal atmosphere. Designers can leverage the versatility of the lighter #E5C39D as a soft background, allowing the vibrant #D68F55 to shine as a secondary element. The robust #8A3D1E provides a strong accent, ideal for calls to action or impactful headings. This palette is excellent for projects aiming to convey warmth, authenticity, and a sense of natural comfort, making it a go-to for branding and UI design that feels welcoming and sincere.

Best used for

Cozy cafe or bakery branding and website design
Home decor, interior design, and furniture e-commerce
Autumnal event invitations and seasonal marketing materials
Wellness and organic product packaging or digital interfaces
Artisanal crafts and handmade goods online shops
Brand identities seeking warmth, comfort, and natural appeal

Suggested color roles

primary

Use #B45C2D (Spiced Orange) for dominant UI elements like primary buttons, main navigation, or hero sections to immediately convey warmth and invitation.

secondary

Apply #D68F55 (Soft Cinnamon Tan) for supporting elements, subheadings, or background panels that need to maintain a light, airy feel while complementing the primary color.

accent

Reserve #8A3D1E (Rich Burnt Sienna) for impactful accents such as crucial call-to-action buttons, progress indicators, or small, decorative design details requiring depth.

background

Employ #E5C39D (Creamy Nude) as a soft, neutral base for page backgrounds, large content blocks, or subtle overlays, ensuring excellent readability and a gentle aesthetic.

text

Utilize #70301B (Dark Espresso Brown) for body text, headings, and critical labels to ensure high contrast and readability across lighter backgrounds like #E5C39D or #D68F55.

Accessibility notes

Ensure #70301B text against #E5C39D background meets WCAG AAA contrast ratios for optimal readability.
Avoid using #D68F55 for small text on #E5C39D as the contrast may be insufficient for accessibility.
Interactive elements like buttons using #B45C2D should have clear focus states that pass contrast checks.
When using #8A3D1E as an accent, ensure any overlaid text is sufficiently light (e.g., white or #E5C39D) to maintain legibility.

Recommended combinations

Cozy Read

Ideal for main content areas: #E5C39D as background, #70301B for body text, and #B45C2D for headings or links.

#E5C39D · #70301B · #B45C2D

Spiced Depth

Perfect for UI components like cards or sections, using #B45C2D as the base, #D68F55 for secondary info, and #8A3D1E for key actions.

#B45C2D · #D68F55 · #8A3D1E

Autumn Glow

A lighter scheme for overlays or modals: #D68F55 background, #E5C39D for subtle details, and #70301B for clear text.

#D68F55 · #E5C39D · #70301B

CSS variables

:root {
  --warm-cinnamon-embrace-1: #8A3D1E;
  --warm-cinnamon-embrace-2: #B45C2D;
  --warm-cinnamon-embrace-3: #D68F55;
  --warm-cinnamon-embrace-4: #E5C39D;
  --warm-cinnamon-embrace-5: #70301B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "warm-cinnamon-embrace": {
        1: "#8A3D1E",
        2: "#B45C2D",
        3: "#D68F55",
        4: "#E5C39D",
        5: "#70301B",
      }
    }
  }
}

Hex values

Color 1#8A3D1E

Color 2#B45C2D

Color 3#D68F55

Color 4#E5C39D

Color 5#70301B

Accessibility

Contrast checker

1.6:1Fail

2.9:1Fail

4.6:1AA

1.3:1Fail

1.6:1Fail

1.8:1Fail

2.8:1Fail

2.1:1Fail

2.9:1Fail

1.8:1Fail

1.6:1Fail

3.7:1AA18

4.6:1AA

2.8:1Fail

1.6:1Fail

5.9:1AA

1.3:1Fail

2.1:1Fail

3.7:1AA18

5.9:1AA

Similar palettes

More like Warm Cinnamon Embrace

Warm Cinnamon Embrace

See it in context.

Ready when you are.

Built with Warm Cinnamon Embrace.

How to use Warm Cinnamon Embrace

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Cozy Read

Spiced Depth

Autumn Glow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Warm Cinnamon Embrace