Palette

Autumn Harvest Bread

Earthy browns and warm golds reminiscent of freshly baked harvest bread.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Autumn Harvest Bread 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 Autumn Harvest Bread.

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

Data visualization

#D4B880#A68D5F#7C603F#5D432D#3E291C

Palette guide

How to use Autumn Harvest Bread

Overview

The "Autumn Harvest Bread" palette features earthy browns and warm golds reminiscent of freshly baked harvest bread. It transitions from the light, warm gold of #D4B880 through the soft beige-brown of #A68D5F to the richer, medium browns of #7C603F and #5D432D, culminating in the deep, dark brown of #3E291C. This collection is perfect for designs aiming to evoke natural warmth, comforting authenticity, and a sense of wholesome simplicity. Designers and developers can utilize these harmonious hues for creating inviting interfaces, organic branding, or evocative seasonal content.

Best used for

Bakery or coffee shop branding
Food blogs and recipe websites
Organic or artisanal product packaging
Cozy home and lifestyle e-commerce
User interfaces with a warm, comforting feel
Digital art and illustrations of food

Suggested color roles

primary

#A68D5F - A warm, inviting beige-brown that serves as an excellent focal point for branding, call-to-action buttons, or main headings.

secondary

#7C603F - A richer, medium brown that provides strong support for subheadings, navigation elements, or content dividers.

accent

#D4B880 - A light, warm gold that adds a luminous touch, perfect for interactive elements, highlights, or subtle decorative details.

background

#5D432D - A deep, earthy brown that provides a strong, grounded base, allowing lighter browns and golds to stand out.

text

#3E291C - A very deep, dark brown that provides excellent contrast against lighter shades like #D4B880 or #A68D5F, ensuring high readability for body text.

Accessibility notes

Ensure sufficient contrast for text, especially when using #D4B880 on #A68D5F, which may be challenging for readability.
For body text on #D4B880 or #A68D5F, use #3E291C or a deep charcoal/black to meet WCAG AA standards.
Avoid using #7C603F for small text on #5D432D due to potential readability issues.
Test interactive elements for clear visual feedback and sufficient contrast in all states.

Recommended combinations

Freshly Baked

Creates a soft to medium brown gradient, ideal for backgrounds, headers, or atmospheric sections.

#D4B880 · #A68D5F · #7C603F

Rustic Loaf

Combines the deepest browns with a light gold for striking contrast and a robust, earthy feel.

#3E291C · #5D432D · #D4B880

Warm Crust

A harmonious blend of medium to deep browns, great for dynamic visual elements or highlighting key information.

#A68D5F · #7C603F · #5D432D

CSS variables

:root {
  --autumn-harvest-bread-1: #D4B880;
  --autumn-harvest-bread-2: #A68D5F;
  --autumn-harvest-bread-3: #7C603F;
  --autumn-harvest-bread-4: #5D432D;
  --autumn-harvest-bread-5: #3E291C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "autumn-harvest-bread": {
        1: "#D4B880",
        2: "#A68D5F",
        3: "#7C603F",
        4: "#5D432D",
        5: "#3E291C",
      }
    }
  }
}

Hex values

Color 1#D4B880

Color 2#A68D5F

Color 3#7C603F

Color 4#5D432D

Color 5#3E291C

Accessibility

Contrast checker

1.7:1Fail

3:1AA18

4.8:1AA

7.1:1AAA

1.7:1Fail

1.8:1Fail

2.9:1Fail

4.3:1AA18

3:1AA18

1.8:1Fail

1.6:1Fail

2.3:1Fail