Back to palettes

Palette

Warm Umber

Rich and inviting shades of brown, offering depth and warmth inspired by roasted coffee beans.

monochromenatural5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Warm Umber 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 Warm Umber.

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

Data visualization

#7B3F00#A0522D#CD853F#D2691E#5B2C00

Palette guide

How to use Warm Umber

Overview

The Warm Umber palette offers a rich, inviting range of brown tones, perfect for creating cozy and sophisticated designs. This monochrome collection, featuring shades like the deep #5B2C00, the warm #7B3F00, and the lighter #CD853F, evokes a sense of natural comfort and classic elegance. Designers can leverage its earthy depth for branding that aims for reliability, warmth, or organic appeal. Developers will find these hex codes easy to implement for UI elements that require a grounding, sophisticated touch, ensuring visual consistency across various applications. The spectrum from dark chocolate to a lighter sienna provides versatility for both dominant and subtle applications.

Best used for

  • Coffee shop branding and interior design
  • Rustic or natural product packaging
  • Autumnal themed websites or digital campaigns
  • Cozy home decor e-commerce sites
  • Sophisticated corporate branding
  • Editorial design for food or lifestyle blogs

Suggested color roles

primary

#7B3F00 - A deep, rich brown, ideal for main brand elements, large sections, or prominent UI components where warmth and depth are desired.

secondary

#A0522D - A softer, more reddish brown that complements the primary, suitable for subheadings, navigation, or secondary interactive elements.

accent

#D2691E - A vibrant, almost burnt orange hue, perfect for calls-to-action, highlights, or small decorative details to draw attention.

background

#CD853F - A lighter, more golden brown, excellent for backgrounds that need to feel warm and inviting without being too dark, offering good contrast.

text

#5B2C00 - A very dark, almost black brown, providing excellent readability against lighter backgrounds like #CD853F, or use a near-white like #F5F5DC for dark backgrounds.

Accessibility notes

  • Ensure sufficient contrast between #5B2C00 text and backgrounds like #CD853F for WCAG AA compliance.
  • Avoid using #A0522D or #D2691E for small body text against similar mid-tone browns; save them for headings or accents.
  • For interactive elements, provide clear hover/focus states, possibly using #D2691E for active states.
  • Consider a very light cream or off-white background if using multiple dark browns for text and elements to maximize readability.

Recommended combinations

Earthy Contrast

Use #5B2C00 for strong headings, #CD853F as a warm background, and #D2691E for a vibrant accent on buttons or links.

#5B2C00 · #CD853F · #D2691E

Rich Monochromatic

A harmonious blend for sophisticated layouts. #7B3F00 for main sections, #A0522D for sub-elements, and #CD853F for lighter details.

#7B3F00 · #A0522D · #CD853F

Deep & Warm

Ideal for creating a luxurious, deep, and cozy feel. #5B2C00 as base, #7B3F00 for primary content, and #A0522D for supporting elements.

#5B2C00 · #7B3F00 · #A0522D

CSS variables

:root {
  --warm-umber-1: #7B3F00;
  --warm-umber-2: #A0522D;
  --warm-umber-3: #CD853F;
  --warm-umber-4: #D2691E;
  --warm-umber-5: #5B2C00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "warm-umber": {
        1: "#7B3F00",
        2: "#A0522D",
        3: "#CD853F",
        4: "#D2691E",
        5: "#5B2C00",
      }
    }
  }
}

Related searches

warm brown color palettenatural earth tone colorscoffee inspired designrustic brown hex codescozy autumn color scheme

Palette colors

Hex values

Color 1#7B3F00
·
Color 2#A0522D
·
Color 3#CD853F
·
Color 4#D2691E
·
Color 5#5B2C00
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.8:1Fail
2.3:1Fail
1.4:1Fail
2
1.5:1Fail
1.9:1Fail
1.5:1Fail
2.1:1Fail
3
2.8:1Fail
1.9:1Fail
1.2:1Fail
3.9:1AA18
4
2.3:1Fail
1.5:1Fail
1.2:1Fail
3.2:1AA18
5
1.4:1Fail
2.1:1Fail
3.9:1AA18
3.2:1AA18

Similar palettes

More like Warm Umber

View all monochrome
Earthen Pot Craft
Rustic Leather Patina
Ancient Temple Moss
Botanical Fern Bloom
Desert Sand Texture
Emerald Canopy Sun