Palette

Amber Apothecary Jar

A comforting palette evoking old glass jars filled with dried herbs and warm liquids.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Amber Apothecary Jar 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 Amber Apothecary Jar.

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

Data visualization

#C17F38#E2B27E#8C4724#6D2F0E#F2D0A9

Palette guide

How to use Amber Apothecary Jar

Overview

The Amber Apothecary Jar palette is a comforting collection that evokes the warmth and rustic charm of old glass jars filled with dried herbs and warm liquids. It features a rich spectrum of amber and brown tones, from the deep, grounding #6D2F0E and the earthy #8C4724, through the warm #C17F38 and the inviting #E2B27E. The lightest, almost creamy tone, #F2D0A9, provides a soft, aged highlight. This palette is ideal for designers and developers seeking a natural, vintage, and cozy aesthetic. It's perfectly suited for projects requiring a sense of tradition, warmth, or organic elegance, such as artisanal brands, heritage products, or inviting digital environments.

Best used for

Artisanal food or craft brands
Vintage-inspired websites or blogs
Coffee shop or bakery branding
Home decor and interior design
Herbal medicine or natural product packaging
Cozy digital interfaces

Suggested color roles

primary

Use #6D2F0E as the deepest, grounding chocolate brown for primary content, conveying warmth and heritage.

secondary

Apply #8C4724 as a rich, versatile rustic brown for secondary elements, adding an earthy, natural feel.

accent

Employ #C17F38 as a warm, inviting amber highlight for calls-to-action or decorative elements.

background

Utilize #F2D0A9 as a light, creamy, aged base, creating a soft, welcoming backdrop.

text

Set body text in #6D2F0E, the darkest color, for optimal readability on light backgrounds like #F2D0A9.

Accessibility notes

Text in #6D2F0E on #F2D0A9 background offers excellent contrast, ensuring readability for all users.
Avoid using #E2B27E for small text on #C17F38 background due to low contrast, impacting legibility.
Use the darker browns for primary content and calls-to-action to ensure maximum legibility and visual hierarchy.
Ensure interactive elements have clear visual states that are not solely color-dependent, especially with warm, similar tones.

Recommended combinations

Rustic Depth

Creates a profound, layered depth, ideal for primary content blocks, footers, or atmospheric backgrounds.

#6D2F0E · #8C4724 · #C17F38

Aged Glow

A light, ethereal combination perfect for headers, subtle gradients, or decorative elements.

#F2D0A9 · #E2B27E · #C17F38

Herbal Infusion

Provides a balanced, natural flow, suitable for data visualization or layered UI components.

#8C4724 · #E2B27E · #6D2F0E

CSS variables

:root {
  --amber-apothecary-jar-1: #C17F38;
  --amber-apothecary-jar-2: #E2B27E;
  --amber-apothecary-jar-3: #8C4724;
  --amber-apothecary-jar-4: #6D2F0E;
  --amber-apothecary-jar-5: #F2D0A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "amber-apothecary-jar": {
        1: "#C17F38",
        2: "#E2B27E",
        3: "#8C4724",
        4: "#6D2F0E",
        5: "#F2D0A9",
      }
    }
  }
}

Hex values

Color 1#C17F38

Color 2#E2B27E

Color 3#8C4724

Color 4#6D2F0E

Color 5#F2D0A9

Accessibility

Contrast checker

1.7:1Fail

2.1:1Fail

3.1:1AA18

2.3:1Fail

1.7:1Fail

3.6:1AA18

5.3:1AA

1.3:1Fail

2.1:1Fail

3.6:1AA18

1.5:1Fail

4.7:1AA