Palette

Spiced Orange Marmalade

Warm and inviting oranges with deep, spicy undertones, like homemade marmalade simmering on a stove.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Spiced Orange Marmalade 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 Orange Marmalade.

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

Data visualization

#8C2D00#B33B00#DB4A00#FF6700#FF9B4A

Palette guide

How to use Spiced Orange Marmalade

Overview

The Spiced Orange Marmalade palette (version 2) delivers a rich collection of warm and inviting oranges, imbued with deep, spicy undertones, reminiscent of homemade marmalade simmering on a stove. This natural-mood palette, featuring vibrant #FF6700 (Orange Peel) and grounding #8C2D00 (Dark Terra Cotta), offers designers and developers a robust spectrum for creating cozy and appetizing digital and physical experiences. From the intense #DB4A00 (Pumpkin Orange) to the softer #FF9B4A (Peach Orange), these hues are perfect for projects that aim to evoke comfort, warmth, and culinary delight, ensuring visual richness and depth.

Best used for

Food packaging and culinary brand identity
Autumn-themed event invitations and decor
Cozy cafe or restaurant interior design concepts
Digital recipe books and food photography backgrounds
Warm, inviting e-commerce sites for artisan goods
Lifestyle blogs focused on home cooking or fall activities

Suggested color roles

primary

Utilize #DB4A00 (Pumpkin Orange) as the main brand color for its rich, inviting, and slightly bold presence in headers and key elements.

secondary

Apply #B33B00 (Dark Orange) for supporting sections, subheadings, or as a background for interactive elements, providing depth.

accent

Introduce #FF6700 (Orange Peel) for calls to action or highlights, offering a bright, zesty pop that commands attention.

background

Employ #FF9B4A (Peach Orange) as a soft, warm background, creating an inviting canvas that allows other colors to stand out.

text

Use #8C2D00 (Dark Terra Cotta) for primary text content to ensure optimal readability against lighter palette colors, offering a deep, natural contrast.

Accessibility notes

Ensure #8C2D00 text has sufficient contrast against #FF9B4A and other lighter backgrounds for WCAG compliance.
Avoid using #FF9B4A as text on light backgrounds; it may lack sufficient contrast for readability.
The darker tones like #8C2D00 and #B33B00 provide excellent readability for text on white or very light backgrounds.
When using #FF6700 for interactive elements, ensure clear focus indicators, as its vibrancy can sometimes blend with similar tones.

Recommended combinations

Zesty Bright

Creates a fresh, energetic feel suitable for product highlights or sections needing a lively and appetizing appeal.

#FF6700 · #DB4A00 · #FF9B4A

Deep & Rich

Ideal for sophisticated branding, footers, or content blocks that require a grounded, luxurious, and warm presence.

#8C2D00 · #B33B00 · #DB4A00

Cozy Contrast

Provides a balanced and inviting look, perfect for hero sections or informational panels where clarity meets warmth.

#DB4A00 · #8C2D00 · #FF9B4A

CSS variables

:root {
  --spiced-orange-marmalade-2-1: #8C2D00;
  --spiced-orange-marmalade-2-2: #B33B00;
  --spiced-orange-marmalade-2-3: #DB4A00;
  --spiced-orange-marmalade-2-4: #FF6700;
  --spiced-orange-marmalade-2-5: #FF9B4A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-orange-marmalade-2": {
        1: "#8C2D00",
        2: "#B33B00",
        3: "#DB4A00",
        4: "#FF6700",
        5: "#FF9B4A",
      }
    }
  }
}

Hex values

Color 1#8C2D00

Color 2#B33B00

Color 3#DB4A00

Color 4#FF6700

Color 5#FF9B4A

Accessibility

Contrast checker

1.4:1Fail

2:1Fail

2.9:1Fail

4:1AA18

1.4:1Fail

2:1Fail

2.8:1Fail

2:1Fail

1.4:1Fail

2:1Fail

2.9:1Fail

2:1Fail

1.4:1Fail

4:1AA18

2.8:1Fail

2:1Fail

1.4:1Fail

Similar palettes

More like Spiced Orange Marmalade

Spiced Orange Marmalade

See it in context.

Ready when you are.

Built with Spiced Orange Marmalade.

How to use Spiced Orange Marmalade

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Zesty Bright

Deep & Rich

Cozy Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Spiced Orange Marmalade