Palette

Maple Syrup

Warm, inviting browns and ambers, like thick, golden maple syrup drizzling over a stack of pancakes.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Maple Syrup 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 Maple Syrup.

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

Data visualization

#5D3C1F#8B572A#C27B38#E6AF6B#4A301A

Palette guide

How to use Maple Syrup

Overview

The Maple Syrup palette offers warm, inviting browns and ambers, like thick, golden maple syrup drizzling over a stack of pancakes. This rich collection ranges from deep, robust browns (#4A301A, #5D3C1F) to a luminous golden amber (#E6AF6B) and a classic maple hue (#C27B38). The mid-tone brown (#8B572A) provides a balanced supporting role, creating a harmonious and comforting aesthetic. Designers and developers can leverage these colors to evoke feelings of natural warmth, sweetness, and rustic charm, making it perfect for food-related brands, cozy lifestyle content, or autumnal designs.

Best used for

Food and beverage branding, especially for breakfast or dessert products
Rustic cafe or restaurant interior design and menu boards
Autumnal event promotions or seasonal web themes
Packaging for artisanal goods or natural products
Home decor and lifestyle content emphasizing warmth and comfort
Wood-themed designs or natural material representations

Suggested color roles

primary

Designate #C27B38 (Dark Gold) as the primary color for key headings, brand elements, or calls-to-action to convey richness and quality.

secondary

Utilize #8B572A (Brown) for supporting content, secondary navigation, or larger UI sections, offering a sturdy, warm foundation.

accent

Apply #E6AF6B (Light Amber) sparingly for highlights, interactive states, or subtle decorative elements to add a touch of luminosity.

background

Use #E6AF6B (Light Amber) as a warm, inviting background for large areas, providing a soft glow that complements the darker tones.

text

Select #4A301A (Very Dark Brown) for body text and crucial information, ensuring excellent readability and a deep, sophisticated contrast.

Accessibility notes

Ensure #4A301A text on #E6AF6B or #C27B38 backgrounds meets WCAG contrast standards for readability.
Avoid using #E6AF6B for small text on #C27B38 as contrast may be insufficient; reserve for larger design elements.
The darkest browns (#4A301A, #5D3C1F) offer the best contrast for text against any lighter color in the palette.
Consider larger font sizes or bolding when using #8B572A for headings on lighter backgrounds to improve legibility.

Recommended combinations

Golden Drizzle

Ideal for a prominent header, product showcase, or a sophisticated brand logo that balances warmth and depth.

#C27B38 · #E6AF6B · #4A301A

Rich Brew

Excellent for a cozy background, footer, or sections requiring a robust, natural, and inviting feel.

#5D3C1F · #8B572A · #C27B38

Sweet Amber

Soft and elegant, perfect for subtle UI elements, informational panels, or creating a light, warm atmosphere with good text contrast.

#E6AF6B · #4A301A · #8B572A

CSS variables

:root {
  --maple-syrup-1: #5D3C1F;
  --maple-syrup-2: #8B572A;
  --maple-syrup-3: #C27B38;
  --maple-syrup-4: #E6AF6B;
  --maple-syrup-5: #4A301A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "maple-syrup": {
        1: "#5D3C1F",
        2: "#8B572A",
        3: "#C27B38",
        4: "#E6AF6B",
        5: "#4A301A",
      }
    }
  }
}

Hex values

Color 1#5D3C1F

Color 2#8B572A

Color 3#C27B38

Color 4#E6AF6B

Color 5#4A301A

Accessibility

Contrast checker

1.6:1Fail

2.9:1Fail

5:1AA

1.2:1Fail

1.6:1Fail

1.8:1Fail

3.1:1AA18

2:1Fail

2.9:1Fail

1.8:1Fail

1.7:1Fail

3.6:1AA18