Back to palettes

Palette

Clove Spice Hearth

A comforting embrace of deep, spicy browns and soft ochres, perfect for a cozy fireside evening.

warmcalm5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Clove Spice Hearth 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 Clove Spice Hearth.

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

Data visualization

#800000#A0522D#CD853F#D2B48C#5F4C3B

Palette guide

How to use Clove Spice Hearth

Overview

The Clove Spice Hearth palette offers a comforting embrace of deep, spicy browns and soft ochres, perfect for a cozy fireside evening. This warm collection, featuring the rich maroon of #800000, the earthy russet of #A0522D, and the inviting tan of #D2B48C, evokes a sense of warmth, tradition, and coziness. Designers can leverage these hex codes for autumnal branding, rustic digital experiences, or comforting print materials. Developers will find these harmonious tones excellent for building user interfaces that feel inviting, grounded, and rich in character, with #CD853F providing a warm mid-tone and #5F4C3B offering a deep, grounding foundation.

Best used for

  • autumnal branding
  • coffee shop websites
  • rustic home decor
  • food and beverage packaging
  • traditional craft businesses
  • cozy blog themes

Suggested color roles

primary

#A0522D - A rich, earthy russet, excellent for main headings, primary navigation, or prominent brand elements.

secondary

#CD853F - A warm, inviting tan, perfect for subheadings, background panels, or supportive graphics.

accent

#800000 - A deep, rich maroon, ideal for strong accents, important links, or focal points that require high contrast and warmth.

background

#D2B48C - The lightest, warm tan, providing a comforting, expansive, and inviting canvas.

text

#5F4C3B - This deep, dark brown offers excellent readability for body text against the lighter backgrounds like #D2B48C or #CD853F.

Accessibility notes

  • Text in #5F4C3B on backgrounds like #D2B48C or #CD853F should meet WCAG AA contrast standards.
  • Avoid using #CD853F or #D2B48C for small text on other light backgrounds due to potential low contrast.
  • Ensure interactive elements have clear visual feedback, especially when using warmer, less contrasting shades.
  • Always verify contrast ratios for all text and interactive elements, particularly for critical information.

Recommended combinations

Hearth Warmth

For creating warm, layered backgrounds or inviting card designs, evoking a cozy atmosphere.

#D2B48C · #CD853F · #A0522D

Spiced Depth

Ideal for professional layouts, using the deeper reds and browns for headlines and lighter tones for content.

#800000 · #5F4C3B · #D2B48C

Earthy Blend

For content blocks or subtle dividers, maintaining a rich and harmonious visual flow with depth.

#A0522D · #CD853F · #5F4C3B

CSS variables

:root {
  --clove-spice-hearth-1: #800000;
  --clove-spice-hearth-2: #A0522D;
  --clove-spice-hearth-3: #CD853F;
  --clove-spice-hearth-4: #D2B48C;
  --clove-spice-hearth-5: #5F4C3B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "clove-spice-hearth": {
        1: "#800000",
        2: "#A0522D",
        3: "#CD853F",
        4: "#D2B48C",
        5: "#5F4C3B",
      }
    }
  }
}

Related searches

clove color palettespice autumn colorscozy warm brandingrustic web designearthy brown red scheme

Palette colors

Hex values

Color 1#800000
·
Color 2#A0522D
·
Color 3#CD853F
·
Color 4#D2B48C
·
Color 5#5F4C3B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.7:1AA18
5.6:1AA
1.3:1Fail
2
1.9:1Fail
1.9:1Fail
2.8:1Fail
1.4:1Fail
3
3.7:1AA18
1.9:1Fail
1.5:1Fail
2.7:1Fail
4
5.6:1AA
2.8:1Fail
1.5:1Fail
4.1:1AA18
5
1.3:1Fail
1.4:1Fail
2.7:1Fail
4.1:1AA18

Similar palettes

More like Clove Spice Hearth

View all warm