Palette

Spiced Berry Compote

Rich, warm tones reminiscent of a comforting autumn berry compote, spiced with cinnamon.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spiced Berry Compote 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 Berry Compote.

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

Data visualization

#800000#B22222#FF7F50#D2691E#F5DEB3

Palette guide

How to use Spiced Berry Compote

Overview

The Spiced Berry Compote palette delivers a rich and comforting array of warm autumn tones, perfect for designs aiming for a cozy, inviting, and natural aesthetic. Anchored by the deep Maroon (#800000) and vibrant Firebrick (#B22222), this palette gracefully transitions to the lively Coral (#FF7F50) and earthy Chocolate (#D2691E), culminating in a soft Wheat (#F5DEB3). Designers can leverage these hues for seasonal branding, food-related marketing, or creating warm, approachable digital interfaces. The interplay of deep reds, oranges, and a creamy base provides excellent contrast and visual warmth, making it ideal for projects that want to evoke the comfort of a homemade dessert.

Best used for

Autumnal and holiday marketing campaigns
Food blog or recipe website design
Cozy cafe or bakery branding
Rustic home decor product lines
Editorial content with a warm, inviting feel
Packaging for spiced or baked goods

Suggested color roles

primary

A deep, foundational maroon, excellent for main branding, strong headers, or prominent design elements using #800000.

secondary

A vibrant red that supports the primary, ideal for sub-headings, key sections, or impactful graphics using #B22222.

accent

A bright, cheerful coral, perfect for calls-to-action, interactive elements, or visual highlights that pop using #FF7F50.

background

A soft, warm cream providing a gentle, inviting canvas that makes darker text highly readable using #F5DEB3.

text

Use #800000 or #B22222 for body text on the #F5DEB3 background to ensure strong legibility and a harmonious look.

Accessibility notes

Ensure high contrast between #800000 or #B22222 and #F5DEB3 for all textual content to meet AA or AAA standards.
Avoid using #FF7F50 for small text on light backgrounds as its contrast may be insufficient.
Test combinations like #D2691E on #FF7F50 for readability, especially for users with color vision deficiencies.
Consider a slightly darker brown or black for critical UI text if the palette's darkest shades don't provide enough contrast on some elements.

Recommended combinations

Autumn Glow

For a classic, rich autumn feel, combining deep red, warm brown, and a light cream.

#800000 · #D2691E · #F5DEB3

Spiced Energy

To create a lively and inviting look, perfect for calls-to-action or highlighted content.

#B22222 · #FF7F50 · #F5DEB3

Dessert Harmony

An appealing mix of deep and bright tones, ideal for food-related designs or vibrant accents.

#800000 · #FF7F50 · #D2691E

CSS variables

:root {
  --spiced-berry-compote-3-1: #800000;
  --spiced-berry-compote-3-2: #B22222;
  --spiced-berry-compote-3-3: #FF7F50;
  --spiced-berry-compote-3-4: #D2691E;
  --spiced-berry-compote-3-5: #F5DEB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-berry-compote-3": {
        1: "#800000",
        2: "#B22222",
        3: "#FF7F50",
        4: "#D2691E",
        5: "#F5DEB3",
      }
    }
  }
}

Hex values

Color 1#800000

Color 2#B22222

Color 3#FF7F50

Color 4#D2691E

Color 5#F5DEB3

Accessibility

Contrast checker

1.6:1Fail

4.4:1AA18

3:1AA18

8.3:1AAA

1.6:1Fail

2.7:1Fail

1.8:1Fail

5.1:1AA

4.4:1AA18

2.7:1Fail

1.5:1Fail

1.9:1Fail

3:1AA18

1.8:1Fail

1.5:1Fail

2.8:1Fail

8.3:1AAA

5.1:1AA

1.9:1Fail

2.8:1Fail

Similar palettes

More like Spiced Berry Compote