Palette

Sweet Apricot Jam

A delectable palette evoking the sunny sweetness and warmth of homemade apricot preserves.

warmplayful5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sweet Apricot Jam 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 Sweet Apricot Jam.

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

Data visualization

#FB9D63#F9D670#F6C47A#CD5C5C#FFF8E7

Palette guide

How to use Sweet Apricot Jam

Overview

The Sweet Apricot Jam palette is a delectable collection of sunny, warm tones that evoke the comforting sweetness of homemade apricot preserves. Featuring the vibrant orange of #FB9D63, the cheerful yellow of #F9D670, and the rich amber of #F6C47A, this palette radiates warmth and playfulness. Designers can utilize these inviting colors to create cheerful and appetizing digital experiences, perfect for food blogs, product packaging, or culinary branding. The deeper red of #CD5C5C adds a touch of richness, while the creamy #FFF8E7 provides a soft, bright base, making this palette ideal for projects that aim for a delicious, homely, and vibrant aesthetic.

Best used for

Food and beverage branding (especially jams/sweets)
Recipe blogs and culinary websites
Summer-themed marketing campaigns
Café or bakery branding
Playful product packaging
Children's book illustrations

Suggested color roles

primary

#FB9D63 - This vibrant apricot orange serves as a cheerful primary, ideal for impactful headlines, playful logos, or key call-to-action buttons.

secondary

#CD5C5C - A rich, warm red that adds depth and complements the primary, perfect for subheadings, navigation, or as a background for important content.

accent

#F9D670 - Use this bright, sunny yellow for luminous highlights, interactive elements, or small details that require a cheerful pop.

background

#FFF8E7 - This soft, creamy off-white provides a clean, airy background that allows the vibrant colors to stand out beautifully.

text

A deep brown like #4D3425 or a classic charcoal #333333 will provide excellent readability against the lighter background shades.

Accessibility notes

Ensure sufficient contrast for text against #FFF8E7; darker palette colors like #CD5C5C or #FB9D63 are recommended for body text.
Avoid pairing #F9D670 with #F6C47A for small text or icons due to potential low contrast.
Test interactive elements like buttons using #FB9D63 on #FFF8E7 to ensure they meet WCAG contrast guidelines.
For headings and crucial information, prioritize the use of #CD5C5C or a similar dark shade.

Recommended combinations

Sweet Spread

Creates an appetizing feel: #FB9D63 for inviting headlines, #CD5C5C for supporting text, and #FFF8E7 as a clean, warm background.

#FB9D63 · #CD5C5C · #FFF8E7

Sunny Preserves

Use #F9D670 for bright highlights, #F6C47A for warm accents, and #FFF8E7 for an airy, optimistic base in cheerful designs.

#F9D670 · #F6C47A · #FFF8E7

Jam Jar

Ideal for vibrant branding: #CD5C5C for strong visual elements, #FB9D63 for impactful statements, and #F9D670 for luminous details.

#CD5C5C · #FB9D63 · #F9D670

CSS variables

:root {
  --sweet-apricot-jam-1: #FB9D63;
  --sweet-apricot-jam-2: #F9D670;
  --sweet-apricot-jam-3: #F6C47A;
  --sweet-apricot-jam-4: #CD5C5C;
  --sweet-apricot-jam-5: #FFF8E7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sweet-apricot-jam": {
        1: "#FB9D63",
        2: "#F9D670",
        3: "#F6C47A",
        4: "#CD5C5C",
        5: "#FFF8E7",
      }
    }
  }
}

Hex values

Color 1#FB9D63

Color 2#F9D670

Color 3#F6C47A

Color 4#CD5C5C

Color 5#FFF8E7

Accessibility

Contrast checker

1.5:1Fail

1.3:1Fail

1.9:1Fail

2:1Fail

1.5:1Fail

1.1:1Fail

2.8:1Fail

1.3:1Fail

1.1:1Fail

2.5:1Fail

1.5:1Fail

1.9:1Fail

2.8:1Fail

2.5:1Fail

3.8:1AA18

2:1Fail

1.3:1Fail

1.5:1Fail

3.8:1AA18

Similar palettes

More like Sweet Apricot Jam

Sweet Apricot Jam

See it in context.

Ready when you are.

Built with Sweet Apricot Jam.

How to use Sweet Apricot Jam

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sweet Spread

Sunny Preserves

Jam Jar

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sweet Apricot Jam