Palette

Spiced Tea Comfort

Warm browns and creamy yellows create a cozy and inviting atmosphere, like a comforting cup of spiced tea on a cold day.

warmcalm5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#D2B48C#F5DEB3#F0E68C#A0522D

Palette guide

How to use Spiced Tea Comfort

Overview

The Spiced Tea Comfort palette offers a warm, inviting, and cozy collection of earthy tones, reminiscent of a comforting cup of tea. It features a rich saddle brown (#8B4513), a soft sand beige (#D2B48C), a creamy wheat (#F5DEB3), a muted khaki (#F0E68C), and a rustic sienna (#A0522D). This palette is perfect for designers aiming to create a sense of warmth, coziness, and natural comfort. Developers can leverage these harmonious hues for interfaces, branding, or content that evokes a homely, traditional, or artisan feel. Ideal for coffee shops, bakeries, craft brands, or wellness platforms, this palette fosters a welcoming and relaxed user experience.

Best used for

Coffee shop or bakery branding
Cozy home decor websites
Artisan craft product packaging
Blog themes for lifestyle or cooking
Wellness and mindfulness apps
Rustic event invitations

Suggested color roles

primary

Use #8B4513 as a warm, grounding primary color, ideal for strong brand presence, headers, or backgrounds that convey depth.

secondary

Apply #A0522D as a rustic secondary hue, perfect for subheadings, navigation, or to add a touch of earthy character.

accent

Introduce #D2B48C as a soft, comforting accent, suitable for calls to action, buttons, or highlights that need a gentle pop.

background

Employ #F5DEB3 as a creamy, inviting background color, providing a light yet warm canvas that enhances the palette's cozy feel.

text

For excellent readability, opt for a dark brown like #4A3C30 or even black, ensuring clear contrast against the lighter background shades.

Accessibility notes

Ensure sufficient contrast between lighter colors like #F5DEB3 and #F0E68C when used as text and background, especially for small font sizes.
The dark browns (#8B4513, #A0522D) provide good contrast for text on lighter backgrounds; use them for body copy.
Avoid using #D2B48C text directly on #F0E68C backgrounds without careful contrast checking, as they are very close in luminance.
For interactive elements, ensure distinct visual feedback (e.g., hover/focus states) that stands out clearly from the muted palette.

Recommended combinations

Cozy Brew

Ideal for warm branding, website backgrounds, or sections where a comforting and inviting atmosphere is desired.

#8B4513 · #D2B48C · #F5DEB3

Spiced Amber

Excellent for seasonal promotions, rustic design elements, or to add depth and warmth to illustrations.

#A0522D · #F0E68C · #8B4513

Comfort Blend

Perfect for subtle UI elements, background textures, or to highlight secondary information with a soft, natural feel.

#D2B48C · #F5DEB3 · #A0522D

CSS variables

:root {
  --spiced-tea-comfort-1: #8B4513;
  --spiced-tea-comfort-2: #D2B48C;
  --spiced-tea-comfort-3: #F5DEB3;
  --spiced-tea-comfort-4: #F0E68C;
  --spiced-tea-comfort-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-tea-comfort": {
        1: "#8B4513",
        2: "#D2B48C",
        3: "#F5DEB3",
        4: "#F0E68C",
        5: "#A0522D",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#D2B48C

Color 3#F5DEB3

Color 4#F0E68C

Color 5#A0522D

Accessibility

Contrast checker

3.6:1AA18

5.4:1AA

5.5:1AA

1.3:1Fail

3.6:1AA18

1.5:1Fail

2.8:1Fail

5.4:1AA

1.5:1Fail

1:1Fail

4.3:1AA18

5.5:1AA

1.5:1Fail

1:1Fail

4.4:1AA18

1.3:1Fail

2.8:1Fail

4.3:1AA18

4.4:1AA18

Similar palettes

More like Spiced Tea Comfort

Spiced Tea Comfort

See it in context.

Ready when you are.

Built with Spiced Tea Comfort.

How to use Spiced Tea Comfort

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Cozy Brew

Spiced Amber

Comfort Blend

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Spiced Tea Comfort