Palette

Autumn Chai Warmth

Warm browns and creams, reminiscent of a comforting spiced chai latte on a chilly day.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B4513#CD853F#D2691E#F4A460#FFF8DC

Palette guide

How to use Autumn Chai Warmth

Overview

The "Autumn Chai Warmth" palette features warm browns and creams, reminiscent of a comforting spiced chai latte on a chilly day. It includes a rich saddle brown #8B4513, a warm peru #CD853F, a vibrant chocolate #D2691E, a luminous light brown #F4A460, and a soft cream #FFF8DC. This natural and warm palette is ideal for designers looking to infuse coziness, comfort, and a strong connection to the autumn season into their projects. The harmonious blend of browns and creams, progressing from deep to light, creates a refreshing and modern aesthetic, perfect for web interfaces, branding, or digital art that aims to be both captivating and serene. It offers a truly elegant and ethereal aesthetic.

Best used for

Seasonal product marketing (fall collection)
Food and beverage branding (coffee, tea, baked goods)
Home decor or interior design websites
Cafes or bakeries branding
Crafts and artisanal goods e-commerce
Autumnal event invitations

Suggested color roles

primary

#CD853F - A warm peru, ideal for main interactive elements, key calls-to-action, or prominent sections that convey warmth and richness.

secondary

#8B4513 - A rich saddle brown, excellent for supporting content, navigation backgrounds, or subheadings, adding depth and sophistication.

accent

#D2691E - A vibrant chocolate, perfect for highlights, hover states, or small decorative elements that need to pop with a brilliant glow.

background

#FFF8DC - A soft cream, providing an airy and serene canvas that allows the deeper browns to stand out beautifully.

text

#8B4513 - A rich saddle brown that offers excellent readability on #FFF8DC or #F4A460, or use a crisp black for general body text on lightest backgrounds.

Accessibility notes

Ensure #8B4513 or #D2691E has sufficient contrast when used for text on #FFF8DC or #F4A460 backgrounds.
#CD853F can be used for headings on #8B4513, but always verify contrast for smaller text.
Avoid using #F4A460 text directly on #CD853F, as the contrast might be insufficient.
For optimal readability, use a dark charcoal or black text on the lightest shades for general body copy.

Recommended combinations

Deep Brew

Robust website footers, elegant dashboards, or professional presentations.

#8B4513 · #CD853F · #D2691E

Chai Latte

Vibrant hero sections, engaging infographics, or serene app interfaces.

#CD853F · #F4A460 · #FFF8DC

Spiced Warmth

Dynamic gradient backgrounds, celestial-themed graphics, or impactful presentations.

#8B4513 · #F4A460 · #FFF8DC

CSS variables

:root {
  --autumn-chai-warmth-1: #8B4513;
  --autumn-chai-warmth-2: #CD853F;
  --autumn-chai-warmth-3: #D2691E;
  --autumn-chai-warmth-4: #F4A460;
  --autumn-chai-warmth-5: #FFF8DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-chai-warmth": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#D2691E",
        4: "#F4A460",
        5: "#FFF8DC",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#CD853F

Color 3#D2691E

Color 4#F4A460

Color 5#FFF8DC

Accessibility

Contrast checker

2.4:1Fail

2:1Fail

3.5:1AA18

6.7:1AA

2.4:1Fail

1.2:1Fail

1.5:1Fail

2.8:1Fail

2:1Fail

1.2:1Fail

1.8:1Fail

3.4:1AA18

3.5:1AA18

1.5:1Fail

1.8:1Fail

1.9:1Fail

6.7:1AA

2.8:1Fail

3.4:1AA18

1.9:1Fail

Similar palettes

More like Autumn Chai Warmth