Palette

Spiced Orange Marmalade

Vibrant and zesty oranges infused with a comforting warmth, just like homemade spiced marmalade.

WarmEnergetic5 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

#E86D2F#F78B4D#FFB075#C25B28#9D4A20

Palette guide

How to use Spiced Orange Marmalade

Overview

The Spiced Orange Marmalade palette (version 1) is a vibrant and zesty collection of oranges, infused with comforting warmth, truly like homemade spiced marmalade. This energetic palette, featuring bright #E86D2F (Tangelo) and soothing #FFB075 (Peach-Orange), provides designers and developers with a dynamic range. Its deeper tones, such as #9D4A20 (Rust Brown), anchor the liveliness, making it ideal for projects that require both vibrancy and a touch of grounded warmth. The palette's energetic mood is perfect for creating engaging user experiences, capturing attention with its vivid yet inviting hues.

Best used for

Energetic branding for food products or culinary services
Children's product packaging or educational apps
Vibrant event promotions and festival marketing
Creative portfolios and artistic website designs
User interfaces requiring a cheerful and engaging feel
Lifestyle blogs focused on zestful living or creative hobbies

Suggested color roles

primary

Designate #E86D2F (Tangelo) as the primary color for its vibrant, zesty energy, ideal for headings, buttons, and key graphical elements.

secondary

Use #F78B4D (Light Tangelo) for supporting design elements, subheadings, or background accents to maintain a bright, warm feel.

accent

Introduce #FFB075 (Peach-Orange) as a bright, cheerful highlight for interactive elements, notifications, or subtle background textures.

background

Apply #FFB075 (Peach-Orange) as a soft, inviting background color, offering a light yet warm canvas for content.

text

Employ #9D4A20 (Rust Brown) for primary text to ensure excellent readability and provide a deep, grounding contrast against the brighter oranges.

Accessibility notes

Ensure sufficient contrast between #9D4A20 text and lighter backgrounds like #FFB075 for optimal readability.
Avoid using #FFB075 as text on light backgrounds; it will likely fail WCAG contrast guidelines.
The darker tones, #C25B28 and #9D4A20, offer reliable contrast for text on white or near-white backgrounds.
Be mindful of contrast when using #F78B4D or #E86D2F for smaller text elements on backgrounds of similar lightness.

Recommended combinations

Zest & Bright

Creates a fresh, energetic, and appetizing look, perfect for hero sections or promotions of new products.

#E86D2F · #F78B4D · #FFB075

Earthy Depth

Provides a more grounded and sophisticated feel, suitable for footers, navigation, or informative content blocks.

#C25B28 · #9D4A20 · #E86D2F

Vibrant Contrast

Offers a bold and readable combination for headings, call-out boxes, or features that need to stand out with clarity.

#E86D2F · #9D4A20 · #F78B4D

CSS variables

:root {
  --spiced-orange-marmalade-1: #E86D2F;
  --spiced-orange-marmalade-2: #F78B4D;
  --spiced-orange-marmalade-3: #FFB075;
  --spiced-orange-marmalade-4: #C25B28;
  --spiced-orange-marmalade-5: #9D4A20;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-orange-marmalade": {
        1: "#E86D2F",
        2: "#F78B4D",
        3: "#FFB075",
        4: "#C25B28",
        5: "#9D4A20",
      }
    }
  }
}

Hex values

Color 1#E86D2F

Color 2#F78B4D

Color 3#FFB075

Color 4#C25B28

Color 5#9D4A20

Accessibility

Contrast checker

1.3:1Fail

1.8:1Fail

1.4:1Fail

1.9:1Fail

1.3:1Fail

1.8:1Fail

2.5:1Fail

1.8:1Fail

1.3:1Fail

2.4:1Fail

3.4:1AA18

1.4:1Fail

1.8:1Fail

2.4:1Fail

1.4:1Fail

1.9:1Fail

2.5:1Fail

3.4:1AA18

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

Zest & Bright

Earthy Depth

Vibrant Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Spiced Orange Marmalade