Back to palettes

Palette

Spiced Pear

Warm, comforting hues that evoke the rich aroma of a spiced pear dessert on a chilly evening.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spiced Pear 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 Spiced Pear.

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

Data visualization

#8B4513#CD853F#D2B48C#F4A460#A0522D

Palette guide

How to use Spiced Pear

Overview

The 'Spiced Pear' palette offers warm, comforting hues that evoke the rich aroma of a spiced pear dessert on a chilly evening. This earthy collection is dominated by rich browns like #8B4513 and #A0522D, complemented by inviting oranges and tans such as #CD853F and #F4A460. It's an excellent choice for designers and developers aiming to create a natural, cozy, and traditional ambiance. The palette's cohesive warmth makes it highly effective for projects that require a grounded yet inviting visual identity, perfect for autumn-themed content.

Best used for

  • Cozy cafe or restaurant branding
  • Rustic home goods e-commerce sites
  • Autumn seasonal marketing campaigns
  • Traditional packaging design
  • Nature-themed blog or website design
  • Comfort food recipe blogs

Suggested color roles

primary

Use #8B4513 (Saddle Brown) as the main brand color for strong headings, primary buttons, or foundational elements, providing depth and stability.

secondary

Apply #CD853F (Peru) for supporting elements, subheadings, or illustrations, offering a softer, warm brown contrast.

accent

Incorporate #F4A460 (Sandy Brown) for calls-to-action, highlights, or interactive elements, injecting a bright, inviting warmth.

background

Utilize #D2B48C (Tan) as a light, warm background color for main content areas, ensuring excellent readability and a gentle feel.

text

Employ #A0522D (Sienna) or #8B4513 for primary text on lighter backgrounds like #D2B48C, ensuring strong contrast; use white or very light cream for text on darker hues.

Accessibility notes

  • Ensure sufficient contrast for text in #8B4513 or #A0522D on #D2B48C background to meet WCAG standards.
  • Verify that clickable elements using #F4A460 have clear visual cues for focus and hover states.
  • Avoid using #CD853F for small text on #D2B48C as the contrast might be borderline for some users.
  • Consider providing a darker alternative for #D2B48C if used as a primary text color against a very light background.

Recommended combinations

Earthy Core

Establishing a grounded and natural feel for primary content areas and branding, evoking a sense of heritage and warmth.

#8B4513 · #D2B48C · #A0522D

Warm Glow

Adding vibrancy and warmth, perfect for calls-to-action or highlighting key information, creating an inviting visual pop.

#F4A460 · #CD853F · #8B4513

Subtle Depth

Creating layered visual interest with harmonious, warm undertones for secondary elements, backgrounds, or textural accents.

#D2B48C · #A0522D · #CD853F

CSS variables

:root {
  --spiced-pear-1: #8B4513;
  --spiced-pear-2: #CD853F;
  --spiced-pear-3: #D2B48C;
  --spiced-pear-4: #F4A460;
  --spiced-pear-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-pear": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#D2B48C",
        4: "#F4A460",
        5: "#A0522D",
      }
    }
  }
}

Related searches

warm brown orange paletteautumn color schemescozy earthy colorsnatural brand identityrustic website design

Palette colors

Hex values

Color 1#8B4513
·
Color 2#CD853F
·
Color 3#D2B48C
·
Color 4#F4A460
·
Color 5#A0522D
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
3.6:1AA18
3.5:1AA18
1.3:1Fail
2
2.4:1Fail
1.5:1Fail
1.5:1Fail
1.9:1Fail
3
3.6:1AA18
1.5:1Fail
1:1Fail
2.8:1Fail
4
3.5:1AA18
1.5:1Fail
1:1Fail
2.8:1Fail
5
1.3:1Fail
1.9:1Fail
2.8:1Fail
2.8:1Fail

Similar palettes

More like Spiced Pear

View all warm