Palette

Spiced Marmalade Morning

Warm, inviting oranges and creamy tones, reminiscent of homemade marmalade on a sunny morning.

warmenergetic5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#CC5803#E17E22#FF9505#FFD89B#FFF0D9

Palette guide

How to use Spiced Marmalade Morning

Overview

The Spiced Marmalade Morning palette is a bright and energetic collection of warm, inviting oranges and creamy tones, reminiscent of homemade marmalade on a sunny morning. It features the deep burnt orange #CC5803, transitioning through the vibrant #E17E22 and the cheerful #FF9505. Complementing these are the soft peach #FFD89B and the very light cream #FFF0D9. This palette is designed to evoke feelings of freshness, coziness, and a lively start to the day. Its harmonious blend of bright and soft hues makes it perfect for designs that aim to be both energetic and comforting, creating a cheerful and welcoming visual experience.

Best used for

Breakfast food and beverage branding
Morning routine apps and wellness content
Children's book illustrations and educational materials
Bakery or cafe websites and social media
Lifestyle blogs focused on home and comfort
Summer event promotions and invitations

Suggested color roles

primary

#CC5803 (Deep, inviting orange, perfect for main brand identity and strong calls to action)

secondary

#E17E22 (Bright orange, providing a lively supporting tone for various UI elements)

accent

#FF9505 (Vibrant, cheerful orange, ideal for highlights, interactive states, or key visual elements)

background

#FFF0D9 (Very light cream, offering a clean, soft, and airy canvas that brightens the design)

text

#CC5803 (Deep orange, ensuring good readability for body text on light backgrounds, or use a dark charcoal)

Accessibility notes

Use #CC5803 or a dark charcoal for body text on #FFF0D9 for optimal contrast.
Be cautious using #E17E22 or #FF9505 for small text on #FFF0D9; reserve for larger headlines.
Avoid using #FFD89B as text color on #FFF0D9 due to insufficient contrast.
Ensure interactive elements have clear visual cues beyond color, especially with similar orange tones.

Recommended combinations

Marmalade Bright

Excellent for hero sections, combining a strong primary with a clean background and vibrant accent.

#CC5803 · #FFF0D9 · #FF9505

Citrus Gradient

Ideal for decorative elements, banners, or background gradients, offering a smooth transition.

#E17E22 · #FF9505 · #FFD89B

Cozy Contrast

Use for cards, subtle background patterns, or secondary content, providing warmth with clear text.

#FFD89B · #CC5803 · #E17E22

CSS variables

:root {
  --spiced-marmalade-morning-1: #CC5803;
  --spiced-marmalade-morning-2: #E17E22;
  --spiced-marmalade-morning-3: #FF9505;
  --spiced-marmalade-morning-4: #FFD89B;
  --spiced-marmalade-morning-5: #FFF0D9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "spiced-marmalade-morning": {
        1: "#CC5803",
        2: "#E17E22",
        3: "#FF9505",
        4: "#FFD89B",
        5: "#FFF0D9",
      }
    }
  }
}

Hex values

Color 1#CC5803

Color 2#E17E22

Color 3#FF9505

Color 4#FFD89B

Color 5#FFF0D9

Accessibility

Contrast checker

1.5:1Fail

1.9:1Fail

3.1:1AA18

3.8:1AA18

1.5:1Fail

1.3:1Fail

2.2:1Fail

2.6:1Fail

1.9:1Fail

1.3:1Fail

1.6:1Fail

2:1Fail

3.1:1AA18

2.2:1Fail

1.6:1Fail

1.2:1Fail

3.8:1AA18

2.6:1Fail

2:1Fail

1.2:1Fail

Similar palettes

More like Spiced Marmalade Morning

View all warm

Amber Nectar

Bright Autumn Orchard