Palette

Spicy Clay Vessel

Rich, earthy reds and browns inspired by sunbaked clay pots and aromatic spices.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A52A2A#8B0000#CD5C5C#D2B48C#B22222

Palette guide

How to use Spicy Clay Vessel

Overview

The Spicy Clay Vessel palette captures the essence of sunbaked terracotta and aromatic spices with a rich array of reds and earthy tones. It features deep, grounding shades like Brown (#A52A2A) and DarkRed (#8B0000), complemented by the vibrant Firebrick (#B22222) and a lighter IndianRed (#CD5C5C). The soft, neutral Tan (#D2B48C) provides a crucial visual break, preventing the palette from becoming too heavy. This collection is ideal for designers seeking to evoke warmth, tradition, and a natural, rustic elegance. Developers can apply these harmonious colors to create inviting and stable digital experiences.

Best used for

Autumnal event invitations or seasonal branding
Traditional craft or artisan product packaging
Restaurant or cafe branding with a rustic, warm atmosphere
Home decor websites focusing on natural materials
Content related to cooking, baking, or spices
Brand identity for wineries or craft breweries

Suggested color roles

primary

DarkRed (#8B0000) – A deep, commanding red, perfect for strong brand statements, main navigation, or impactful headings.

secondary

Firebrick (#B22222) – A robust, warm red that works well for subheadings, important calls-to-action, or graphic elements that need prominence.

accent

IndianRed (#CD5C5C) – A lighter, more playful red, suitable for interactive elements, highlights, or subtle decorative details.

background

Tan (#D2B48C) – A soft, warm beige that offers a light, neutral backdrop, allowing the rich reds to stand out without being overwhelming.

text

DarkRed (#8B0000) or a deep charcoal/black for body text on Tan (#D2B48C), ensuring excellent readability.

Accessibility notes

DarkRed (#8B0000), Brown (#A52A2A), and Firebrick (#B22222) offer good contrast against Tan (#D2B48C) for text.
IndianRed (#CD5C5C) may require larger font sizes or bolder weights to meet WCAG AA contrast for small text on Tan (#D2B48C).
Avoid pairing IndianRed (#CD5C5C) for text on backgrounds that are too close in luminance, such as other light reds or beiges.
Always verify contrast ratios for all text and interactive elements to ensure accessibility across different contexts.

Recommended combinations

Rustic Depth

Sophisticated branding, deep backgrounds, or elegant UI cards.

#8B0000 · #A52A2A · #D2B48C

Spiced Terracotta

Warm, inviting hero sections, call-to-action buttons, or decorative design elements.

#B22222 · #CD5C5C · #D2B48C

Autumn Glow

Gentle backgrounds with strong, readable text, or subtle gradient effects.

#D2B48C · #B22222 · #8B0000

CSS variables

:root {
  --spicy-clay-vessel-1: #A52A2A;
  --spicy-clay-vessel-2: #8B0000;
  --spicy-clay-vessel-3: #CD5C5C;
  --spicy-clay-vessel-4: #D2B48C;
  --spicy-clay-vessel-5: #B22222;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spicy-clay-vessel": {
        1: "#A52A2A",
        2: "#8B0000",
        3: "#CD5C5C",
        4: "#D2B48C",
        5: "#B22222",
      }
    }
  }
}

Hex values

Color 1#A52A2A

Color 2#8B0000

Color 3#CD5C5C

Color 4#D2B48C

Color 5#B22222

Accessibility

Contrast checker

1.4:1Fail

1.8:1Fail

3.6:1AA18

1.1:1Fail

1.4:1Fail

2.5:1Fail

5.1:1AA

1.5:1Fail

1.8:1Fail

2.5:1Fail

2:1Fail

1.7:1Fail

3.6:1AA18

5.1:1AA

2:1Fail

3.4:1AA18

1.1:1Fail

1.5:1Fail

1.7:1Fail

3.4:1AA18

Similar palettes

More like Spicy Clay Vessel

Harvest Spice Crumble

Spiced Cedar Chest

Spiced Fig Dream