Palette

Chai Spice Lane

A comforting blend of warm, inviting tones, reminiscent of spiced tea on a cool autumn evening.

warmcalm5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Chai Spice Lane 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 Chai Spice Lane.

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

Data visualization

#A36F47#D4A582#F2DDC5#8C4E2D#6F3E1B

Palette guide

How to use Chai Spice Lane

Overview

The "Chai Spice Lane" palette offers a comforting blend of warm, inviting tones, reminiscent of spiced tea on a cool autumn evening. It features the deep, grounding #6F3E1B and the rich #8C4E2D, transitioning through the warm #A36F47. The palette lightens with the inviting #D4A582, culminating in the soft, creamy #F2DDC5. This collection is ideal for designers seeking to evoke coziness, warmth, or natural comfort. Developers can apply these hues to create inviting user interfaces for coffee shops, lifestyle blogs, or artisan brands, ensuring a smooth and captivating visual experience that promotes relaxation and authenticity.

Best used for

Autumn-themed marketing
Cozy lifestyle blogs
Artisan food packaging
Coffee shop branding
Home decor e-commerce
Seasonal event promotions

Suggested color roles

primary

#A36F47 - A warm, spiced brown, ideal for main headings, navigation, or strong brand elements, conveying comfort.

secondary

#8C4E2D - A rich, deep brown-orange, excellent for subheadings, borders, or secondary content blocks, adding depth.

accent

#F2DDC5 - A creamy beige, perfect for subtle highlights, call-to-action buttons, or delicate decorative accents.

background

#F2DDC5 - A very light, creamy beige, serving as a clean, warm, and inviting canvas that enhances the natural feel.

text

#6F3E1B - A deep, dark brown, providing excellent contrast and readability for text on lighter backgrounds like #F2DDC5.

Accessibility notes

Ensure #6F3E1B text on #F2DDC5 background meets WCAG contrast standards for optimal readability.
Avoid using #D4A582 or #F2DDC5 for small text against similarly light backgrounds due to low contrast.
The darkest colors, #6F3E1B and #8C4E2D, provide good contrast for white or very light text.
For body text, prefer #6F3E1B against the lightest colors for optimal readability.

Recommended combinations

Spiced Autumn

Creates a strong, comforting base with the darkest brown as a focal point and lightest for clear text.

#6F3E1B · #8C4E2D · #F2DDC5

Warm Brew

Ideal for soft, inviting sections, with the warmer brown providing a gentle contrast and depth.

#A36F47 · #D4A582 · #8C4E2D

Chai Layers

Excellent for layered UI elements, mimicking the nuanced colors of spiced tea from light to dark.

#F2DDC5 · #D4A582 · #A36F47

CSS variables

:root {
  --chai-spice-lane-1: #A36F47;
  --chai-spice-lane-2: #D4A582;
  --chai-spice-lane-3: #F2DDC5;
  --chai-spice-lane-4: #8C4E2D;
  --chai-spice-lane-5: #6F3E1B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "chai-spice-lane": {
        1: "#A36F47",
        2: "#D4A582",
        3: "#F2DDC5",
        4: "#8C4E2D",
        5: "#6F3E1B",
      }
    }
  }
}

Hex values

Color 1#A36F47

Color 2#D4A582

Color 3#F2DDC5

Color 4#8C4E2D

Color 5#6F3E1B

Accessibility

Contrast checker

1.9:1Fail

3.2:1AA18

1.5:1Fail

2.1:1Fail

1.9:1Fail

1.7:1Fail

2.9:1Fail

4:1AA18

3.2:1AA18

1.7:1Fail

4.9:1AA

6.7:1AA

1.5:1Fail

2.9:1Fail

4.9:1AA

1.4:1Fail

2.1:1Fail

4:1AA18

6.7:1AA

1.4:1Fail

Similar palettes

More like Chai Spice Lane

View all warm

Morning Brew Cafe

Spiced Ginger Biscuit

Barista Roast Comfort

Café au Lait Comfort

Caramel Latte Dream

Chocolate Cafe Roast