Palette

Old Bookshelf Warmth

Rich, deep browns and warm tans evoke the comforting aroma and timeless feel of an old bookshelf.

warmelegant5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Old Bookshelf Warmth 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 Old Bookshelf Warmth.

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

Data visualization

#5F4B3F#8B4513#A0522D#D2B48C#C0C0C0

Palette guide

How to use Old Bookshelf Warmth

Overview

The Old Bookshelf Warmth palette offers a rich and comforting collection of deep browns, warm oranges, and a soft tan, evoking the inviting aroma and timeless feel of an old bookshelf. Featuring the grounding `#5F4B3F`, the vibrant `#8B4513`, and the elegant `#D2B48C`, this palette exudes rustic charm, cozy sophistication, and a touch of vintage appeal. Designers and developers can leverage these hues to craft interfaces and branding that feel authentic, established, and genuinely welcoming. It’s ideal for projects aiming for a nostalgic, artisanal, or educational aesthetic, providing a warm and inviting backdrop for various applications.

Best used for

Cozy cafe or bookstore branding
Rustic home decor e-commerce
Vintage-inspired blog themes
Craft and handmade goods websites
Educational platforms with an inviting feel
Autumnal event marketing

Suggested color roles

primary

The deep `#5F4B3F` is excellent for strong headers, primary navigation, or as a foundational dark background color.

secondary

Use `#8B4513` for content sections, secondary buttons, or as a rich accent to add vibrancy and depth.

accent

Apply `#A0522D` for subtle highlights, interactive states, or decorative elements that need a pop of warm color.

background

The lightest shade, `#D2B48C`, provides an excellent, soft, aged paper-like canvas for main content areas.

text

For optimal readability on lighter backgrounds, a dark brown like `#5F4B3F` or black is highly recommended. On dark backgrounds, use white or light cream.

Accessibility notes

Ensure strong contrast between `#5F4B3F` text on `#D2B48C` background for readability.
Be mindful of using `#A0522D` or `#8B4513` for text on mid-tone backgrounds, as contrast may be insufficient.
The darkest color, `#5F4B3F`, provides excellent contrast for UI elements when placed on the lighter shades.
Consider using a bright white or very light cream for text when using the darkest colors (`#5F4B3F`, `#8B4513`) as backgrounds.

Recommended combinations

Autumnal Glow

Ideal for main content areas, with `#D2B48C` as background, `#A0522D` for highlights, and `#5F4B3F` for text/headings.

#D2B48C · #A0522D · #5F4B3F

Rustic Charm

Excellent for navigation bars, footers, or hero sections, creating a rich, layered, and sophisticated feel.

#5F4B3F · #8B4513 · #D2B48C

Cozy Read

Use `#8B4513` for vibrant accents, `#C0C0C0` for subtle details or borders, and `#A0522D` for complementary elements.

#8B4513 · #C0C0C0 · #A0522D

CSS variables

:root {
  --old-bookshelf-warmth-1: #5F4B3F;
  --old-bookshelf-warmth-2: #8B4513;
  --old-bookshelf-warmth-3: #A0522D;
  --old-bookshelf-warmth-4: #D2B48C;
  --old-bookshelf-warmth-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "old-bookshelf-warmth": {
        1: "#5F4B3F",
        2: "#8B4513",
        3: "#A0522D",
        4: "#D2B48C",
        5: "#C0C0C0",
      }
    }
  }
}

Hex values

Color 1#5F4B3F

Color 2#8B4513

Color 3#A0522D

Color 4#D2B48C

Color 5#C0C0C0

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

4.2:1AA18

4.5:1AA

1.2:1Fail

1.3:1Fail

3.6:1AA18

3.9:1AA18

1.5:1Fail

1.3:1Fail

2.8:1Fail

3.1:1AA18

4.2:1AA18

3.6:1AA18

2.8:1Fail

1.1:1Fail

4.5:1AA

3.9:1AA18

3.1:1AA18

1.1:1Fail

Similar palettes

More like Old Bookshelf Warmth