Palette

Warm Spice Crate

Comforting browns and rusts, like the earthy tones of dried spices in an old wooden crate.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Warm Spice Crate 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 Spice Crate.

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

Data visualization

#B06B3E#975833#7E4627#65341C#4C2311

Palette guide

How to use Warm Spice Crate

Overview

The Warm Spice Crate palette offers a comforting collection of deep, earthy browns and rustic orange tones, perfect for evoking a sense of natural warmth and coziness. With hues ranging from the lighter, inviting #B06B3E to the rich, grounding #4C2311, this scheme provides a sophisticated yet approachable foundation for various design projects. Designers will appreciate the organic depth available through shades like #7E4627 and #65341C, ideal for creating layered textures and visual interest. Developers can leverage this consistent color family for intuitive UI elements, ensuring harmonious visual flow. This palette is excellent for projects aiming for a mature, artisanal, or heritage feel, promising a timeless and welcoming aesthetic.

Best used for

Rustic branding and logos
Autumnal marketing campaigns
Cozy interior design concepts
Food and beverage packaging
Natural product website design
Editorial layouts with an earthy theme

Suggested color roles

primary

Use #7E4627 as a dominant brand color or for key navigational elements, providing a strong, warm anchor.

secondary

Apply #B06B3E for supporting content blocks, subheadings, or secondary buttons, offering a lighter, inviting contrast.

accent

Utilize #975833 for interactive elements, highlights, or subtle graphic accents to add a touch of richness without overwhelming.

background

Employ #B06B3E for soft, warm backgrounds in sections or cards, ensuring readability with darker text.

text

The darkest shade, #4C2311, is ideal for primary body text, ensuring excellent readability on lighter backgrounds like #B06B3E or off-white.

Accessibility notes

Ensure sufficient contrast between #4C2311 text and lighter backgrounds like #B06B3E to meet WCAG AA standards.
Avoid using #975833 or #65341C for small text on similar mid-tone backgrounds, as contrast may be insufficient.
For interactive elements, ensure distinct hover/focus states are implemented using a contrasting shade like #B06B3E.
Consider using a near-white or light cream for primary text on the darkest shades like #4C2311 to maximize readability.

Recommended combinations

Earthy Foundation

Ideal for main content areas, headers, and footers, creating a solid, grounded design.

#B06B3E · #7E4627 · #4C2311

Subtle Depth

Perfect for layered backgrounds, subtle UI accents, or secondary informational text blocks.

#975833 · #65341C · #B06B3E

Rustic Harmony

Excellent for branding elements, call-to-action buttons, or visual hierarchy in editorial designs.

#7E4627 · #B06B3E · #975833

CSS variables

:root {
  --warm-spice-crate-1: #B06B3E;
  --warm-spice-crate-2: #975833;
  --warm-spice-crate-3: #7E4627;
  --warm-spice-crate-4: #65341C;
  --warm-spice-crate-5: #4C2311;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "warm-spice-crate": {
        1: "#B06B3E",
        2: "#975833",
        3: "#7E4627",
        4: "#65341C",
        5: "#4C2311",
      }
    }
  }
}

Hex values

Color 1#B06B3E

Color 2#975833

Color 3#7E4627

Color 4#65341C

Color 5#4C2311

Accessibility

Contrast checker

1.3:1Fail

1.8:1Fail

2.4:1Fail

3.2:1AA18

1.3:1Fail

1.8:1Fail

2.4:1Fail

1.8:1Fail

1.3:1Fail

1.4:1Fail

1.8:1Fail

2.4:1Fail

1.8:1Fail

1.4:1Fail

1.3:1Fail

3.2:1AA18

2.4:1Fail

1.8:1Fail

1.3:1Fail

Similar palettes

More like Warm Spice Crate

Warm Spice Crate

See it in context.

Ready when you are.

Built with Warm Spice Crate.

How to use Warm Spice Crate

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Earthy Foundation

Subtle Depth

Rustic Harmony

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Warm Spice Crate