Palette

Spiced Tea House

Warm, inviting tones, like the comforting steam and complex flavors of a spiced cup of tea.

warmcalm5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#724F3A#A67A5F#DBA584#FFD7B3#5C4130

Palette guide

How to use Spiced Tea House

Overview

The "Spiced Tea House" color palette offers a truly inviting and comforting experience, perfect for designs aiming for warmth and sophistication. Dominated by rich, earthy tones, this palette features the deep, grounding #5C4130 and #724F3A, complemented by the softer, caramel-like #A67A5F. Lighter shades like the gentle #DBA584 and the creamy #FFD7B3 provide excellent contrast and breathability. Designers can leverage this collection to evoke feelings of coziness, tradition, and subtle luxury. It's ideal for creating a welcoming atmosphere across various digital and physical applications, ensuring a harmonious and visually appealing aesthetic.

Best used for

Café and restaurant branding or interiors
Cozy blog themes and lifestyle websites
Home décor and interior design mood boards
Artisan product packaging (e.g., coffee, tea, baked goods)
Wellness and spa-related digital interfaces
Autumn/winter fashion and editorial content

Suggested color roles

primary

#724F3A (Mid-tone Brown) - Use as a foundational brand color for headers, prominent sections, or primary call-to-action buttons, conveying warmth and stability.

secondary

#A67A5F (Caramel Tan) - Excellent for supporting elements, subheadings, or background panels, offering a softer yet still rich complement to the primary brown.

accent

#DBA584 (Light Peach-Tan) - Ideal for subtle highlights, interactive elements, or illustrations where a gentle, warm pop is needed without being overly bright.

background

#FFD7B3 (Creamy Peach) - Apply as a soft, inviting background for content areas, cards, or hero sections, providing warmth and excellent readability for darker text.

text

#5C4130 (Very Dark Brown) - Employ for main body text and critical information. Its deep, rich quality ensures strong readability against lighter backgrounds like #FFD7B3 or #DBA584.

Accessibility notes

Ensure sufficient contrast when pairing #5C4130 text with #FFD7B3 or #DBA584 backgrounds for optimal readability.
Avoid using #DBA584 text on #FFD7B3 backgrounds as the contrast may be too low for most users.
For UI elements, use a darker shade like #724F3A or #A67A5F for interactive states against lighter backgrounds.
When using #A67A5F as a background, ensure text is #5C4130 or a very dark neutral to meet WCAG AA standards.

Recommended combinations

Warm Foundation

Perfect for a primary brand identity, featuring a strong brown with a soft creamy background and dark, readable text.

#724F3A · #FFD7B3 · #5C4130

Gentle Contrast

Creates a harmonious and approachable look, suitable for blog posts, product descriptions, or secondary content sections.

#A67A5F · #DBA584 · #5C4130

Rich Earth

Ideal for elegant headers, call-out boxes, or sophisticated packaging, offering depth with subtle lighter accents.

#5C4130 · #A67A5F · #DBA584

CSS variables

:root {
  --spiced-tea-house-1: #724F3A;
  --spiced-tea-house-2: #A67A5F;
  --spiced-tea-house-3: #DBA584;
  --spiced-tea-house-4: #FFD7B3;
  --spiced-tea-house-5: #5C4130;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-tea-house": {
        1: "#724F3A",
        2: "#A67A5F",
        3: "#DBA584",
        4: "#FFD7B3",
        5: "#5C4130",
      }
    }
  }
}

Hex values

Color 1#724F3A

Color 2#A67A5F

Color 3#DBA584

Color 4#FFD7B3

Color 5#5C4130

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

5.4:1AA

1.3:1Fail

1.9:1Fail

1.7:1Fail

2.8:1Fail

2.5:1Fail

3.4:1AA18

1.7:1Fail

1.6:1Fail

4.3:1AA18

5.4:1AA

2.8:1Fail

1.6:1Fail

6.9:1AA

1.3:1Fail

2.5:1Fail

4.3:1AA18

6.9:1AA

Similar palettes

More like Spiced Tea House

Barista Roast Comfort