Palette

Rustic Tuscan Hills

Warm, sun-baked earth tones capture the picturesque charm of rolling Tuscan hillsides under the Mediterranean sun.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rustic Tuscan Hills 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 Rustic Tuscan Hills.

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

Data visualization

#CD853F#A0522D#8B4513#556B2F#BDB76B

Palette guide

How to use Rustic Tuscan Hills

Overview

The Rustic Tuscan Hills palette evokes the picturesque charm of rolling Tuscan hillsides, blending warm, sun-baked earth tones with natural greens. Featuring rich hues like the deep sienna of #A0522D and the warm ochre of #CD853F, it creates a grounded and inviting atmosphere. Designers can leverage the vibrant olive of #556B2F for a natural accent, while the rustic brown of #8B4513 anchors the scheme. The subtle warmth of #BDB76B provides a softer highlight, ideal for evoking a Mediterranean sun-kissed feel. This palette is perfect for projects requiring an organic, established, and comforting aesthetic, reminiscent of Italian landscapes.

Best used for

Mediterranean restaurant branding
Rustic home decor websites
Travel agency marketing for Italy
Organic food packaging
Farm-to-table culinary blogs
E-commerce for artisanal goods

Suggested color roles

primary

Use #A0522D as a grounding main color for large sections or headers, conveying warmth and stability.

secondary

Apply #CD853F for prominent elements like call-to-action buttons or key information blocks, offering a brighter, inviting contrast.

accent

Introduce #556B2F for subtle natural details, icons, or hover states, adding a touch of organic vibrancy.

background

Employ #BDB76B for light, textural backgrounds or secondary content areas, providing a soft, earthy base.

text

For body copy, use #8B4513 on lighter backgrounds like #BDB76B to ensure readability and maintain the rustic theme.

Accessibility notes

Ensure sufficient contrast between #8B4513 text and #BDB76B backgrounds for WCAG AA compliance.
Avoid placing #A0522D directly on #CD853F for large text as their luminance contrast may be low.
Use #556B2F sparingly for text on darker browns; consider a lighter shade or white text instead.
Prioritize high contrast for interactive elements like buttons and links, especially with #CD853F and #A0522D.

Recommended combinations

Earth & Sun

Ideal for main content blocks, highlighting key information and providing a warm, inviting background.

#A0522D · #CD853F · #BDB76B

Rustic Green

Perfect for natural themes, combining deep wood tones with a refreshing touch of olive and a soft, earthy cream.

#8B4513 · #556B2F · #BDB76B

Tuscan Sunset

Creates a rich, layered effect, suitable for headers, footers, or accentuating visual depth in design.

#CD853F · #A0522D · #8B4513

CSS variables

:root {
  --rustic-tuscan-hills-1: #CD853F;
  --rustic-tuscan-hills-2: #A0522D;
  --rustic-tuscan-hills-3: #8B4513;
  --rustic-tuscan-hills-4: #556B2F;
  --rustic-tuscan-hills-5: #BDB76B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rustic-tuscan-hills": {
        1: "#CD853F",
        2: "#A0522D",
        3: "#8B4513",
        4: "#556B2F",
        5: "#BDB76B",
      }
    }
  }
}

Hex values

Color 1#CD853F

Color 2#A0522D

Color 3#8B4513

Color 4#556B2F

Color 5#BDB76B

Accessibility

Contrast checker

1.9:1Fail

2.4:1Fail

2:1Fail

1.4:1Fail

1.9:1Fail

1.3:1Fail

1.1:1Fail

2.7:1Fail

2.4:1Fail

1.3:1Fail

1.2:1Fail

3.4:1AA18

2:1Fail

1.1:1Fail

1.2:1Fail

2.9:1Fail

1.4:1Fail

2.7:1Fail

3.4:1AA18

2.9:1Fail

Similar palettes

More like Rustic Tuscan Hills