Palette

Spicy Chai

Rich, inviting tones inspired by the comforting warmth and fragrant spices of a well-brewed chai latte.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6A2D0C#B35A17#E69041#FFD68F#F7E1D7

Palette guide

How to use Spicy Chai

Overview

The Spicy Chai palette delivers a vibrant yet comforting blend of warm, inviting tones, reminiscent of a perfectly brewed chai latte. It features a spectrum from the deep, grounding #6A2D0C to the energetic #B35A17 and #E69041, culminating in the soft, creamy notes of #FFD68F and #F7E1D7. This collection is perfect for designers aiming to create lively, engaging, and inherently cozy experiences. Developers will find these hex codes highly effective for crafting dynamic user interfaces, appealing brand identities, or content that feels both energetic and comforting, ideal for food, lifestyle, or autumn-themed projects.

Best used for

Cafe or bakery branding and packaging
Food blog or recipe app interfaces
Autumnal event marketing materials
Cozy lifestyle e-commerce websites
Restaurant menu design
Travel blogs focusing on comfort destinations

Suggested color roles

primary

#B35A17 - A rich, inviting burnt orange, excellent for primary calls-to-action, significant headings, or vibrant brand accents.

secondary

#E69041 - A brighter, energetic orange, perfect for secondary buttons, active states, or illustrative elements.

accent

#FFD68F - A soft, warm golden beige, ideal for subtle highlights, background textures, or delicate decorative details.

background

#F7E1D7 - A light, creamy peach-beige, providing an airy and welcoming backdrop that enhances readability.

text

#6A2D0C - This deep brown offers strong contrast for primary text on lighter backgrounds like #F7E1D7 or #FFD68F. For darker backgrounds, use a pure white like #FFFFFF.

Accessibility notes

Ensure sufficient contrast when placing #E69041 text on #FFD68F; opt for darker text for readability.
Avoid using #FFD68F for small text on #F7E1D7; prioritize darker shades for body copy.
White text on #6A2D0C or #B35A17 will typically provide good WCAG contrast.
For interactive elements, maintain clear visual distinctions, especially between similar warm tones.

Recommended combinations

Vibrant Spice

Creates an energetic and inviting trio, ideal for promotions, hero sections, or highlighting key features.

#B35A17 · #E69041 · #FFD68F

Grounded Warmth

Forms a strong contrast, perfect for clear content hierarchy, branding, or impactful headlines.

#6A2D0C · #B35A17 · #F7E1D7

Soft & Creamy

Offers a gentle, harmonious feel with a pop of color, suitable for backgrounds, testimonials, or subtle accents.

#FFD68F · #F7E1D7 · #E69041

CSS variables

:root {
  --spicy-chai-1: #6A2D0C;
  --spicy-chai-2: #B35A17;
  --spicy-chai-3: #E69041;
  --spicy-chai-4: #FFD68F;
  --spicy-chai-5: #F7E1D7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spicy-chai": {
        1: "#6A2D0C",
        2: "#B35A17",
        3: "#E69041",
        4: "#FFD68F",
        5: "#F7E1D7",
      }
    }
  }
}

Hex values

Color 1#6A2D0C

Color 2#B35A17

Color 3#E69041

Color 4#FFD68F

Color 5#F7E1D7

Accessibility

Contrast checker

2.2:1Fail

4.2:1AA18

7.7:1AAA

8.4:1AAA

2.2:1Fail

1.9:1Fail

3.5:1AA18

3.8:1AA18

4.2:1AA18

1.9:1Fail

1.8:1Fail

2:1Fail

7.7:1AAA

3.5:1AA18

1.8:1Fail

1.1:1Fail

8.4:1AAA

3.8:1AA18

2:1Fail

1.1:1Fail

Similar palettes

More like Spicy Chai

View all warm

Autumn Hearth Spice

Autumn Chai Warmth

Autumn Harvest Spices

Autumn Spice Blend

Autumn Spice Hearth

Autumn Syrup