Palette

Terracotta Oven Bake

Warm, inviting browns and oranges, like the rich tones of terracotta fresh from the oven.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Terracotta Oven Bake 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 Terracotta Oven Bake.

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

Data visualization

#B87333#CD853F#D2691E#E9967A#F4A460

Palette guide

How to use Terracotta Oven Bake

Overview

The Terracotta Oven Bake palette exudes warmth and comfort, featuring inviting browns and oranges reminiscent of freshly baked clay. Designers can utilize the rich `#B87333` and `#CD853F` for strong, earthy foundations, while `#D2691E` adds a vibrant, energetic pop. The lighter `#E9967A` and `#F4A460` provide soft, sun-baked accents, perfect for backgrounds or delicate highlights. This palette is ideal for projects emphasizing natural warmth, artisan quality, and a cozy, inviting atmosphere, making it suitable for food branding, craft e-commerce, or web designs that evoke a sense of tradition and comfort.

Best used for

Bakery and cafe branding
Artisan craft websites
Ceramics studio marketing
Rustic home decor blogs
Natural food packaging
E-commerce for handmade goods

Suggested color roles

primary

#B87333 - A rich, coppery brown, excellent for strong headings, primary buttons, or foundational design elements, conveying warmth and authenticity.

secondary

#CD853F - A vibrant medium brown, perfect for subheadings, prominent accents, or backgrounds that need to feel inviting and robust.

accent

#E9967A - A soft, peachy terracotta, ideal for subtle highlights, interactive elements, or decorative details that need a gentle, airy touch.

background

#F4A460 - A light, sandy brown, suitable for main content backgrounds, offering a warm yet clean canvas for readability.

text

#D2691E - This deep chocolate orange provides strong contrast and legibility for body text against light backgrounds. For text on darker backgrounds, use white or near-white.

Accessibility notes

Ensure `#D2691E` text on `#F4A460` meets WCAG contrast guidelines.
Avoid using `#E9967A` or `#F4A460` for small text on light backgrounds due to low contrast.
Use `#B87333` for important interactive elements to ensure visibility.
The warm tones can be challenging for color-blind users; ensure key information isn't solely color-coded.

Recommended combinations

Baked Earth

For a strong, earthy header and welcoming content, providing depth and natural warmth.

#B87333 · #CD853F · #D2691E

Warm Accents

Ideal for softer sections, blending warm browns with delicate, airy peach accents.

#CD853F · #E9967A · #F4A460

Rustic Glow

Creates a cozy, natural feel, using deep brown with a vibrant orange and a light, warm highlight.

#B87333 · #D2691E · #F4A460

CSS variables

:root {
  --terracotta-oven-bake-1: #B87333;
  --terracotta-oven-bake-2: #CD853F;
  --terracotta-oven-bake-3: #D2691E;
  --terracotta-oven-bake-4: #E9967A;
  --terracotta-oven-bake-5: #F4A460;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "terracotta-oven-bake": {
        1: "#B87333",
        2: "#CD853F",
        3: "#D2691E",
        4: "#E9967A",
        5: "#F4A460",
      }
    }
  }
}

Hex values

Color 1#B87333

Color 2#CD853F

Color 3#D2691E

Color 4#E9967A

Color 5#F4A460

Accessibility

Contrast checker

1.3:1Fail

1:1Fail

1.6:1Fail

1.9:1Fail

1.3:1Fail

1.2:1Fail

1.3:1Fail

1.5:1Fail

1:1Fail

1.2:1Fail

1.6:1Fail

1.8:1Fail

1.6:1Fail

1.3:1Fail

1.6:1Fail

1.1:1Fail

1.9:1Fail

1.5:1Fail

1.8:1Fail

1.1:1Fail

Similar palettes

More like Terracotta Oven Bake

Terracotta Oven Bake

See it in context.

Ready when you are.

Built with Terracotta Oven Bake.

How to use Terracotta Oven Bake

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Baked Earth

Warm Accents

Rustic Glow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Terracotta Oven Bake