Palette

Pumpkin Spice Latte

Warm and inviting tones reflect the comforting aroma and flavors of an autumnal spiced latte.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pumpkin Spice Latte 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 Pumpkin Spice Latte.

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

Data visualization

#CD853F#D2691E#F4A460#8B4513#FAEBD7

Palette guide

How to use Pumpkin Spice Latte

Overview

The "Pumpkin Spice Latte" palette delivers a truly comforting and inviting experience, mirroring the beloved autumnal drink. It grounds itself with a deep #8B4513 (saddle brown), then transitions through rich #D2691E (chocolate) and a warm #CD853F (peru). The lighter #F4A460 (sandy brown) and the softest #FAEBD7 (antique white) complete this harmonious collection. This palette offers designers and developers a versatile tool for creating user interfaces, branding, and marketing materials that exude warmth, natural charm, and a sense of coziness. It's perfect for projects aiming to evoke a comforting, approachable, and seasonally appropriate aesthetic across various digital and print applications.

Best used for

Bakery and cafe branding
Autumn-themed event promotions
Cozy lifestyle blogs or apps
Food and beverage packaging design
Home goods e-commerce websites
Seasonal recipe content creation

Suggested color roles

primary

A rich, vibrant chocolate-orange #D2691E, ideal for strong calls-to-action, main headlines, or prominent branding elements.

secondary

Peru brown #CD853F offers a warm, earthy contrast, perfect for subheadings, navigation, or secondary interactive elements.

accent

A lighter sandy brown #F4A460, excellent for subtle highlights, hover states, or decorative details that add a soft touch.

background

Antique white #FAEBD7 provides a very soft, warm, and clean base, allowing content to remain highly readable and inviting.

text

Saddle brown #8B4513 is the darkest tone, offering superb readability against lighter backgrounds for body text, links, and key information, or a deep charcoal.

Accessibility notes

Ensure #8B4513 text has strong contrast against #FAEBD7 backgrounds.
Be cautious with #F4A460 text on #FAEBD7; contrast will likely be insufficient.
Always check text and interactive element color combinations against WCAG AA or AAA guidelines.
For critical information or small text, a darker neutral like black can be paired with #FAEBD7.

Recommended combinations

Spice Blend

Creates a balanced, inviting look, perfect for primary branding and content areas.

#8B4513 · #FAEBD7 · #D2691E

Warm Embrace

Offers a soft and welcoming feel, suitable for secondary information, backgrounds, or subtle accents.

#CD853F · #F4A460 · #FAEBD7

Autumn Depth

Provides strong visual hierarchy and warmth, great for feature sections or navigation.

#D2691E · #FAEBD7 · #8B4513

CSS variables

:root {
  --pumpkin-spice-latte-1: #CD853F;
  --pumpkin-spice-latte-2: #D2691E;
  --pumpkin-spice-latte-3: #F4A460;
  --pumpkin-spice-latte-4: #8B4513;
  --pumpkin-spice-latte-5: #FAEBD7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pumpkin-spice-latte": {
        1: "#CD853F",
        2: "#D2691E",
        3: "#F4A460",
        4: "#8B4513",
        5: "#FAEBD7",
      }
    }
  }
}

Hex values

Color 1#CD853F

Color 2#D2691E

Color 3#F4A460

Color 4#8B4513

Color 5#FAEBD7

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

2.4:1Fail

2.6:1Fail

1.2:1Fail

1.8:1Fail

2:1Fail

3.1:1AA18

1.5:1Fail

1.8:1Fail

3.5:1AA18

1.7:1Fail

2.4:1Fail

2:1Fail

3.5:1AA18

6.1:1AA

2.6:1Fail

3.1:1AA18

1.7:1Fail

6.1:1AA

Similar palettes

More like Pumpkin Spice Latte

Gingerbread Spice Blend

Harvest Moon Delight