Palette

Spiced Chai Aura

Comforting and aromatic, these colors embody the warmth and rich spices of a perfect chai.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#CD853F#D2691E#F5DEB3#B87333

Palette guide

How to use Spiced Chai Aura

Overview

The Spiced Chai Aura color palette radiates warmth and comfort, offering a rich collection of browns and oranges reminiscent of a perfectly brewed chai. From the deep, grounding Saddle Brown (#8B4513) to the soft, creamy Wheat (#F5DEB3), this palette also features the golden Peru (#CD853F) and the vibrant Chocolate (#D2691E). Designers can leverage these hues for cozy branding, inviting digital interfaces, or sophisticated print materials. The harmonious blend of deep, earthy tones and lighter, airy shades provides excellent contrast and versatility, making it ideal for projects that aim to evoke comfort, natural elegance, and a welcoming atmosphere, much like a warm cup of spiced chai.

Best used for

Cafe and beverage branding
Cozy lifestyle blogs or e-commerce sites
Autumnal and seasonal marketing campaigns
Natural or organic product packaging
Interior design for warm, inviting spaces
Editorial content with a comforting feel

Suggested color roles

primary

A deep, foundational brown, excellent for main branding, strong headers, or grounding design elements using #8B4513.

secondary

A rich, warm copper-brown that supports the primary, suitable for sub-headings or prominent sections using #B87333.

accent

A vibrant, inviting orange-brown, perfect for calls-to-action, interactive elements, or visual highlights using #D2691E.

background

A soft, creamy wheat that provides a gentle, warm, and highly readable canvas for content using #F5DEB3.

text

Use #8B4513 or #B87333 for body text on the #F5DEB3 background to ensure strong readability and a harmonious feel.

Accessibility notes

Ensure high contrast between #8B4513 or #B87333 and #F5DEB3 for all text to meet AA or AAA accessibility standards.
Avoid using #CD853F or #D2691E for small text on very light backgrounds without significant contrast testing.
Test color pairings like #CD853F on #D2691E carefully for readability, especially for users with color vision deficiencies.
Consider a dark charcoal or black for critical UI text if the palette's darkest tones don't provide sufficient contrast on all backgrounds.

Recommended combinations

Chai Base

For a grounding and comforting feel, ideal for main content, branding, and warm backgrounds.

#8B4513 · #B87333 · #F5DEB3

Spiced Glow

To create an energetic and inviting highlight, perfect for calls-to-action or decorative elements.

#CD853F · #D2691E · #F5DEB3

Warm Gradient

An appealing gradient for visual flow, showcasing the palette's rich progression of browns and oranges.

#8B4513 · #CD853F · #D2691E

CSS variables

:root {
  --spiced-chai-aura-1: #8B4513;
  --spiced-chai-aura-2: #CD853F;
  --spiced-chai-aura-3: #D2691E;
  --spiced-chai-aura-4: #F5DEB3;
  --spiced-chai-aura-5: #B87333;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-chai-aura": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#D2691E",
        4: "#F5DEB3",
        5: "#B87333",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#CD853F

Color 3#D2691E

Color 4#F5DEB3

Color 5#B87333

Accessibility

Contrast checker

2.4:1Fail

2:1Fail

5.4:1AA

1.9:1Fail

2.4:1Fail

1.2:1Fail

2.3:1Fail

1.3:1Fail

2:1Fail

1.2:1Fail

2.8:1Fail

1:1Fail

5.4:1AA

2.3:1Fail

2.8:1Fail

2.9:1Fail

1.9:1Fail

1.3:1Fail

1:1Fail

2.9:1Fail

Similar palettes

More like Spiced Chai Aura