Back to palettes

Palette

Quince Preserve

Warm, mellow orange and golden tones, like homemade quince preserves, sweet and comforting.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Quince Preserve 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 Quince Preserve.

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

Data visualization

#AF7C4F#D7A279#F2CDAD#FFE5D1#8C633F

Palette guide

How to use Quince Preserve

Overview

The Quince Preserve palette radiates warmth and comfort, featuring mellow orange and golden tones reminiscent of homemade quince preserves. With hex codes #AF7C4F, #D7A279, #F2CDAD, #FFE5D1, and #8C633F, this collection is perfect for designers and developers seeking to evoke a cozy, inviting, and natural atmosphere. Its harmonious blend of rich, earthy browns and soft, sun-kissed oranges provides exceptional versatility for food branding, autumnal designs, or comforting digital experiences. The palette's inviting nature makes it ideal for projects that aim to convey warmth and authenticity.

Best used for

  • Food and beverage branding
  • Cozy cafes and bakeries
  • Autumn-themed digital designs
  • Rustic home decor presentations
  • Comforting websites and blogs
  • Natural and organic product packaging

Suggested color roles

primary

Utilize #AF7C4F as a rich, inviting primary color, ideal for main content areas or foundational UI components due to its warm appeal.

secondary

Incorporate #D7A279 as a lighter, warm secondary shade, perfect for supporting elements, subtle dividers, or hover states.

accent

Apply #8C633F as a deep, grounding accent to provide clear contrast and emphasize important information or calls-to-action.

background

Employ #FFE5D1 as a light, soft background color, offering an expansive and refreshing canvas that enhances the palette's cozy mood.

text

For optimal readability, use #8C633F for main headings and #AF7C4F for body text, ensuring excellent contrast against the lighter background tones.

Accessibility notes

  • Ensure #8C633F provides excellent contrast when used as text on the lightest background, #FFE5D1, meeting WCAG standards.
  • Be cautious when pairing #F2CDAD as text on #FFE5D1; always verify sufficient contrast for readability.
  • Lighter shades like #F2CDAD should be avoided for small text unless contrasted with a very dark background.
  • The mid-tone #AF7C4F offers good readability for body text on #FFE5D1, but always test for smaller font sizes.

Recommended combinations

Preserve Depth

Creates strong visual hierarchy with a deep grounding color, a crisp background, and a balanced mid-tone for emphasis.

#8C633F · #FFE5D1 · #AF7C4F

Mellow Warmth

Ideal for soft, progressive transitions, perfect for background sections, data visualizations, or subtle UI states.

#D7A279 · #F2CDAD · #AF7C4F

Golden Glow

Provides an airy and harmonious feel, excellent for expansive backgrounds or delicate graphic elements that promote calm.

#FFE5D1 · #F2CDAD · #D7A279

CSS variables

:root {
  --quince-preserve-1: #AF7C4F;
  --quince-preserve-2: #D7A279;
  --quince-preserve-3: #F2CDAD;
  --quince-preserve-4: #FFE5D1;
  --quince-preserve-5: #8C633F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "quince-preserve": {
        1: "#AF7C4F",
        2: "#D7A279",
        3: "#F2CDAD",
        4: "#FFE5D1",
        5: "#8C633F",
      }
    }
  }
}

Related searches

quince color palettewarm orange browncozy food colorsautumnal design schemerustic preserve tones

Palette colors

Hex values

Color 1#AF7C4F
·
Color 2#D7A279
·
Color 3#F2CDAD
·
Color 4#FFE5D1
·
Color 5#8C633F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.4:1Fail
3:1Fail
1.5:1Fail
2
1.6:1Fail
1.5:1Fail
1.9:1Fail
2.4:1Fail
3
2.4:1Fail
1.5:1Fail
1.2:1Fail
3.6:1AA18
4
3:1Fail
1.9:1Fail
1.2:1Fail
4.4:1AA18
5
1.5:1Fail
2.4:1Fail
3.6:1AA18
4.4:1AA18

Similar palettes

More like Quince Preserve

View all warm
Gingerbread Spice
Spiced Orange Marmalade
Berry Crumble Warmth
Caramel Swirl Indulge
Gingerbread Spice Blend
Maple Syrup